Home > Developer > Web Develop
Animation only applies to DOM elements that already exist on the page, and this has to be learned keyframes, which we call "KeyFrames".
The grammatical rules of keyframes:
{ from{ left:0; } 50%{ left:50px; } to { left:100px; } }Or
{ 0%{ left:0; } 50%{ left:50px; } 100%{ left:100px; } }For best browser support, you should always define the 0% and 100% selectors!
To be compatible with more browsers, you also need to add hateful prefixes:
@-moz-keyframes flash{... }/* Firefox */
@-webkit-keyframes flash{...} /* Safari and Chrome */
@-o-keyframes flash{...} /* Opera */
Animation can set 6 properties:
Animation:name Duration timing-function delay iteration-count direction;
ANIMATION-NAME Specifies the keyframe name that needs to be bound to the selector:
Animation-duration specifies the time, in seconds or milliseconds, that the animation will take to complete.
animation-timing-function Specifies the speed curve of the animation. (linear constant speed, ease acceleration, ease-in slow to fast, ease-out fast to slow, ease-in-out slow start slow end)
ANIMATION-DELAY specifies the delay before the animation begins.
ANIMATION-ITERATION-COUNT specifies the number of times an animation should be played, infinite--unlimited playback
Animation-direction Specifies whether the animation should be rotated in reverse. Value normal--normal playback, value alternate--rotate back to play
To be compatible with more browsers, you need to add a hateful prefix to the properties:
-moz-animation/* Firefox */
-webkit-animation/* Safari and Chrome */
-o--animation/* Opera */
Small instance:
<!DOCTYPE HTML><HTML><HeadLang= "en"> <MetaCharSet= "UTF-8"> <title>Animation</title> <style>. Box{width:100px;Height:100px;background:#000;position:relative;-webkit-animation:Flash 5s Ease-out;Animation:Flash 5s Ease-out; }@-webkit-keyframes Flash{0%{Top:0; Left:0;background:Red; }25%{ Left:200px;Top:0;background:#000; }50%{Top:200px; Left:200px; }75%{Top:200px; Left:0; }100%{ Left:0;Top:0}} @keyframes Flash{0%{Top:0; Left:0;background:Red; }25%{ Left:200px;Top:0;background:#000; }50%{Top:200px; Left:200px; }75%{Top:200px; Left:0; }100%{ Left:0;Top:0} } </style></Head><Body> <Divclass= "box"> </Div></Body></HTML>
Note: Internet Explorer 9 and earlier versions do not support the animation property
Css3:animation 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
