LoginSignup
15
11

More than 5 years have passed since last update.

cssアニメーションでつまったところ

Last updated at Posted at 2014-06-23

箇条書きで書いていく.

chromeはベンダープレフィクスを付けないとアニメーションは使えない.

    -webkit-animation: test 1s linear 0s infinite normal;

    @-webkit-keyframes test{
       /*...*/
    }

animation-iteration-countにinfiniteを指定したときの1ループ終了時のイベントはanimationendではなくanimationiteration.

chromeではwebkitAnimationIterationを使う.

firefoxでanimationのプロパティを一気に指定するとき,animation-delayに0を指定すると動かない.

firefoxのバージョンは30.0
sを付けると解決する.

    animation: test 1s linear 0s infinite normal;

IEでrotate3d(0,1,0,0deg)からrotate3d(0,1,0,180deg)までのアニメーションが意図した通りに動かない.

IEのバージョンは11
ie.gif

rotateYを使うと解決する.

    animation: test 1s linear 0s infinite normal;

    @keyframes test{
        0%{transform: rotateY(0deg);}
        100%{transform: rotateY(180deg);}
    }
15
11
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
15
11