not good but great

プログラミング、アート、映画・本の感想について書きます。

animationしたあとそのままの状態を維持

今更だがSublimeText2にCSS Snipetを入れてみた

aniと入力すると以下のようなコードが自動的に入力されたからたまげた。

-webkit-animation: name duration ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier(<number>,<number>,<number>,<number>) delay infinite|<number> normal|alternate;
       -moz-animation: name duration ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier(<number>,<number>,<number>,<number>) delay infinite|<number> normal|alternate;
        -ms-animation: name duration ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier(<number>,<number>,<number>,<number>) delay infinite|<number> normal|alternate;
         -o-animation: name duration ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier(<number>,<number>,<number>,<number>) delay infinite|<number> normal|alternate;
            animation: name duration ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier(<number>,<number>,<number>,<number>) delay infinite|<number> normal|alternate;

animationしたあとそのままの状態を維持するのはこれ。

animation-fill-mode:forwards;

参考
https://developer.mozilla.org/ja/docs/Web/CSS/animation-fill-mode?redirectlocale=ja&redirectslug=CSS%2Fanimation-fill-mode