keyframe animation
キーフレームアニメーションとは？
時間軸の流れを段階的に指定する事が出来るCSS３のアニメーション
animation関連プロパティ
animation ……
アニメーションについてまとめて指定する
animation-name ……
@keyframes で定義した名前を指定します。(必須)
animation-duration ……
アニメーション一回分の時間の長さを指定する(必須)
animation-timing-function ……
アニメーションのタイミング・進行割合を指定する(初期値：ease、一定割合 : linear)
animation-iteration-count ……
アニメーションの繰り返し回数を指定する(初期値：1、繰り返し : infinite）
animation-delay……
アニメーションの開始の遅れを指定する
animation-direction …… アニメーションを交互に反転再生させるかどうかを指定する(normal/alternate)
animation-play-state …… 再生中か一時停止かを指定する(running/paused)
@keyframes animation-name {
○○% { css記述 }
○○% { css記述 }
○○% { css記述 }
}
サンプルコード（背景色が変化するアニメーション）
演習1
右から透明テキストが徐々に表示しながら流れてきて、一定時間静止するアニメーション
animation-duration:5s
使用テキスト
10月01日新商品発売イベント開催予定！
html&css(09/12)
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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
<style> *{ margin: 0; padding: 0; } body{ line-height: 1; } ul{ list-style: none; } .ticker1{ padding: 5px 10px; background:#000; width: fit-content; margin: 30px auto; overflow: hidden; } .ticker1 p{ font-size: 30px; font-weight: bold; color:#ff0; animation: ticker1 5s infinite; } @keyframes ticker1 { 0%{ translate:100% 0; opacity:0; } 50%{ translate:0 0; opacity:1; } /* 100%{ translate:0 0; opacity:1; } */ } </style> <body> <div class="ticker1"> <p>10月01日新商品発売イベント開催予定！</p> </div> </body> |
演習2
右から透明テキストが徐々に表示しながら流れてきて、一定時間止まり、さらに透明になりながら左側に移動して行くアニメーション。テキストは下記の３種類が順番に入れ替わる。
animation-duration:10s
使用html
|
|
<div class="ticker2"> <ul> <li>CSS3のtransformプロパティで要素に2D変形を適用する事が出来ます。</li> <li>「positionプロパティ」で指定した場合はCPUが処理を行います。</li> <li>「transformプロパティ」で指定した場合はGPUが処理を行います。</li> </ul> </div> |
css(09/12)
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 32 33 34 35 36 37 38 39 40 41 42 43 44 |
*{ margin: 0; padding: 0; } body{ line-height: 1.0; font-family:sans-serif; } ul{ list-style: none; } .ticker2 { width: fit-content; padding-inline: 10px; margin: 30px auto; text-align: center; background:#000; overflow:hidden; height: 30px; } .ticker2 li { line-height: 30px; color: #ff0; font-size: 20px; font-weight: bold; } .ticker2 ul{ animation: ticker2 10s infinite; } @keyframes ticker2 { 00%{opacity:0;translate:100% 0;} 10%,20%{opacity:1;translate:0 0;} 33%{opacity:0;translate:-100% 0;} 34%{opacity:0;translate:100% -30px;} 44%,54%{opacity:1;translate:0 -30px;} 66%{opacity:0;translate:-100% -30px;} 67%{opacity:0;translate:100% -60px;} 77%,87%{opacity:1;translate:0 -60px;} 100%{opacity:0;translate:-100% -60px;} } |
演習3
12秒で3枚の画像がfade-in/fade-outで入れ替わる
使用html
|
|
<div class="sliderBox"> <ul> <li>Explore the World!</li> <li>Vist the Wrold Cities!</li> <li>Enjou your Life!</li> </ul> </div> |
css(09/12)
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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
/* Reset */ *{ margin: 0; padding: 0; } body{ line-height:1.0; font-family: sans-serif; } ul { list-style: none; } img{ max-width: 100%; } a{ text-decoration: none; color: inherit; display: block; } /* CSS Fade-in-out Slider */ .sliderBox{ height:500px; overflow: hidden; } .sliderBox li { line-height:500px; text-align: center; color:#fff; font-size: 5em; letter-spacing: 5px; font-family: 'Great Vibes', cursive; text-shadow: 2px 2px 3px #000; } .sliderBox li:nth-child(1){ background: url(img/sacre.jpg) no-repeat center/cover; } .sliderBox li:nth-child(2){ background: url(img/luvre.jpg) no-repeat center/cover; } .sliderBox li:nth-child(3){ background: url(img/hotel.jpg) no-repeat center top/cover; } .sliderBox ul{ animation: slide 12s infinite; } @keyframes slide{ 00%,33%{opacity:0;translate:0 0;} 05%,28%{opacity:1;translate:0 0;} 34%,66%{opacity:0;translate:0 -500px;} 39%,61%{opacity:1;translate:0 -500px;} 67%,100%{opacity:0;translate:0 -1000px;} 72%,95%{opacity:1;translate:0 -1000px;} } |
演習4
追加text
貴方の旅のパートナー(疑似要素)
Tokyo Travel Agency
ホーム
ツアー案内
ホテル情報
お問い合わせ
弊社について
Copyright コピーライトマーク 2022 All rights reserved.
