Как использовать/глубокий/в полимере с ключевыми кадрами

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; 
      } 
     } 

Кажется, что он не работает для анимации, или я должен сделать дополнительную работу, что работы .. . есть идеи ? другое решение? Приветствия!

Update

Я принимал код на BitBucket here

on that commit Я создал ребенка является стилем. Если вы загрузите страницу, вы увидите анимацию

on this one Я положил дочерний элемент el в его родительский элемент и переместил код стиля в родительском. Ребенок действовать, как он не имеет никакого стиля

and the last one Все стиль работы, за исключением анимации

клон репо и использовать «паб получить» и «паб служить», чтобы увидеть анимацию

Answer 1

Я не думаю, :host можно использовать таким образом.

Это должно сработать.

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

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