こんにちは。
すみません。 しばらく更新してませんでした。。
久しぶりにHTML・CSSをいじりました。笑 CSSでは簡単にアニメーションを書くことができるようです。 ということで、今回は「animation」についてです。
CSSのAnimation(アニメーション)は思ったよりも簡単で要素にanimation-nameを指定して、@keyframeで動きを指定できます。 では、早速コード書いてみましょう。
動かしたいクラスにanimation-nameを指定します。
div.prefix_sample{ animation-name: 'anime1'; animation-duration: 5s; animation-timing-function: ease; animation-iteration-count: infinite; }
animation-durationは動く速さです。 秒単位で指定できます。 animation-timing-functionは動く時の動き方です。 iteration-countは何回動かすか。 infiniteで永遠に繰り返されます。
そして、@keyframeで挙動を指定します。
@keyframes 'anime1' { 0% { width: 100px; height: 50px; top:30%; background-color: aqua; } 50% { width: 100px; height: 50px; top:20%; background-color: blue; } 100% { width: 100px; height: 50px; top:30%; background-color: aqua; } }
0%の時のスタイルと100%の時のスタイルを指定すれば、0%から100%までスムーズに動きます。 途中に50%などで指定することで、そのスタイルも経由させることができます。
テストコード全文を以下に記します。 一部の環境で正しく動かないことがあるので、ベンダープレフィックスがついています。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <title>CSS Anime-てすと</title> <style> div.prefix_sample { position:fixed; top:30%; left:50%; text-align:center; color:#FFF; -moz-animation-name: 'anime1'; -moz-animation-duration: 5s; -moz-animation-timing-function: ease; -moz-animation-iteration-count: infinite; -webkit-animation-name: 'anime1'; -webkit-animation-duration: 5s; -webkit-animation-timing-function: ease; -webkit-animation-iteration-count: infinite; -o-animation-name: 'anime1'; -o-animation-duration: 5s; -o-animation-timing-function: ease; -o-animation-iteration-count: infinite; -ms-animation-name: 'anime1'; -ms-animation-duration: 5s; -ms-animation-timing-function: ease; -ms-animation-iteration-count: infinite; } @-moz-keyframes 'anime1'{ 0% {width: 100px; height: 50px; top:30%; background-color: aqua;} 50% {width: 100px; height: 50px; top:20%; background-color: blue;} 100% {width: 100px; height: 50px; top:30%; background-color: aqua;} } @-webkit-keyframes 'anime1' { 0% {width: 100px; height: 50px; top:30%; background-color: aqua;} 50% {width: 100px; height: 50px; top:20%; background-color: blue;} 100% {width: 100px; height: 50px; top:30%; background-color: aqua;} } @-o-keyframes 'anime1' { 0% {width: 100px; height: 50px; top:30%; background-color: aqua;} 50% {width: 100px; height: 50px; top:20%; background-color: blue;} 100% {width: 100px; height: 50px; top:30%; background-color: aqua;} } @-ms-keyframes 'anime1' { 0% {width: 100px; height: 50px; top:30%; background-color: aqua;} 50% {width: 100px; height: 50px; top:20%; background-color: blue;} 100% {width: 100px; height: 50px; top:30%; background-color: aqua;} } </style> </head> <body> <div class="prefix_sample">Kani-momonga</div> </body> </html>
コメント 0
トラックバック 0
上に表示された文字を入力してください。
cakePHP入門(2) – コントローラー
ちょこっとだけ紹介です
カニモモンガの技術めも 横浜市在住の薬学生Developer. 第100回薬剤師国家試験合格。 卒業してCEOになったよ。 毎日エンジョイしてる。 最近はもっぱらサーバー周りのこととかPHPとか。
return top
コメント 0