CSSのアニメーションとtransitionについて
アニメーションと聞くとプログラミングが必要でJavaScriptを習得しなければならないと思うかもしれないが、簡単にCSSだけで何かを動かす事は可能だ。もちろんJavaScriptの知識があれば組み合わせてもっと色々な事ができるが、CSSだけでも多くのアニメーションができるし、アイディア次第では閲覧者を驚かせるようなものも作れるかもしれない。
CSSアニメーションの例
@keyframes 名前 { ... }
まずアニメーションする動作を@keyframesに記述する。この際に任意の名前を付けてそれをCSSで参照するとアニメーションされる。
例を見てみよう。
<style>
#style1 {
width: 100px;
height: 100px;
background: skyblue;
animation-name: slideIn;
animation-duration: 5s;
animation-iteration-count: infinite;
}
@keyframes slideIn {
0% {
left: 0;
}
100% {
left: calc(100% - 100px );
}
}
</style>
<body>
<div id="style1"></div>
</body>
@keyframesでアニメーションの内容を記す。0%が配置にleftが0で100%になると端に行くようにしている。left: 100%を指定するとはみ出してしまうので、前のページで解説したcalcでボックスの横幅である100pxを引いている。calc()を使っている理由はブラウザの幅がどんなサイズでも対応できるようにする為だ。
CSSアニメーションのプロパティ
| プロパティ | 値 | 説明 |
|---|---|---|
| animation-name | 名前 | @keyframesで付けた名前を指定する。アニメーションする内容を参照している |
| animation-duration | 秒数 | アニメーションが完了するまでの秒数を指定する。5sと書いたら5秒で完了する |
| animation-delay | 秒数 | アニメーションが開始されるまでの遅延時間を指定する。5sと書いたら5秒後に再生される |
| animation-timing-function | linear | アニメーションが一定の速度で進む |
| animation-timing-function | ease | デフォルトがこれ。遅く開始し、徐々に速度を上げ、終わりに近づくと速度を落とす |
| animation-timing-function | ease-in | アニメーションが遅く開始し、徐々に速度を上げ、終了時にはすぐに停止する |
| animation-timing-function | ease-out | アニメーションが即始まり、速度を上げ、時間とともに減速して終了する |
| animation-timing-function | ease-in-out | アニメーションが開始時と終了時に遅く、中間で速くなる。開始と終了がスムーズ |
| animation-iteration-count | 数字 または infinite |
アニメーションが何回繰り返されるかを指定する。infiniteにすると無限に繰り返す |
| animation-direction | reverse | 逆再生にする |
| animation-direction | alternate | 往復再生にする |
| animation-direction | alternate-reverse | 逆からの往復再生にする |
| animation-fill-mode | forwards | 終了した状態で停止 |
| animation-fill-mode | backwards | 開始する状態を即適用 |
| animation-play-state | running | 再生 |
| animation-play-state | paused | 一時停止 |
CSSアニメーションの実用例
下記のコードは自由に使って良いぞ！
<style>
#ball1,
#ball2,
#ball3,
#ball4 {
width: 50px;
height: 50px;
border-radius: 50%;
position: absolute;
top: calc(50% - 25px);
left: calc(50% - 25px);
display: inline-block;
animation: linear circleAnime 3.0s infinite;
}
#ball1 {
background:rgba(13, 128, 252, 0.5);
transform-origin: 25px 87.5px 0;
}
#ball2 {
background:rgba(64, 244, 55, .5);
transform-origin: 87.5px 25px 0;
}
#ball3 {
background:rgba(254, 24, 55, .5);
transform-origin: -37.5px 25px 0;
}
#ball4 {
background:rgba(241, 227, 26, 0.5);
transform-origin: 25px -37.5px 0;
}
@keyframes circleAnime{
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
</style>
<body>
<div id="bg1">
<div id="ball1"></div>
<div id="ball2"></div>
<div id="ball3"></div>
<div id="ball4"></div>
</div>
</body>