WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

フェリカテクニカルアカデミー

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>CSS3|アニメーション</title>
<style>
html, body, div, ul, li, p, a {
 margin: 0;
 padding: 0;
 font-size: 100%;
 font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo, 
    sans-serif;
}
body {
 line-height: 1.0;
}
img {
 border: 0;
 vertical-align: bottom;
}
ul {
 list-style: none;
}
a {
  text-decoration: none;
}

/*CSS3アニメーション*/
#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;
}
#front {
  animation: flipFront 5s infinite alternate; /*「alternate」はアニメーションが1回再生したら逆再生になる*/
-webkit-animation:flipFront 5s infinite alternate;
}
#back {
  animation: flipBack 5s infinite alternate; /*「alternate」はアニメーションが1回再生したら逆再生になる*/
 -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);}
}
</style>
</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>


<!--<p class="btn"><a href="#">ご購入はこちら</a></p>-->
</body>
</html>