<div id="animation">
<ul>
<li class="one">This is</li>
<li class="two">CSS3 looped</li>
<li class="tree">animation</li>
<li class="four">animation</li>
</ul>
</div>
css
#animation{
width: 200px;
height: 60px;
}
.one, .two, .tree, .four{
position: absolute;
width: 200px;
height: 60px;
}
.one{
background-color: red;
opacity: 0;
-webkit-animation: one 12s ease-in alternate infinite;
}
.two{
background-color: green;
opacity: 0;
-webkit-animation: two 12s ease-in alternate infinite;
}
.tree{
background-color: gray;
opacity: 0;
-webkit-animation: tree 12s ease-in alternate infinite;
}
.four{
background-color: purple;
opacity: 0;
-webkit-animation: four 12s ease-in alternate infinite;
}
@-webkit-keyframes one {
0% { opacity: 1; }
33% { opacity: 0; }
66% { opacity: 0; }
99% { opacity: 0; }
100% { opacity: 0; }
}
@-webkit-keyframes two {
0% { opacity: 0; }
33% { opacity: 1; }
66% { opacity: 0; }
99% { opacity: 0; }
100% { opacity: 0; }
}
@-webkit-keyframes tree {
0% { opacity: 0; }
33% { opacity: 0; }
66% { opacity: 1; }
99% { opacity: 0; }
100% { opacity: 0; }
}
@-webkit-keyframes four {
0% { opacity: 0; }
33% { opacity: 0; }
66% { opacity: 0; }
100% { opacity: 1; }
}
新的 CSS
#animation{
width: 200px;
height: 60px;
}
.one, .two, .tree, .four{
position: absolute;
width: 200px;
height: 60px;
display: block;
}
.one{
background-color: red;
opacity: 0;
-webkit-animation: one 30s infinite linear;
/*-webkit-transition: all .2s ease-in-out;*/
-webkit-transform: scale(0.9,0.9);
-webkit-transition-timing-function: linear;
-webkit-transition-duration: .05s;
}
.two{
background-color: green;
opacity: 0;
-webkit-animation: two 30s infinite linear;
-webkit-transform: scale(0.5,0.5);
-webkit-transition-timing-function: linear;
-webkit-transition-duration: .05s;
}
.tree{
background-color: gray;
opacity: 0;
-webkit-animation: tree 30s infinite linear;
-webkit-transform: scale(0.5,0.5);
-webkit-transition-timing-function: linear;
-webkit-transition-duration: .05s;
}
.four{
background-color: purple;
opacity: 0;
-webkit-animation: four 30s infinite linear;
-webkit-transform: scale(0.5,0.5);
-webkit-transition-timing-function: linear;
-webkit-transition-duration: .05s;
}
@-webkit-keyframes one {
0% { opacity: 1;
}
5%{
-webkit-transform: scale(1.1,1.1);
}
10%{
-webkit-transform: scale(1.1,1.1);
opacity: 1;
}
15%{
-webkit-transform: scale(1.1,1.1);
opacity: 1;
}
20% {
-webkit-transform: scale(0.5,0.5);
opacity: 0;
}
25% { opacity: 0; }
30% { opacity: 0; }
35% { opacity: 0; }
40% { opacity: 0; }
45% { opacity: 0; }
50% { opacity: 0; }
55% { opacity: 0; }
60% { opacity: 0; }
65% { opacity: 0; }
70% { opacity: 0; }
75% { opacity: 0; }
80% { opacity: 0; }
85% { opacity: 0; }
90% { opacity: 0; }
95% { opacity: 0; }
100% { opacity: 0; }
}
@-webkit-keyframes two {
0% { opacity: 0; }
5% { opacity: 0; }
10% { opacity: 0; }
15% { opacity: 0; }
20% { opacity: 0; }
25% { opacity: 1; }
30% {
-webkit-transform: scale(1.2,1.2);
opacity: 1; }
35% {
-webkit-transform: scale(1.2,1.2);
opacity: 1; }
40% {
-webkit-transform: scale(1.2,1.2);
opacity: 1; }
45% {
-webkit-transform: scale(0.5,0.5);
opacity: 0; }
50% { opacity: 0; }
55% { opacity: 0; }
60% { opacity: 0; }
65% { opacity: 0; }
70% { opacity: 0; }
75% { opacity: 0; }
80% { opacity: 0; }
85% { opacity: 0; }
90% { opacity: 0; }
95% { opacity: 0; }
100% { opacity: 0; }
}
@-webkit-keyframes tree {
0% { opacity: 0; }
5% { opacity: 0; }
10% { opacity: 0; }
15% { opacity: 0; }
20% { opacity: 0; }
25% { opacity: 0; }
30% { opacity: 0; }
35% { opacity: 0; }
40% { opacity: 0; }
45% { opacity: 0; }
50% { opacity: 1; }
55% {
-webkit-transform: scale(1.2,1.2);
opacity: 1; }
60% {
-webkit-transform: scale(1.2,1.2);
opacity: 1; }
65% {
-webkit-transform: scale(1.2,1.2
opacity: 1; }
70% {
-webkit-transform: scale(0.5,0.5);
opacity: 0; }
75% { opacity: 0; }
80% { opacity: 0; }
85% { opacity: 0; }
90% { opacity: 0; }
95% { opacity: 0; }
100% { opacity: 0; }
}
@-webkit-keyframes four {
0% { opacity: 0; }
5% { opacity: 0; }
10% { opacity: 0; }
15% { opacity: 0; }
20% { opacity: 0; }
25% { opacity: 0; }
30% { opacity: 0; }
35% { opacity: 0; }
40% { opacity: 0; }
45% { opacity: 0; }
50% { opacity: 0; }
55% { opacity: 0; }
60% { opacity: 0; }
65% { opacity: 0; }
70% { opacity: 0; }
75% { opacity: 1; }
80% {
-webkit-transform: scale(1.2,1.2);
opacity: 1; }
85% {
-webkit-transform: scale(1.2,1.2);
opacity: 1; }
90% {
-webkit-transform: scale(1.2,1.2);
opacity: 1; }
95% {
-webkit-transform: scale(0.8,0.8);
opacity: 0.5; }
100% {
-webkit-transform: scale(0.5,0.5);
opacity: 0; }
}