CSS3でアニメーション【vol.5】- ちょっと複雑なアニメーションを作ってみる。

この記事は4年前に書かれました。不適当な記述を含む場合がありますので、参考程度に留めてください。

どうもこんにちは。Toshikuraです。今回のtipsは【CSS3でアニメーション【vol.5】- ちょっと複雑なアニメーションを作ってみる。】です。全5回に分けてステップアップ式に記事化している最終回です。これまでの全4回の記事を統合してすこ複雑なアニメーションを作ってみます。

アニメーションのタイミング

まずはアニメーションの再生開始を決めておきます。今回はすこし複雑と書いていますので、ホバーとクリック両方で別のアニメーションが動くようにします。ということで…さっそくHTMLとJSの準備です。

HTML
<div class="css3-D">CSS</div>
JS
$(function(){
$(‘.css3-D’).click(function(){
$(this).toggleClass(‘after’);
});
});

クリックで【after】というクラスをつけます。詳しくは前回参照。

CSS

.css3-D{
background: #19283c;
border-radius: 0px;
width:200px;
height:200px;
line-height: 200px;
-webkit-transition-property:-webkit-transform,background,border-radius,height,width,line-height,box-shadow;
-webkit-transition-duration:0.5s;
-webkit-transition-timing-function:ease;
transition-property:transform,background,border-radius,height,width,line-height,box-shadow;
transition-duration:0.5s;
transition-timing-function:ease;
}

/* ホバー後の動作(アニメーション1)*/

.css3-D:hover{
background: #007374;
border-radius: 200px;
width:400px;
height:400px;
line-height: 400px;
box-shadow:0 0 40px 0px #007374;
-webkit-transform:rotate(360deg);
transform:rotate(360deg);
}

/* クリック後の動作(アニメーション2)*/

.after:hover {
transition-delay:0s;
-webkit-transition-duration:0.5s;
-webkit-transform:rotateY(180deg);
transition-duration:0.5s;
transform:rotateY(180deg);
}

今回はすこし複雑なアニメーションを目指しますのでアニメーションの種類も6つと多めです。またクリックとホバーを同時に動かしたいのでafterにも:hoverをつけておきます。ここまでの流れで【ホバー → アニメーション1 → クリック → アニメーション2】という少し複雑なアニメーションが作成できました。

アニメーションの遅延

もう少し複雑にしてみましょう。前回の記事で扱った【複数同時実行例】のようにHTMLを入れ子、入れ子、入れ子にし、アニメーションの階層ごとに遅延を生じさせます。これで複数のアニメーションが連鎖的に発生しているように見えます。

HTML
<div class="css3-D bx">
<span>
<span>
<span>
<span>
{ HOVER }
</span>
</span>
</span>
</span>
</div>
遅延の記述例

.after:hover > span > span{transition-delay:0s;}
.after:hover > span > span > span{transition-delay:0.1s;}
.after:hover > span > span > span > span{transition-delay:0.2s;}

遅延は上記のように行います。子要素へ向かうほど遅らせています。afterだけでなくホバーの方にも同じ記述で遅延が可能です。ここからCSSが一気に長くなります…

CSS

/* 装飾(アニメーション前)あってもなくてもいいです。*/
.bx{
cursor: pointer;
margin: 100px auto 100px auto;
color: #fff;
font-family: arial;
background: #19283c;
}

.css3-D,.css3-D span{
text-align: center;
}

.css3-D span{
display: inline-block;
height: 200px;
width: 200px;
line-height: 200px;
margin: 0 auto;
border-radius: 100px;
border:0px solid #fff;
-webkit-transition-property:-webkit-transform,height,width,line-height,border-radius,background;
-webkit-transition-duration:0.3s;
transition-property:transform,height,width,line-height,border-radius,background;
transition-duration:0.3s;
}

.css3-D{
background: #19283c;
border-radius: 0px;
width:200px;
height:200px;
line-height: 200px;
-webkit-transition-property:-webkit-transform,background,border-radius,height,width,line-height,box-shadow;
-webkit-transition-duration:0.5s;
-webkit-transition-timing-function:ease;
transition-property:transform,background,border-radius,height,width,line-height,box-shadow;
transition-duration:0.5s;
transition-timing-function:ease;
}

/*ホバー後の動作*/

.css3-D:hover{
background: #007374;
border-radius: 200px;
width:400px;
height:400px;
line-height: 400px;
box-shadow:0 0 40px 0px #007374;
-webkit-transform:rotate(360deg);
transform:rotate(360deg);
}

.css3-D:hover span{background:rgba(25, 40, 60, 0.5);border-radius: 200px;}
.css3-D:hover > span{transition-delay:0.3s; height: 380px; width: 380px; line-height: 380px;}
.css3-D:hover > span > span{transition-delay:0.4s;height: 350px; width: 350px; line-height: 350px;}
.css3-D:hover > span > span > span{transition-delay:0.5s;height: 310px; width: 310px; line-height: 310px;}
.css3-D:hover > span > span > span > span{transition-delay:0.6s;height: 260px; width: 260px; line-height: 260px;}

/*クリック後の動作*/

.after:hover span{-webkit-transition-duration:0.5s;-webkit-transform:rotateY(180deg);transition-duration:0.5s;transform:rotateY(180deg);}
.after:hover > span > span{transition-delay:0s;}
.after:hover > span > span > span{transition-delay:0.1s;}
.after:hover > span > span > span > span{transition-delay:0.2s;}

これで完成です。動作確認はデモで行えますのでご参照ください。
 
以上になります。