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 -
Ok got your question updated my answer accordingly, the best and the least you can do it is like this
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;}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.