我正在尝试组合2个淡入淡出的CSS3动画。任何人都可以帮我这个吗? 这是我到目前为止 -
答案 0 :(得分:6)
好的,你的问题相应地更新了我的答案,你可以做的最好和最少的就是这样
Actual Markup + Styles Required(除非所有浏览器完全支持CSS3动画,否则不要使用它)
HTML
<div class="out"><span>example</span></div>
CSS
div {
animation:demo 7s;
-moz-animation:demo 7s; /* Firefox */
-webkit-animation:demo 7s; /* Safari and Chrome */
-o-animation:demo 7s; /* Opera */
animation:demo 7s infinite;
}
@keyframes demo {
0% {opacity:0;}
50% {opacity:1;}
100% {opacity:0;}
}
@-moz-keyframes demo { /* Firefox */
0% {opacity:0;}
50% {opacity:1;}
100% {opacity:0;}
}
@-webkit-keyframes demo { /* Safari and Chrome */
0% {opacity:0;}
50% {opacity:1;}
100% {opacity:0;}
}
@-o-keyframes demo { /* Opera */
0% {opacity:0;}
50% {opacity:1;}
100% {opacity:0;}
}