Safari(〜9系)でのcssアニメーション指定

Yukimi Sato 10views 更新:2016年10月20日

10系(最新)ではanimationで全部纏めて記述できるのですが、〜9系は -webkit 接頭語とそれぞれを指定してあげる必要があります。

-webkit-animation-name: topBtn;
-webkit-animation-duration: 3s;
-webkit-animation-timing-function: ease;
-webkit-animation-delay: 0s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal;
-webkit-animation-fill-mode: none;
-webkit-animation-play-state: running;

animationだけだとこう↓

animation: topBtn 3s ease 0s infinite normal none running;

気が付けばChromeもFireFoxも接頭語なくても動くようになっていた。

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません