<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;
}
#bg {
width: 500px;
height: 200px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
ul#flip li {
width: 500px;
position: absolute;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
#front {
animation: flipFront 5s infinite alternate;
-webkit-animation:flipFront 5s infinite alternate;
}
#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);}
}
</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>
</body>
</html>