［CSS3］animationをつかった様々な動き - くろひょうのwebデザインのお勉強帳

授業では、CSS3のアニメーションを3種類使ったページの制作。

①回転するバナー
②入れ替わり表示されるテキスト
③シャドウが変化して光っているように見えるボタン

①回転するバナー

１）２枚の同じサイズの画像をli要素で並べ、position等でピッタリ重ねる

ul#flip li {
  width: 500px;
  position: absolute;
  left: 50%;/*画像が中央にくる*/
  margin-left: -250px;
}

２）３Dアニメーションを有効にする

ul#flip li{
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
}

３）回転した画像の裏面が見えるかどうかの設定

ul#flip li{
  backface-visibility: hidden; 
  -webkit-backface-visibility: hidden;
}

４）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>

CSS

@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; /*３Dアニメーションを有効にする*/
  -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;}
}