Home > Developer > Web Develop
Since CSS3 launched animation, a large number of H5 applications have used animation to make the previous need JS or Flash to make the special effects. Take a look at animation today.
Experimental object: AnimationGrammarAnimation can be used to define a set of animation effects that can be applied on top of any element, and can precisely control the details of the animation through the various parameters it provides.
Descriptionanimation:[[Animation-name] | | [Animation-duration] | | [Animation-timing-function] | | [Animation-delay] | | [Animation-iteration-count] | | [Animation-direction]]
Animation-name: Animation name, must be used in conjunction with @keyframes, all animations are defined separately by @keyframes, and are invoked through Animation-name in the element style
Animation-duration: Specifies the duration of the animation, in units s or MS
Animation-timing-function: Specifies the transition type, that is, the speed of the change in time, the value range is the same as the transform timing-function.
Animation-delay: Defines the delay time before the animation starts, in units s or MS
Animation-iteration-count: Specifies the number of animation cycles. The value can be a number, or it can represent an infinite loop for infinite
Animation-direction: Direction of animation, value of normal[normal direction] and alternate[normal and reverse alternation]
@keyframes: This property is used alone, not in the element style, the following is an example:
@-webkit-keyframes Animations{0%{-webkit-transform:translate (0,0);} 50%{-webkit-transform:translate (px, px);} 100%{-webkit-transform:translate (px,0);} }ExampleWe see that its basic format is:
@-Browser prefix-keyframes animation name {
0% {Some transform effects are defined here}
50% {Some transform effects are defined here}
100% {Some transform effects are defined here}
......
}
The percentage here represents the length of time, the total length is the time defined in Animation-duration.
HtmlBecause the @keyframes definition is too cumbersome, but also to be compatible with different browsers, so here we directly recommend some mature animation components--animate.css, eliminating the hassle of writing @keyframes effect, of course, If you want to make a more refined animation, after you are familiar with the use of the property, you can define the animation effect of the bombing day.
ANIMATE.CSS official website Download
......<title>Experimental--animation of new characteristics of CSS3</title> <link rel="stylesheet" href="animate.css" type= "Text/css"/> <link rel="stylesheet" href= "style.css" type=" Text/css "/></head><body> <div class="Content"> <div class="Box1"></div> </div></body></html>LessIt is important to note that Animate.css to be introduced before STYLE.CSS, which is also a rule to be followed in all front-end productions: plug-ins are introduced before custom styles and scripts, prevent plug-in styles and scripts from overwriting custom styles and scripts, and customize styles to invoke styles in plug-ins, so make sure the plug-in is loaded before the custom style to ensure that the The associated object can be found.
. Animation (@n: Fly,@t:2S@fn: Ease-in-out,@i: Infinite,@dur: Alternate){Animation: @n @t @fn @i @dur; -webkit-Animation: @n @t @fn @i @dur; -o-Animation: @n @t @fn @i @dur; -moz-Animation: @n @t @fn @i @dur;}. Content {Width: 1400pxHeight: -pxborder: 2PX Solid#ccc;margin-Top: -px margin-Left : -px;}. box {Width: -pxHeight: -pxbackground:Bluefloat:Left margin-Right : -px;}. box1{. Box; . Animation (slideoutup);}. Content { width: 1400px; height: px; Border: 2px solid #ccc; margin-top: + px; margin-left: + px; }. Box { width: + px; Height: + px; background: Blue; float: left; margin-right: + px; }. Box1 { width: px ; Height: + px ; background: Blue ; float: Left; margin-right: + px ; animation: slideoutup 2s ease-in-out infinite alternate ; -webkit-animation: slideoutup 2s ease-in-out infinite alternate ; -o-animation: slideoutup 2s ease-in-out infinite alternate ; -moz-animation: slideoutup 2s ease-in-out infinite alternate ;}The Slideoutup animation definition section in Animate.css:
@-webkit-keyframes slideoutup{0%{ -webkit-transform: Translate3d (0, 0, 0); transform: Translate3d (0, 0, 0); }100%{ visibility: hidden; -webkit-transform: Translate3d (0,- 0); transform: Translate3d (0,- 0); }}@keyframes slideoutup{0%{ -webkit-transform: Translate3d (0, 0, 0); transform: Translate3d (0, 0, 0); }100%{ visibility: hidden; -webkit-transform: Translate3d (0,- 0); transform: Translate3d (0,- 0); }}The state of the animation at the beginning of 0.5s
The state of 0.8s at the beginning of the animation
The state of 1.2s at the beginning of the animation
The state of 1.6s at the beginning of the animation
The state of 2.1s at the beginning of the animation
In order to make it easy for everyone to see how the animation changes in relation to time, I purposely added a stopwatch timer to the page. From the final effect we can see:
1, we set the animation time is 2s, and the animation Slideoutup definition time 100% when the element movement to its own height of 100% of the opposite direction (Transform:translate3d (0, 100%, 0), where the element height is 100px, So it moves to its -100px in 2 seconds and then begins to return to its original state.
2, the effect we can see, from the 0-0.8s, the element movement of the amplitude accounted for the entire movement amplitude of 40%, from the 0.8s-1.2s movement accounted for the entire movement amplitude of 40%, and from 1.2s to 2.0s, only the movement of the entire range of 20%, This is because we set the timing-function to Ease-in-out. (from slow to fast to slow), you can change their own other ways to see how the effect will be.
3, we here animation direction is set to alternating, so the element reverts to the initial state is also a smooth transition, but if the animation direction is set to normal, after the element movement to the -100px, it will be very stiff immediately jump back to the initial position, this can be done by their own experimental verification, You can also change the number of animations to 1 to try what effect.
Well, animation is here, the other effects are actually different parameters combination of results, ever-changing, not from its Zong, through this article mastered the basic principles and writing, the other so easy.
Experimental--animation of new characteristics of CSS3 +less
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
