読者です 読者をやめる 読者になる 読者になる

ウェブ学のすすめ

Study of Web Design & Programing

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);}
}