コピペで使えるアニメーションcss集
スポンサードリンク
今回はコピペで簡単に実装できる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アニメーションをご紹介します。
マウスオーバーで横移動アニメーション
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<div class="transition"> <div class="css-animation-1">hover</div> </div> /*css*/ .transition{ width:100%; padding:10px 20px; } .css-animation-1{ width:120px; color:#fff; background:#258; border-radius:5px; text-align:center; padding:20px 10px; margin:10px 0 10px 0; } .css-animation-1:hover{ margin:10px 0px 10px 250px; } .css-animation-1{ -moz-transition:3s linear; -webkit-transition:3s linear; -o-transition:3s linear; -ms-transition:3s linear; } |
transition:3s linear;
の「3s」がアニメーション完了までにかかる時間、linearは変化の仕方です。
linearの他に
ease:開始と完了が滑らかになる
ease-in:ゆっくりアニメーションが始まる
ease-out:ゆっくりアニメーションが終わる
ease-in-out:ゆっくりアニメーションが始まり、ゆっくり終わる
があります。
ちなみにlinearは一定でアニメーションが進みます。
マウスオーバーで回転アニメーション
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<div class="transition"> <div class="css-animation-2">DEMO</div> </div> /*css*/ .transition{ width:100%; padding:10px 20px; } .css-animation-2{ width:120px; color:#fff; background:#258; border-radius:5px; text-align:center; padding:20px 10px; margin:10px 0 10px 0; } .css-animation-2:hover{ transform:rotate(360deg) } .css-animation-2{ -moz-transition:3s linear; -webkit-transition:3s linear; -o-transition:3s linear; -ms-transition:3s linear; } |
横移動、回転のcssの違いは、ご覧のとおり、hover時のcss内容だけですね。
発想次第ではこれだけでも色々できそうです。
マウスオーバーではなく、「もっとがっつり動かしたいんだ！常に動いて欲しいんだ！」っていう人のために、
続けてanimationプロパティを利用したコピペアニメーションをご紹介します。
ずっと回転
DEMO
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
/*html*/ <div class="animation-sample-1"> <img src="img/gear.png"> </div> /*css*/ .animation-sample-1{ width: 70px; padding: 10px; animation: kaiten 5s linear infinite; -webkit-animation: kaiten 5s linear infinite; -moz-animation: kaiten 5s linear infinite; } @-webkit-keyframes kaiten { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } |
ぐるぐるぐるぐる
DEMO
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<div class="animation-sample-2"><img src="https://memorynator.com/wp-content/uploads/2016/04/gear.png" alt="" /></div> <pre class="EnlighterJSRAW" data-enlighter-language="null">/*html*/ <div class="animation-sample-2"> <img src="https://memorynator.com/wp-content/uploads/2016/04/gear.png"> </div> /*css*/ .animation-sample-2{ width: 70px; padding: 10px; animation: guruguru 5s linear infinite; -webkit-animation: guruguru 5s linear infinite; -moz-animation: guruguru 5s linear infinite; } @-webkit-keyframes guruguru { 0% { -webkit-transform: translate(-50px,0px) rotate(0deg); } 100% { -webkit-transform: translate(800px,0) rotate(720deg); } } |
発想次第でなんでもできるcssアニメーション。コーディングも楽しいですね！
Memorynator独自のcssアニメーションをこれからどんどん追加していこうと思いますので、定期的にチェックしてね♪
公開日：
最終更新日：2018/04/05