WEBデザインの勉強

初心者が1からWEBデザインを勉強するブログ。

バナーをCSS3でアニメーション

f:id:mmmmofu:20160925180246j:plain

回転しながらバナーが変わるアニメーションを作成。
他に文字がフェードで切り替わる、
ボタンの背景が光るアニメーションをつける。

デモはこちら

http://efu.sakura.ne.jp/web/banner02/

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="news">
<ul class="anime-ticker">
<li>【母の日】プレゼントオーダー承っています</li>
<li>【送料無料】10,000円以上お買い上げで送料無料</li>
<li>【お祝い】各種イベント用のオーダー承っています</li>
</ul>
</div>

<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>
<p class="btn"><a href="#">ご購入はこちら</a></p>

</body>
</html>
@charset "utf-8";
/* CSS Document */

/* reset */
html,body,div,h1,p,ul,li {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}
ul {
  list-style: none;
}
a {
  text-decoration: none;
}
img {
  border: none;
  vertical-align: bottom;
}
body {
  background-color: #EEE;
}
#news {
  width: 800px;/* liの幅により値は可変 */
  height: 30px;/* 1行分の高さ */
  overflow: hidden;/* 3行あるliを1行だけ表示させるため */
  margin: 100px auto 20px;
  font-size: 24px;
  text-align: center;
}
#news li {
  height: 24px;/* liを1行だけ表示させるため */
  line-height: 24px;/* 3行あるliを1行だけ表示させるため */
  padding: 3px;
  color: #f64d4d;
}
.anime-ticker {
  -webkit-animation: ticker 5s infinite;
  animation: ticker 5s infinite;
  /*キーフレームの名前、アニメの時間、ループの回数*/
}
@-webkit-keyframes ticker {
  /*1行目*/
    0%{ opacity:0; -webkit-transform: translateY(0); }
  10%{ opacity:1; -webkit-transform: translateY(0); }
  20%{ opacity:1; -webkit-transform: translateY(0); }
  33%{ opacity:0; -webkit-transform: translateY(0); }
  /*2行目*/
  34%{ opacity:0; -webkit-transform: translateY(-30px); }
  43%{ opacity:1; -webkit-transform: translateY(-30px); }
  53%{ opacity:1; -webkit-transform: translateY(-30px); }
  65%{ opacity:0; -webkit-transform: translateY(-30px); }
  /*3行目*/
  66%{ opacity:0; -webkit-transform: translateY(-60px); }
  76%{ opacity:1; -webkit-transform: translateY(-60px); }
  86%{ opacity:1; -webkit-transform: translateY(-60px); }
  100%{ opacity:0; -webkit-transform: translateY(-60px); }
}
@keyframes ticker {
  /*1行目*/
  0%{ opacity: 0; transform: translateY(0); }
  10%{ opacity: 1; transform: translateY(0); }
  20%{ opacity: 1; transform: translateY(0); }
  33%{ opacity: 0; transform: translateY(0); }
  /*2行目*/
  34%{ opacity: 0; transform: translateY(-30px); }
  43%{ opacity: 1; transform: translateY(-30px); }
  53%{ opacity: 1; transform: translateY(-30px); }
  65%{ opacity: 0; transform: translateY(-30px); }
  /*3行目*/
  66%{ opacity: 0; transform: translateY(-60px); }
  76%{ opacity: 1; transform: translateY(-60px); }
  86%{ opacity: 1; transform: translateY(-60px); }
  100%{ opacity: 0; transform: translateY(-60px); }
}
#bg {
  width: 500px;
  height: 200px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  }
ul#flip li {
  width: 500px;
  position: absolute;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;/*3Dアニメーションを有効にする*/
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  /*回転した画像の裏側が見えるかどうかの設定*/
}
#front {
  -webkit-animation: flipFront 5s infinite alternate;
  animation: flipFront 5s infinite alternate;
}
#back {
  -webkit-animation: flipBack 5s infinite alternate;
  animation: flipBack 5s infinite alternate;
}
.btn {
  width: 200px;
  margin: 0 auto;
  margin-top:50px;
  border-radius: 10px;
  animation: shining 3s infinite;
}
@keyframes shining {
  0% {box-shadow: 0 0 1px #f77b7b;}
  50% {box-shadow: 0 0 10px #f77b7b;}
  100% {box-shadow: 0 0 1px #f77b7b;}
}
.btn a {
  display: block;
  height: 50px;
  line-height: 50px;
  text-align: center;
  color: #FFF;
  font-weight: bold;
  border-radius: 10px;
  background-color: #54c3c4;
	border: solid 1px #d31a1c;
	background-image: -webkit-linear-gradient(bottom, #ff5b5c, #febbbc);
	background-image: -moz-linear-gradient(bottom, #ff5b5c, #febbbc);
	background-image: -o-linear-gradient(bottom, #ff5b5c, #febbbc);
	background-image: -ms-linear-gradient(bottom, #ff5b5c, #febbbc);
	background-image: linear-gradient(to top, #ff5b5c, #febbbc);
  transition: 1s;
}
.btn a:hover {
  display: block;
  height: 50px;
  line-height: 50px;
  text-align: center;
  color: #FFF;
  font-weight: bold;
  border-radius: 10px;
	background-color: #54c3c4;
  background-image: -webkit-linear-gradient(bottom, #febbbc, #ff5b5c);
  background-image: -moz-linear-gradient(bottom, #febbbc, #ff5b5c);
  background-image: -o-linear-gradient(bottom, #febbbc, #ff5b5c);
  background-image: -ms-linear-gradient(bottom, #febbbc, #ff5b5c);
  background-image: linear-gradient(to top, #febbbc, #ff5b5c);
}
@-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);}
}