[CSS3]animationをつかった様々な動き
授業では、CSS3のアニメーションを3種類使ったページの制作。
①回転するバナー
②入れ替わり表示されるテキスト
③シャドウが変化して光っているように見えるボタン
①回転するバナー
1)2枚の同じサイズの画像をli要素で並べ、position等でピッタリ重ねる
ul#flip li { width: 500px; position: absolute; left: 50%;/*画像が中央にくる*/ margin-left: -250px; }
2)3Dアニメーションを有効にする
ul#flip li{ transform-style: preserve-3d; -webkit-transform-style: preserve-3d; }
3)回転した画像の裏面が見えるかどうかの設定
ul#flip li{ backface-visibility: hidden; -webkit-backface-visibility: hidden; }
4)li要素にアニメーションの動きの指定をする
i#front { animation: flipFront 5s infinite alternate; /*flipFront・flipBackがキーフレーム*/ -webkit-animation: flipFront 5s infinite alternate; } li#back { animation: flipBack 5s infinite alternate; -webkit-animation: flipBack 5s infinite alternate; }
アニメーションプロパティのショートハンド
①keyframeにつけた名前②アニメーションの時間③ループの回数
alternateは、アニメーションの動きを反転させる為の指定。
alternateがない場合:
0% → 50% → 100% → 0% → 50% → 100%
表 裏 (最初に戻る)表 裏
alternateがある場合:
0% → 50% → 100% → 50% → 0% → 50%
表 裏 裏 表 裏
http://kuropanther.html.xdomain.jp/animation/
HTML
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>無題ドキュメント</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="bg"> <ul id="flip"> <li id="front"><img src="img/01.png" alt=""></li> <li id="back"><img src="img/02.png" alt=""></li> </ul> </div><!--/#bg--> <div id="news"> <ul class="anime-ticker"> <li>すっと肌に溶け込み、内側から輝く。</li> <li>使うほどに、潤い肌。</li> <li>ル・セラム それはみずみずしく輝く肌へのパスポート</li> </ul> </div> <p class="btn"><a href="#">ご購入はこちら</a></p> </body> </html>
@charset "UTF-8"; body, html, div, ul, li img, p { margin: 0; padding: 0; } img { border: 0; vertical-align: bottom; } li { list-style: none; } body { background :#333; } #bg { width: 500px; height: 200px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; } ul#flip li { /*2枚目の画像を1枚目にぴったり重ねる*/ width: 500px; position: absolute; left: 50%;/*画像が中央にくる*/ margin-left: -250px; /*アニメーションで回転させる記述*/ transform-style: preserve-3d; /*3Dアニメーションを有効にする*/ -webkit-transform-style: preserve-3d; backface-visibility: hidden; /*回転した画像の裏面が見えるかどうかの設定*/ -webkit-backface-visibility: hidden; } li#front { animation: flipFront 5s infinite alternate; /*flipFront・flipBackがキーフレーム*/ -webkit-animation: flipFront 5s infinite alternate; } li#back { animation: flipBack 5s infinite alternate; -webkit-animation: flipBack 5s infinite alternate; } @-webkit-keyframes flipFront{ 0% { transform: rotateY(0deg); } 45% { transform: rotateY(0deg); } 55% { transform: rotateY(180deg); } 100% { transform: rotateY(180deg); } } @keyframes flipFront{ 0% { transform: rotateY(0deg); } 45% { transform: rotateY(0deg); } 55% { transform: rotateY(180deg); } 100% { transform: rotateY(180deg); } } @-webkit-keyframes flipBack { 0% { transform: rotateY(180deg); } 45%{ transform: rotateY(180deg); } 55%{ transform: rotateY(0deg); } 100%{ transform: rotateY(0deg); } } @keyframes flipBack { 0% { transform: rotateY(180deg); } 45%{ transform: rotateY(180deg); } 55%{ transform: rotateY(0deg); } 100%{ transform: rotateY(0deg); } } #news{ width: 500ps; height: 20px; /*1行目だけ見えるように高さを指定するのがポイント*/ overflow: hidden; /*heightとoverflowはセット*/ margin: 150px auto 0; font-size: 16px; text-align: center; } #news li { background: #333; /*Firefoxで背景が黒くなってしまうので、あえて指定する*/ height: 20px; /*一番上の1行だけを表示し、下を隠す*/ line-height: 20px; /*一番上の1行だけを表示し、下を隠す*/ color: #FFF; padding: 3px; } ul.anime-ticker { animation: ticker 10s infinite; -webkit-animation: ticker 10s infinite; /* アニメーションプロパティのショートハンド ①keyframeにつけた名前②アニメーションの時間③ループの回数*/ } /*Chrome用*/ @-webkit-keyframes ticker { /*1行目*/ 0% { opacity: 0; -webkit-transform: translateY(0);} 9% { opacity: 1; -webkit-transform: translateY(0);} 21% { opacity: 1; -webkit-transform: translateY(0);} 33% { opacity: 0; -webkit-transform: translateY(0);} /*2行目*/ 34% { opacity: 0; -webkit-transform: translateY(-26px);} 43% { opacity: 1; -webkit-transform: translateY(-26px);} 55% { opacity: 1; -webkit-transform: translateY(-26px);} 66% { opacity: 0; -webkit-transform: translateY(-26px);} /*3行目*/ 67% { opacity:0; -webkit-transform: translateY(-52px);} 76% { opacity:1; -webkit-transform: translateY(-52px);} 88% { opacity:1; -webkit-transform: translateY(-52px);} 100% { opacity:0; -webkit-transform: translateY(-52px);} } /*Chrome用*/ @keyframes ticker { /*1行目*/ 0% { opacity: 0; transform: translateY(0);} 9% { opacity: 1; transform: translateY(0);} 22% { opacity: 1; transform: translateY(0);} 33% { opacity: 0; transform: translateY(0);} /*2行目*/ 34% { opacity: 0; transform: translateY(-26px);} 43% { opacity: 1; transform: translateY(-26px);} 56% { opacity: 1; transform: translateY(-26px);} 66% { opacity: 0; transform: translateY(-26px);} /*3行目*/ 67% { opacity:0; transform: translateY(-52px);} 76% { opacity:1; transform: translateY(-52px);} 88% { opacity:1; transform: translateY(-52px);} 100% { opacity:0; transform: translateY(-52px);} } /*firefox用*/ @-moz-keyframes ticker { /*1行目*/ 0% { opacity: 0; -moz-transform: translateY(0);} 9% { opacity: 1; -moz-transform: translateY(0);} 21% { opacity: 1; -moz-transform: translateY(0);} 33% { opacity: 0; -moz-transform: translateY(0);} /*2行目*/ 34% { opacity: 0; -moz-transform: translateY(-26px);} 43% { opacity: 1; -moz-transform: translateY(-26px);} 55% { opacity: 1; -moz-transform: translateY(-26px);} 66% { opacity: 0; -moz-transform: translateY(-26px);} /*3行目*/ 67% { opacity:0; -moz-transform: translateY(-52px);} 76% { opacity:1; -moz-transform: translateY(-52px);} 88% { opacity:1; -moz-transform: translateY(-52px);} 100% { opacity:0; -moz-transform: translateY(-52px);} } p.btn a { display: block; line-height: 60px; width: 180px; text-decoration: none; font-weight: bold; animation: shining 5s infinite; border-radius: 10px; background-color: #da2626; background-image: -webkit-linear-gradient(bottom, #b59a5f, #b7934e 25%, #c1984d 46%, #d6c286 67%, #f6f3c7); background-image: -moz-linear-gradient(bottom, #b59a5f, #b7934e 25%, #c1984d 46%, #d6c286 67%, #f6f3c7); background-image: -o-linear-gradient(bottom, #b59a5f, #b7934e 25%, #c1984d 46%, #d6c286 67%, #f6f3c7); background-image: -ms-linear-gradient(bottom, #b59a5f, #b7934e 25%, #c1984d 46%, #d6c286 67%, #f6f3c7); background-image: linear-gradient(to top, #b59a5f, #b7934e 25%, #c1984d 46%, #d6c286 67%, #f6f3c7); margin-left: 430px; margin-top: 300px; text-align: center; color: #333; box-shadow: 0 0 1px #FFFFFF; } p.btn a:hover { color: #FFF; margin-top: 301px; } @keyframes shining { 0% { box-shadow: 0 0 1px #FFFFFF;} 50% { box-shadow: 0 0 7px #FFFFFF;} 100% { box-shadow: 0 0 1px #FFFFFF;} }