🗂
CSSアニメーションことはじめ
CSSでアニメーションをしたい
JavaScriptで色々計算して、アニメーションさせるの、ちょっと面倒くさいですよね。
でも、CSSでアニメーションが書けるんですよ。
例えば、赤い四角をFadeInしたい
最初は透明なんだけど、だんだん赤くなっていく矩形を表現したいとしましょう。
その時は、animation-duration
で時間を指定し、animation-name
でアニメーションの名前を指定します。
アニメーションの名前? @keyframes
でどのくらいの時に、どの値になっているか、を表現したいときに使います。
<div id="base"></div>
#base {
width: 500px;
height: 300px;
background-color: #ff0000;
animation-duration: 3s;
animation-name: fadein;
}
@keyframes fadein {
0% {
opacity: 0.0;
}
100% {
opacity: 1.0;
}
}
そう、これだけ、0秒の時は、赤色が透明ですが、徐々に赤くなって3秒後には真っ赤な四角になっていることでしょう。
下記に例を置いておきます。
ちょっと移動させてみよう
transform
を使えば、動かすことができますね。
ちょっとやってみましょう。
translate
を使って横に動かしてみます。
<div id="base"></div>
#base {
width: 500px;
height: 300px;
background-color: #ff0000;
animation-duration: 1s;
animation-name: move;
animation-fill-mode: forwards;
}
@keyframes move {
0% {
transform: translateX(0px);
}
100% {
transform: translateX(300px);
}
}
簡単ですよね?
下記に置いておきます。
rotateで回転とかもできますよー。
ちょっとさわりだけ書いてみました。
皆さんもCSSでアニメーションをチャレンジしてみてください。
Discussion