<h1>背景色を変える(再生ループ)</h1>
<style>
@keyframes ani1 {
0% { background: #F00; }
50% { background: #F0F; }
100% { background: #00F; }
}
@-webkit-keyframes ani1 {
0% { background: #F00; }
50% { background: #F0F; }
100% { background: #00F; }
}
#demo_box {
animation:ani1 5s infinite;
-webkit-animation: ani1 5s infinite;
width:100px;
height: 100px;
text-align: center;
line-height: 100px;
color:#FFF;
}
</style>
<div id="demo_box">
demo
</div>
<h1>画像を差し替える(時間差再生ループ)</h1>
<style>
#demo_box2 {
width:100px;
height: 100px;
}
#demo_box2 img{
position: absolute;
height: 100px;
opacity: 0;
}
#demo_box2 .image1{
animation:ani2 5s infinite;
-webkit-animation: ani2 5s infinite;
}
#demo_box2 .image2{
animation:ani2 5s 2.5s infinite;
-webkit-animation: ani2 5s 2.5s infinite;
}
}
@keyframes ani2 {
0% { opacity: 0; }
20% { opacity: 1; }
40% { opacity: 1; }
60% { opacity: 0; }
80% { opacity: 0; }
100% { opacity: 0; }
}
@-webkit-keyframes ani2 {
0% { opacity: 0; }
20% { opacity: 1; }
40% { opacity: 1; }
60% { opacity: 0; }
80% { opacity: 0; }
100% { opacity: 0; }
}
</style>
<div id="demo_box2">
<img class="image1" src="/image/sample/cat/001.jpg">
<img class="image2" src="/image/sample/cat/002.jpg">
</div>
<h1>形を変える(再生→逆再生)</h1>
<style>
@keyframes ani3 {
0% { width:100px; }
100% { width:200px; }
}
@-webkit-keyframes ani3 {
0% { width:100px; }
100% { width:200px; }
}
#demo_box3 {
animation:ani3 3s infinite alternate;
-webkit-animation: ani3 3s infinite alternate;
width:100px;
height: 100px;
text-align: center;
line-height: 100px;
color:#FFF;
background-color:#099;
}
</style>
<div id="demo_box3">
←demo→
</div>
<h1>回転&移動(再生→逆再生)</h1>
<style>
@keyframes ani4 {
0% { transform:rotate(0deg); left:0px;}
100% { transform:rotate(360deg);left:50px; }
}
@-webkit-keyframes ani4 {
0% { transform:rotate(0deg); left:0px;}
100% { transform:rotate(360deg);left:50px; }
}
#demo_box4 {
animation:ani4 5s infinite alternate;
-webkit-animation: ani4 5s infinite alternate;
width:50px;
height: 50px;
position: relative;
text-align: center;
line-height: 50px;
color:#FFF;
background-color:#990;
}
</style>
<div id="demo_box4">
demo
</div>
<h1>グラデーション&回転</h1>
<style>
#demo_box5 {
width:100px;
height: 100px;
color: #FFF;
line-height: 100px;
text-align: center;
}
@keyframes ani5_1 {
0% { transform:rotate(0deg); }
10% { transform:rotate(10deg);}
20% { transform:rotate(0deg); }
30% { transform:rotate(-10deg);}
40% { transform:rotate(0deg); }
100% { transform:rotate(0deg);}
}
@-webkit-keyframes ani5_1 {
0% { transform:rotate(0deg); }
10% { transform:rotate(10deg);}
20% { transform:rotate(0deg); }
30% { transform:rotate(-10deg);}
40% { transform:rotate(0deg); }
100% { transform:rotate(0deg);}
}
@keyframes ani5_2 {
0% { background:linear-gradient(to bottom, #6ab0cf, #6ab0cf, #6ab0cf)}
10% { background:linear-gradient(to bottom, #6ab0cf, #8ad0ef, #6ab0cf)}
20% { background:linear-gradient(to bottom, #6ab0cf, #6ab0cf, #6ab0cf)}
30% { background:linear-gradient(to bottom, #6ab0cf, #8ad0ef, #6ab0cf)}
40% { background:linear-gradient(to bottom, #6ab0cf, #6ab0cf, #6ab0cf)}
100% { background:linear-gradient(to bottom, #6ab0cf, #6ab0cf, #6ab0cf)}
}
@-webkit-keyframes ani5_2 {
0% { background: -webkit-linear-gradient(top, #6ab0cf, #6ab0cf, #6ab0cf)}
10% { background: -webkit-linear-gradient(top, #6ab0cf, #8ad0ef, #6ab0cf)}
20% { background: -webkit-linear-gradient(top, #6ab0cf, #6ab0cf, #6ab0cf)}
30% { background: -webkit-linear-gradient(top, #6ab0cf, #8ad0ef, #6ab0cf)}
40% { background: -webkit-linear-gradient(top, #6ab0cf, #6ab0cf, #6ab0cf)}
100% { background: -webkit-linear-gradient(top, #6ab0cf, #6ab0cf, #6ab0cf)}
}
#demo_box5 span{
animation:ani5_1 2s infinite ;
-webkit-animation: ani5_1 2s infinite ;
}
#demo_box5 {
animation:ani5_2 2s infinite ;
-webkit-animation: ani5_2 2s infinite ;
}
</style>
<div id="demo_box5"><span>demo</span></div>