今回はコピペで簡単に実装できるcssアニメーションをまとめました。
僕もよく利用するアニメーションなので是非使ってください♪

念のために基礎知識

今回は簡単なcssアニメーションということで、transitionとanimationを使用します。

transition-property:all;
transition-duration:1s;
transition-timing-function:liner;
transition-delay:0;

4つのプロパティをまとめて、
transition : all 1s liner 0;
とすることもできます。

animationにも

animation-name: namae;
animation-duration: 5s;
animation-timing-function: ease;
animation-iteration-count: infinite;

とプロパティがあり、
animatin: namae 5s ease infinite;
とすることもできます。

それでは早速コピペで使えるcssアニメーションをご紹介します。

マウスオーバーで横移動アニメーション

 

transition:3s linear;
の「3s」がアニメーション完了までにかかる時間、linearは変化の仕方です。

linearの他に
ease:開始と完了が滑らかになる
ease-in:ゆっくりアニメーションが始まる
ease-out:ゆっくりアニメーションが終わる
ease-in-out:ゆっくりアニメーションが始まり、ゆっくり終わる
があります。
ちなみにlinearは一定でアニメーションが進みます。

マウスオーバーで回転アニメーション

 

横移動、回転のcssの違いは、ご覧のとおり、hover時のcss内容だけですね。
発想次第ではこれだけでも色々できそうです。

マウスオーバーではなく、「もっとがっつり動かしたいんだ！常に動いて欲しいんだ！」っていう人のために、
続けてanimationプロパティを利用したコピペアニメーションをご紹介します。

ずっと回転

DEMO

 

ぐるぐるぐるぐる

DEMO

 

発想次第でなんでもできるcssアニメーション。コーディングも楽しいですね！
Memorynator独自のcssアニメーションをこれからどんどん追加していこうと思いますので、定期的にチェックしてね♪