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(12/10)
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 |
<style> p{ margin:0; line-height: 1.0; } .ticker1{ background:#000; padding: 5px 10px; 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> </head> <body> <div class="ticker1"> <p>10月01日新商品発売イベント開催予定！</p> </div> |
演習2
右から透明テキストが徐々に表示しながら流れてきて、一定時間止まり、さらに透明になりながら左側に移動して行くアニメーション。テキストは下記の３種類が順番に入れ替わる。
animation-duration:10s
使用テキスト
CSS3のtransformプロパティで要素に2D変形を適用する事が出来ます。
「positionプロパティ」で指定した場合はCPUが処理を行います。
「transformプロパティ」で指定した場合はGPUが処理を行います。
html&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 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 |
<style> *{ margin: 0; padding: 0; } body{ line-height: 1.0; font-family:sans-serif; } ul{ list-style: none; } .ticker2 { height: 30px; width: fit-content; padding: 0 10px; margin: 10px auto; text-align: center; background:#000; overflow:hidden; } .ticker2 li { line-height: 30px; color: #ff0; font-size: 20px; font-weight: bold; } .ticker2 ul { /* background:#aaf; */ animation: ticker2 10s infinite; } @keyframes ticker2 { 0% {opacity:0;translate:100% 0;} 10%{opacity:1;translate:0 0;} 20%{opacity:1;translate:0 0;} 33%{opacity:0;translate:-100% 0;} 34%{opacity:0;translate:100% -30px;} 44%{opacity:1;translate:0 -30px;} 54%{opacity:1;translate:0 -30px;} 66%{opacity:0;translate:-100% -30px;} 67%{opacity:0;translate:100% -60px;} 77%{opacity:1;translate:0 -60px;} 87%{opacity:1;translate:0 -60px;} 100%{opacity:0;translate:-100% -60px;} } </style> </head> <body> <div class="ticker2"> <ul> <li>CSS3のtransformプロパティで要素に2D変形を適用する事が出来ます。</li> <li>「positionプロパティ」で指定した場合はCPUが処理を行います。</li> <li>「transformプロパティ」で指定した場合はGPUが処理を行います。</li> </ul> </div> |
演習3
12秒で3枚の画像がfade-in/fade-outで入れ替わる
html
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 |
<style> .sliderBox{ height:500px; margin-bottom: 50px; overflow: hidden; } .sliderBox ul{ animation: slide 12s infinite; } .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; } @keyframes slide{ 0% {opacity:0;translate:0 0; } 5%,28%{opacity:1;translate:0 0; } 33%{opacity:0;translate:0 0; } 34%{opacity:0;translate:0 -500px;} 39%,61%{opacity:1;translate:0 -500px;} 66%{opacity:0;translate:0 -500px;} 67%{opacity:0;translate:0 -1000px;} 72%,95%{opacity:1;translate:0 -1000px;} 100%{opacity:0;translate:0 -1000px;} } </style> <div class="sliderBox"> <ul> <li>Explore the World!</li> <li>Vist the Wrold Cities!</li> <li>Enjou your Life!</li> </ul> </div> |
演習4：横スライダー
使用html
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 |
<style> .sliderBox{ height:500px; display: flex; } .sliderBox li { width: 100vw; line-height:500px; text-align: center; color: #fff; font-size: 5em; letter-spacing: 5px; font-family: 'Great Vibes', cursive; } .slider1 { animation: slide1 12s infinite; } .slider2{ display: flex; animation: slide2 12s infinite; } @keyframes slide1{ 0%,28%{opacity:1;translate:0 0;} 33%{opacity:1;translate:-100% 0;} 34%{opacity:1;translate:-100% 0;} 39%{opacity:0;translate:-100% 0;} 61%,66%{opacity:0;translate:100% 0;} 67%,72%,95%{opacity:1;translate:100% 0;} 100%{opacity:1;translate:0 0;} } @keyframes slide2{ 0%,5%,28%{translate:0 0;} 33%{translate:-50% 0;} 34%,39%,61%{translate:-50% 0;} 66%{translate:-100% 0;} 67%,72%,95%{translate:-100% 0;} 100%{translate:-150% 0;} } </style> <div class="sliderBox"> <ul class="slider1"> <li>Explore the World!</li> </ul> <ul class="slider2"> <li>Vist the Wrold Cities!</li> <li>Enjou your Life!</li> </ul> </div> |