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

箇条書きで書いていく.

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

rotateYを使うと解決する.

例

    animation: test 1s linear 0s infinite normal;

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