Create animations using @keyframes in CSS3, examples

Source: Internet
Author: User
Animation properties can gradually change from one value to another, such as size, quantity, percentage, and color. With @keyframes you can create animations that are created by gradually changing from one CSS style setting to another. Animation in the work is also a lot of, next to introduce you how to use the animation.





I. @keyframes rules of grammar
You can change CSS styles several times during the animation process. The specified change occurs when you use%, or the keyword "from" and "to", which is the same as 0% to 100%. 0% is the start animation, and 100% is when the animation is complete. For best browser support, you should always define a selector of 0% and 100%.



@keyframes is an animation that can be understood as a group composed of multiple transform.
Grammar:
@keyframes Animation Name {
from{Css1}
to{CSS2}
}



@keyframes Animation Name {
0% {CSS1}
50% {CSS2}
100% {CSS3}
}
Note: Use the Animation property to control the appearance of the animation, and also use a selector to bind the animation.



Second, animation attribute value



When this animation is called with animation, animation consists of six attributes:



ANIMATION-NAME Specifies the name of the keyframe to bind to the selector
Animation-duration animation Specifies how many seconds or milliseconds to complete
Animation-timing-function set how the animation will complete a cycle
Animation-delay to set the delay interval before the animation starts
Animation-iteration-count defines how many times an animation plays
Animation-direction Specifies whether the animation should be rotated in reverse
Animation: Animation name time speed curve starts when the number of delayed play turns reverse play
Let's take a look at:



Let the square go from the upper left corner to the lower right corner to the lower left corner and finally back to the upper left corner, and the color will change as well.


div{animation:mymove5s infinite;

 -webkit-animation:mymove5s infinite;/* Safari and Chrome */

}

@keyframes mymove

{

 0%  {top:0px;left:0px;background:red;}

 25% {top:0px;left:100px;background:blue;}

 50% {top:100px;left:100px;background:yellow;}

 75% {top:100px;left:0px;background:green;}

 100%{top:0px;left:0px;background:red;}

}

@-webkit-keyframes mymove/* Safari and Chrome */

{

 0%  {top:0px;left:0px;background:red;}

 25% {top:0px;left:100px;background:blue;}

 50% {top:100px;left:100px;background:yellow;}

 75% {top:100px;left:0px;background:green;}

 100%{top:0px;left:0px;background:red;}

}


 


The above content introduces the use of animation methods, we also need to do their own, more knock, try different effects!


Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.