creatersnest

CSSでアニメーションを作るためのプロパティ6つ


cssのanimationプロパティでは
6つのプロパティ値を組み合わせて指定することができます。
今回はその6つのプロパティを
下のサンプルコードに合わせて解説していきます!

サンプル

こちらのサンプルコードは要素の背景を黒から
白に変化するアニメーションを記載しています。

animation-name

サンプル

要素にキーフレームアニメーションを適用する場合のアニメーション名を指定します。

animation-nameプロパティでアニメーション名を指定すると、
@keyframesルールで定義したキーフレームが選択されます。
それによってどのようなアニメーション効果を与えるかが関連付けされます。

 

animation-duration

サンプル

アニメーション1回分の時間の長さを指定します。
負の値を指定すると0として認識されるので注意です!

 

animation-delay

サンプル

アニメーションをいつ開始するかを指定します。
プロパティ値には開始を遅らせる時間を指定する必要があり、
0を指定するとすぐにアニメーションが開始されます。

 

animation-timing-function

スクリーンショット 2015-07-09 21.46.31

アニメーションのタイミング・進行具合を指定します。
アニメーションが継続している間に進行具合の割合を変更し、
調整することで動きを滑らかにすることができます。

animation-iteration-count

サンプル

アニメーションを何回繰り返すかを指定します。
こちらも負の値を指定すると0として認識されるので注意です!

 

 

animation-direction

サンプル

アニメーションの実行方向を指定します。

その他こちらの値を指定することも可能です。
reverse:逆順で実行
alternate-reverse:繰り返し回数が奇数の場合は逆順、偶数の場合は標準で実行

 

 

まとめ

如何だったでしょうか?
gifアニメーションを使用しなくても簡単に
アニメーションが作成できてしまうので、
プロパティをしっかり覚えてどんどん活用していきましょう!

参考サイト:http://www.htmq.com/css3/index.shtml

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


Next Articleスクロールするのが楽しくなるパララックスサイト20選