Powerful applications of several CSS3 properties that go unnoticed

1. Timing-function: steps()

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

　1) Example in a project

Let’s first look at the difference between adding steps on the left and not adding them on the right. The one on the left is hammer after hammer, and a shadow will appear on the right.

[Note that the following demo cannot be executed in Firefox, but can only be executed in Chrome, because I am animating the "background-image" attribute 】

The code is as follows. I only posted the key codes. For details, you cansee 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 (must be a positive integer). This number of intervals is used between two key frames, that is, form and 30% between, between 30% and to.

b. The second parameter is optional and accepts two values: start and end, specifying a step change at the starting point or end point of each interval. The default is end.

I set 1 in CSS (there is not much difference between start and end in this example), which is a step-by-step animation. If not set, there will actually be multiple steps in it. operation, a shadow will appear.

There is an example written in a foreign article that can distinguish the difference between these two values. The demo link can be clicked here, and the specific principles can be searched online. .

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

　3) Create animation through sprite pictures

Through the synthesized pictures, and then Set an interval number, and animation will appear. For example, the loading picture below, click to view Online demo.

##　 2. animation-direction

animation-direction defines whether the animation should be played in reverse in turn. The options are normal, alternate, reverse, etc.

　1) Example in a project

The jitter on the left is obviously much smoother, while the jitter on the right is smooth after 100% completion. Jump back to 0% state.

The code is as follows. I only posted the key codes. For details, you cancheck 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 number calculator

When I was doing this dithering, I didn’t notice this property at first, but later I found it. Such a CSS3 animation frame number calculator.

　And noticed that the animation scrolling back and forth in this is very smooth. The calculation of key frames is very particular, and there are some algorithms in it. There is also a lot of relevant information on the Internet.

3. Timing-function: cubic-bezier()

Customize the Bezier curve function. By setting four parameters, you can control the speed of the animation.

The commonly used ease, linear, ease-in, etc. are actually the results obtained after inputting four parameters.

　1) An online example

Through customization, you can organize more complex synthetic animations, such as the scene of the ball falling to the ground, click View Online Code.

When I saw this example, I was quite shocked. I always thought that this kind of animation needs to be coordinated with JavaScript.

The picture comes from "Twelve Principles of Web Animation". This article was translated from abroad. The principles inside are summarized by Disney Animation.

　2) Bezier auxiliary tools

On the easings.net page, you can view various easing effects.

In cubic-bezier.com, you can make it online. Drag the two red or blue dots to automatically display the corresponding parameter.

The above is the detailed content of Powerful applications of several CSS3 properties that go unnoticed. For more information, please follow other related articles on the PHP Chinese website!