Home > Developer > Web Develop
CSS3 animations need to follow the ' @Keyframes rules
Specify the duration of the animation
Specify the name of the animation
Here's an example.
In the. html file
1 <!DOCTYPE HTML>2 <HTMLLang= "en">3 <Head>4 <MetaCharSet= "UTF-8">5 <title>Animation</title>6 <Linkrel= "stylesheet"href= "Style04.css"type= "Text/css">7 </Head>8 <Body>9 <Div>Animation effects</Div>Ten </Body> One </HTML>
In the. css file
1 div{2 width:100px;3 height:100px;4 background-color:red;5 position:relative;6 Animation:anim 5s infinite alternate;/* infinite alternate repeat animation * /7 -webkit-animation:anim 5s infinite alternate;/*safari and Chrome Browser * *8 }9 @keyframes AnimTen { One 0%{ A background-color:red; - left:0px; top:0px; - } the - 25%{ - Background-color:blue; - left:200px;top:0px; + } - + 50%{ A Background-color:antiquewhite; at left:200px;top:200px; - } - - 75%{ - Background-color:blueviolet; - left:0px;top:200px; in } - to 100%{ + background-color:red; - left:0px;top:0px; the } * } $ Panax Notoginseng @-webkit-keyframes anim{ - 0%{ the background-color:red; + left:0px; top:0px; A } the + 25%{ - Background-color:blue; $ left:200px;top:0px; $ } - - 50%{ the Background-color:antiquewhite; - left:200px;top:200px;Wuyi } the - 75%{ Wu Background-color:blueviolet; - left:0px;top:200px; About } $ - 100%{ - background-color:red; - left:0px;top:0px; A } +}
CSS3 animation effects
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
