A powerful application of several CSS3 attributes that are not noticed

First, timing-function:steps ()

At first, I didn't pay much attention to this timing-function when using CSS3, just noticed the custom Bezier curve.

1) An instance of a project

Let's take a look at the difference between the left and right steps. On the left is a hammer and a shadow on the right.

"Note that this demo is not available in Firefox and can only be done in chrome because I am animating the" Background-image "property"

The code below, I only have a few key code to paste out, detailed can see here :

. btn-pay {  background:url (t_btn-pay.png) no-repeat-30px;  Animation:pay-interval 0.5s Steps (1) infinite;}. btn-pay2 {  animation:pay-interval 0.5s linear Infinite;} @keyframes Pay-interval {from  {    background-image:url (t_btn-pay.png);  }  30% {    background-image:url (t_btn-pay-active.png);  }  to {    background-image:url (t_btn-pay.png);  }}

2) Parameter description

The syntax is as follows:　　

A. The first parameter specifies the number of intervals in the time function (which must be a positive integer), which acts on between two keyframes, that is, between the form and 30%, and between 30% and to.

B. The second parameter is optional, accept start and end two values, specify a step change at the beginning or end of each interval, and the default is end.

I set a 1 in the CSS (in this case, start and end is not very small), that is, step-by-step animation, and if not set, then there will be more than one step in the operation, there will be shadow.

A foreign article has written an example, you can distinguish between the two values, the demo link can click here , the specific principle can be searched on the internet.

. contain-car {  animation:drive 4s steps (4, end) infinite;}. contain-car-2 {  animation:drive 4s steps (4, start) infinite;}

3) animating with sprite images

Through the composition of the picture, and then set the number of intervals, you can appear animation, such as the following loading picture, click to view the online demo.

　Second, animation-direction

Animation-direction defines if the animation should be rotated in reverse, with the options normal, alternate (alternating), reverse (reverse), and so on.

1) An instance of a project

The jitter on the left is noticeably smoother, while the jitter on the right jumps back to the 0% state immediately after completing 100%.

The code below, I only have a few key code to paste out, detailed can see here :

. img1 {  animation:tel-rotate 1s linear infinite alternate;}. img2 {  animation:tel-rotate 1s linear infinite;} @keyframes Tel-rotate {from  {    -webkit-transform:rotate ( -20deg);    Transform:rotate ( -20deg);  }  to {    -webkit-transform:rotate (40deg);    Transform:rotate (40deg);  }}

2) CSS3 Animation frame Count Calculator

In doing this jitter, at first did not notice this property, followed by a CSS3 animation frame number Calculator.

And notice that the animations that roll back and forth inside are very smooth. Key frame calculation is quite fastidious, there are some algorithms, online related information is quite many.

Third, Timing-function:cubic-bezier ()

Customize the Bezier function by setting four parameters to control the speed of the animation.

Usually used ease, linear, ease-in, and so on, in fact, the input of four parameters obtained results.

1) An example on the Internet

Customize to organize more complex compositing animations, such as when the ball falls to the ground, click to view the online code .

When I saw this example, I was quite shocked, and I always thought that this animation needs to be in line with JavaScript.

Pictures from the " Web page Animation 12 Principles ", this article from the foreign translation, the principle is the Disney animation summary.

2) Bessel Assist tool

On the Easings.net page, you can see the effects of various eases.

In cubic-bezier.com, you can make the line, drag the red or blue two points, you can automatically display the corresponding parameters.