polymer - /deep/ in Polymer をキーフレームで使用する方法

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

アニメーションでは機能しないようです。または、それを機能させるために追加の作業を行う必要があります...何かアイデアはありますか? 他の解決策？乾杯 ！

アップデート

ここでビットバケットでいくつかのコードをホストしました

そのコミットで、スタイルで子を作成しました。ページをロードすると、アニメーションが表示されます

これで、子elを親に置き、スタイルコードを親に移動します。子供はスタイルがないように振る舞う

そしてラストはアニメ以外の全作風

リポジトリを複製し、「pub get」と「pub serve」を使用してアニメーションを表示します