Home > Developer > Web Develop
<!DOCTYPE HTML><HTML> <Head> <MetaCharSet= "UTF-8"> <title></title> <styletype= "Text/css">Div{/*set the animation effect in Div named "dh", animation time is 20s, infinite execution, positive and negative alternation, speed first fast and slow*/Animation:dh 20s infinite Alternate Ease; /*set positioning mode to absolute positioning*/position:Absolute; }@keyframes DH{ /*in the initial state, the box is required to be a width of 200px, a height of 200px, a blue square with a background color.*/0%{Width:200px;200px;background-color:Blue;margin:0px 0px;} /*at 25% time, the box moves to the right 500px, to a diameter of 150px, the background color is red circle*/25%{width:150px;Height:150px;Border-radius:50%;Background-color:Red;margin:0 500px;} /*in 50% time, the box moves down 500px, creating a gray shadow*/50%{width:150px;Height:150px;Border-radius:50%;Background-color:Red;margin:500px 500px;Box-shadow:10px 10px Gray;} /*in 75% time, the box moves to the left 500px, becomes a square, and the color changes to orange color*/75%{width:150px;Height:150px;; Background-color:Orange;margin:500px 0px;} /*end time time back to original Blue square*/100%{width:150px;Height:150px;Background-color:Blue; } } </style> </Head> <Body> <!--set a div in the body - <Div></Div> </Body></HTML>
Css-4 (animation)
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
