どうも、ソエです。

今回は、CSSアニメーションで使うkeyframesをまとめてみました。
と言っても、基本の書き方くらいでそんなこだわった書き方はしてないかと思います。

では、どうぞ!

基本の書き方

まずはkeyframesを使うにあたっての、基本の書き方から。
keyframesを指定する場合、まずはkeyframesを使用したい要素にanimation-nameやanimation-durationなど、動かせるためのプロパティたちを要素に書き入れます。
今回の例では、div要素を動かしたいのでdivに書いていきます。

div{
animation-name: anime1;
animation-duration: 3s;
animation-timing-function: ease;
}
@keyframes anime1 {
}

keyframesの方に、先ほどdivに着けたanimation-nameを指定。
@keyframesの後の、anime1でこの@keyframesはanime1という名前が付きました。
これによって、先ほどのdivに反映されます。
ちなみに、このanimation-name(anime1)は変えることが可能です。

さて、これでdivはkeyframesを使えることになりました。
お次はkeyframesの中身を追加して、どう動かすか決めていきます。

始まりと終わりだけの場合

最初と最後だけしか動きを付けないよ、というのであればfromとtoを使いましょう。
最初表示されるのがfromで、アニメーションで変わった後がtoとなります。

@keyframes anime1{
from { margin-top: 50px; }
to { margin-top: 100px; }
}

途中も変化させたい場合

最後は横に伸ばしてるけど、途中だけ文字を入れたい、などだったらこちら。

@keyframes anime1{
0% { opacity: 0; }
50% { opacity: 1; }
100% { opacity: 0; }
}

~%で指定すれば、途中にも変化を付けれます。
ちなみに、0%と100%だけならfromとtoと同じです。
多分、こっちの方が使い勝手はよいと思います。

終わりに

どうでしたか?
このkeyframesを使えば、CSSアニメーションは簡単に書けるはず!
ローディングなど、簡単なものから作ってサイトの細部までこだわってみて下さい!

では、ご閲覧ありがとうございました!

ご閲覧ありがとうございました!

プロフィール

ソエ

愛知県産のインドア。趣味はゲームとアニメ鑑賞。高校三年生にWebに興味を持ち専門学校へ入学。写真は愛犬です。

検索

ホーム/ CSS/

keyframesをまとめてみた