如何使用/深/聚合物與關鍵幀

Question

我有2個聚合物組件一父母和一個孩子。因爲我知道我將不得不創建更多的孩子，我想將我的CSS代碼放在父母中，就像每個孩子都可以使用它一樣。我表示移動我的代碼，一切都很順利，直到現在使用該代碼。

舊代碼

 .decale01 { 
      -webkit-animation-name: decale; 
      -webkit-animation-fill-mode: forwards; 
     } 

     @-webkit-keyframes decale { 
      0% { 
       top: 0; 
      } 
      100% { 
       top: -40px; 
      } 
     } 

新代碼

 :host /deep/ .decale { 
      -webkit-animation-name: decale; 
      -webkit-animation-fill-mode: forwards; 
     } 

     @-webkit-keyframes decale { 
      0% { 
       top: 0; 
      } 
      100% { 
       top: -40px; 
      } 
     } 

看來，它並不適用於動畫工作或我必須做額外的工作，作品.. 。 有任何想法嗎 ？其他方案？乾杯！

更新

我主持一些代碼上到位桶here

on that commit我創建了一個孩子是風格。如果你加載頁面，你會看到動畫

on this one我把孩子EL在他的父母和移動樣式代碼在父。像他孩子的行爲有沒有風格

and the last one除了動畫

克隆回購，並使用「GET酒吧」和「酒館成爲」看到動畫

Answer 1

我不認爲所有的工作作風:host可以這樣使用。

這應該工作。

* /deep/ .decale { 
     -webkit-animation-name: decale; 
     -webkit-animation-fill-mode: forwards; 
    } 

    @-webkit-keyframes decale { 
     0% { 
      top: 0; 
     } 
     100% { 
      top: -40px; 
     } 
    }