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.
@keyframes Animation Name {

@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:mymove 5s infinite-webkit-animation:mymove 5s 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:100 px 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

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

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: and provide relevant evidence. A staff member will contact you within 5 working days.