The CSS3 Animation (animation) has the following properties:
1. Animation-name Custom Animation name
2, animation-duration animation specifies how many seconds or milliseconds to complete, the default value is 0;
3, animation-timing-function animation of the time curve, linear uniform speed, ease first slow fast, before the end of slow.
4, the Animation-delay animation before the start of the delay interval, the default is 0
5. The number of times the Animation-iteration-count animation is played, the default is 1
6, animation-direction whether to rotate the reverse animation
7. Animation-play-state whether the animation is running or paused. Value: paused Specifies to pause the animation; running specifies the animation that is running, by default.
Example: This demo illustrates the whole process of animation with translation (translate) as an example
Html:
<body><div class= "Warp" ></div></body>
Css:
. warp{ height:100px; width:100px; border:1px solid #eee; animation-name:moves; Animation-direction:alternate; animation-delay:0.2s; animation-duration:5s; animation-play-state:paused; Animation-iteration-count:3; /* Above can be written as: */ animation:moves 5s linear 0.2s 3;}@keyframes moves{/* Animation name Custom */10%{/* Time point can be any, 10% means when the time to 10% is the element The state to be reached */transform:translate (100px,0); -ms-transform:translate (100px,0); /*ie 9*/-moz-transform:translate (100px,0); /* Firefox */-webkit-transform:translate (100px,0); /* Safari and Chrome */-o-transform:translate (100px,0); /* Opera */}30%{/* Time point can be any */transform:translate (100px,100px);-ms-transform:translate (1 00px,100px); /*ie 9*/-moz-transform:translate (100px,100px); /* Firefox */-webkit-transform:translate (100px,100px); /* Safari and Chrome */-o-transform:translate (100px,100px); /* Opera */}60%{/* Time point can be any */transform:translate (0,100px);-ms-transform:translate (0, 100px); /*ie 9*/-moz-transform:translate (0,100px); /* Firefox */-webkit-transform:translate (0,100px); /* Safari and Chrome */-o-transform:translate (0,100px); /* Opera */}100%{/* points can be */transform:tran at any timeSlate (0,0);-ms-transform:translate (0,0); /*ie 9*/-moz-transform:translate (0,0); /* Firefox */-webkit-transform:translate (0,0); /* Safari and Chrome */-o-transform:translate (0,0); /* Opera */}}
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
