how to use several animation property in CSS3 without stop ? (just use CSS3) -
this code , want 3 animation repeat infinite. can set animation property in style="" animations played 1 time ! , if set animation property infinite, div , div c animation combine , not want !
i want : first. play , second. play b , then. play c , reapet 3 mission in infinite loop !
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>untitled document</title> </head> <style> $u = 1 @-webkit-while $u == 1 { .all .a {-webkit-animation : 10s linear 0s;} .all .b {-webkit-animation : b 10s linear 10s;} .all .c {-webkit-animation : c 10s linear 20s;} } @-webkit-keyframes {from {width:5px;} {width:500px;}} @-webkit-keyframes b {from {background-color:blue;} {background-color:yellow;}} @-webkit-keyframes c {from {opacity:0;} {opacity:1;}} </style> <body> <div class="all"> <div class="a" style="position:relative; background-color:red; width:5px; height:500px;"></div> <div class="b" style="position:relative; background-color:blue; width:500px; height:500px;"></div> <div class="c" style="position:relative; background-color:green; width:500px; height:500px; opacity:0;"></div> </div> </body> </html> thanks help...
css3 css-animations
No comments:
Post a Comment