CSS3褪色动画 [英] CSS3 Fade Animations

问题描述

我试图合并两个CSS3动画淡入和淡出。任何人都可以帮助我这个？

这是我到目前为止 -

I am trying to combine 2 CSS3 Animations that fade in and out. Can anyone help me with this?
This is what I have so far -

jsFiddle

推荐答案

演示

实际标记+所需样式（除非所有浏览器完全支持CSS3动画，否则不要使用它）

Actual Markup + Styles Required(Don't use it unless and until CSS3 animations are fully supported by all browsers)

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;}
}

这篇关于CSS3褪色动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！