CSS3 animation transformの動きデモ

要素を変化させるtransformの実際の動き方を見るためにデモを作ってみました。

プレビュー

↓別ウィンドウを開いて見る
CSS3 animation transformの動きデモ - js do it

ポイント

transform

値	内容
scale	拡大・縮小
rotate	回転
translate	距離
skew	歪み

animationのプロパティ

プロパティ	内容
-webkit-animation-name	アニメーションの名前
-webkit-animation-duration	再生時間
-webkit-animation-timing-function	動き方
-webkit-animation-iteration-count	再生回数 ※無限：infinite
-webkit-animation-direction	再生方向 ※逆再生：alternate
-webkit-animation-delay	遅延時間

@-webkit-keyframesの使い方

@-webkit-keyframes アニメーションの名前 {
0%{何をどのように変化させるか;}
・
・
50%{何をどのように変化させるか;}
・
・
100%{何をどのように変化させるか;}
}

コード

HTML

<div id="scale"></div>
<div id="rotate"></div>
<div id="translateX"></div>
<div id="translateY"></div>
<div id="skew"></div>

CSS

div{
    width:80px;
    height:80px;
    border-radius:5px;
}

#scale {
    margin:200px 0 0 190px;
    background-color:#2D89F0;
    -webkit-animation-name: scale;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-direction:alternate;
}
@-webkit-keyframes scale {
    0%{-webkit-transform:scale(1);}
    100%{-webkit-transform:scale(2.0);}
}

#rotate{
    margin:-250px 0 0 190px;
    background-color:#01A31C;
    -webkit-animation-name: rotate;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-direction:alternate;
}
@-webkit-keyframes rotate {
    0%{-webkit-transform:rotate(0deg);}
    50%{-webkit-transform:rotate(360deg);}
    100%{-webkit-transform:scale(360deg);}
}
#translateX {
    margin:240px 0 0 0;
    background-color:#D44A26;
    -webkit-animation-name: translateX;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-direction:alternate;
}
@-webkit-keyframes translateX {
    0%{-webkit-transform:translate(0);}
    100%{-webkit-transform:translate(350px);}
}
#translateY {
    margin:-400px 0 0 0;
    background-color:#BC1C48;
   -webkit-animation-name: translateY;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-direction:alternate;
}
@-webkit-keyframes translateY {
    0%{-webkit-transform:translate(0,0);}
    100%{-webkit-transform:translate(0,320px);}
}
#skew {
    margin:0 0 0 320px;
    background-color:#603CBA;
    -webkit-animation-name: skew;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-direction:alternate;
}
@-webkit-keyframes skew {
    0%{-webkit-transform:skew(0);}
    100%{-webkit-transform:skew(30deg);}
}