【CSS】#2 animationとkeyframesが便利すぎた
見出し。
前置き。
こんにちは。今回はCSSの話なんですけど、前回は「CSSだけでも意外と動かせるよー」とか言って、transitionとか疑似要素を紹介しました。
今回はその続きなんですけど、なんと進行率を指定して逐次動きを決めれたりします。ポヨンっていう感じとかもつくれちゃいます。やばいね。
本文。
まずは、プロパティを紹介していきます。
transform
これは、サイズを変更したり回転したりできるプロパティになります。以下に具体的に示します。使用する場合はtransitionと併用した方が良さげです(一瞬で変わってしまうため)。
| プロパティ名(使用例) | 機能 |
|---|---|
| scale(X軸の大きさ,Y軸の大きさ) (transform: scale(1.2)) |
要素の大きさを変更します。 第二引数を書かない場合は、 第一引数の値と同様になります (例の場合はX,Yの両方とも1.2倍)。 |
| rotate(角度) (transform: rotate(360deg)) |
引数で指定した角度まで回転します。 |
| translate(X軸方向,Y軸方向) transform: translate(50px) |
要素の位置を変更します。 第二引数を書かない場合は、 第一引数の値と同様になります (例の場合はX,Yの両方とも50px)。 |
他にも、行列(matrix)や、傾斜(skew)、遠近効果(perspective)というものがありました。今回は割愛します。役割としては、変形などが出来るみたい。
animationとkeyframes
こちらは、animationで「どうアニメーションするか」を決め、keyframesで、現在の進行度に応じて「何をするか」を決めることが出来ます。
まずは書式から示します。
/*書式*/
.test_class{
animation: アニメーションの名前 秒数 遷移方法;
}
@keyframes アニメーションの名前{
0%{
命令;
}
100%{
命令;
}
}
/* 例 */
.class{
animation: anim .5s ease;
}
@keyframes anim{
0%{ transform: scale(1); }
50%{ transform: scale(1.2) }
100%{ transform: scale(1.1); }
}
こんな感じです。以下に、animationの遷移方法の一部を示します(animation-timing-function プロパティというらしいです)。
| プロパティ名 | 機能 |
|---|---|
| ease | 中間が一番早いです。 |
| ease-in | 徐々に早くなります。 |
| ease-out | 徐々に遅くなります。 |
| liner | 一定間隔で移動します。 |
では、実際に使ってみます!!
使ってみる。
その前に、疑似要素って何??って方は、前回の記事をご覧ください。
以下のように記述してみます。
<!DOCTYPE html>
<html>
<head>
<meta lang="ja">
<meta charset="utf-8">
<style>
.box{
background-color: blue;
width: 100px;
height: 100px;
}
.box:hover{
animation: anim .5s ease;
}
@keyframes anim{
0%{ transform: scale(1); }
50%{ transform: scale(2); }
100%{ transform: scale(1.5); }
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
動作としては、以下の通り。マウスを四角の上にしてやると動作します。
これだけでポヨンっていう感じにできそうです。ですが、これだけだとscaleが維持されませんね。
ですが、これ、なんとtransitionと被せても動作します。恐ろしい。
<!DOCTYPE html>
<html>
<head>
<meta lang="ja">
<meta charset="utf-8">
<style>
.box{
background-color: red;
width: 100px;
height: 100px;
transition: .5s;
}
.box:hover{
transform: scale(2);
animation: anim .7s ease;
}
@keyframes anim{
0%{ transform: scale(1); }
60%{ transform: scale(2); }
70%{ transform: scale(1.7); }
80%{ transform: scale(2.2); }
90%{ transform: scale(1.9); }
100%{ transform: scale(2); }
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
これでマウスオーバーしている最中はscaleが維持されます。また、マウスを外にやった時のアニメーションも付いています。強い。
他にもopacityというものがあって、透明度を変更できるようです。1が不透明、0が透明。使ってみます。
<!DOCTYPE html>
<html>
<head>
<meta lang="ja">
<meta charset="utf-8">
<style>
body{
margin: 0;
}
.box{
background-color: green;
width: 100px;
height: 100px;
transition: .5s;
}
.box:hover{
opacity: 0;
width: 100vw;
height: 100vh;
animation: anim 1s ease;
}
@keyframes anim{
0%{ opacity: 1; }
50%{ opacity: 1; }
100%{ opacity: 0; }
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
はてなブログ内では全然できていませんけど、簡易的なシーンチェンジに使えるのではないでしょうか?...無理そう?
おまけ程度に、translateとrotateを使用した例を示します。
<!DOCTYPE html>
<html>
<head>
<meta lang="ja">
<meta charset="utf-8">
<style>
.box_translate{
background-color: pink;
width: 100px;
height: 100px;
transition: .5s;
}
.box_translate:hover{
transform: translate(25px);
animation: anim_t 1s ease;
}
@keyframes anim_t{
0%{ transform: translate(0px); }
70%{ transform: translate(50px); }
100%{ transform: translate(25px); }
}
.box_rotate{
background-color: gray;
width: 100px;
height: 100px;
transition: .5s;
}
.box_rotate:hover{
transform: rotate(-90deg);
animation: anim_r 1s ease;
}
@keyframes anim_r{
0%{ transform: rotate(0deg); }
80%{ transform: rotate(90deg); }
100%{ transform: rotate(-90deg); }
}
</style>
</head>
<body>
<div class="box_translate"></div>
<div class="box_rotate"></div>
</body>
</html>
まとめ。
transformを使えば移動やサイズの変更、keyframesを使えば複雑なアニメーションを使えるようです。
これとJavaScriptを用いれば、表現の幅がかなり広がりそうですね!!今度やってみます。
