Shulou(Shulou.com)06/01 Report--

This article mainly explains "how to set animation in css3". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let Xiaobian take you to learn "how to set animation in css3"!

First, let's look at the attributes that css3 needs to implement simple animation: animation attributes,@keyframes"rules".

The animation property and @keyframes"rules" are new properties to css3. The animation property can be used to set many CSS styles for animation, such as color, background-color, height, or width.

We can implement a simple animation effect by defining @keyframes"rules" and then calling them in the animation attribute.

As shown below: To achieve continuous switching of background color

.element{

animation:pulse5sinfinite;

}

@keyframespulse{

0%{

background-color:#001F3F;

}

100%{

background-color:#FF4136;

}

}

After running, the background color will change continuously, from #001F3F color value to #FF4136 color value transition change, there will also be some transition background color. You can try it yourself.

Each @keyframes rule defines what should happen at a particular moment during the animation. For example, 0% is the beginning of the animation and 100% is the end. These keyframes can then be controlled through the shorthand animation property or its eight subproperties to give you better control over how they should be manipulated.

Let's see what the child attributes of the animation attribute are. What does it do?

Animation-name: The name of the at-rule that @keyframes wants to operate on.

Animation-duration: The length of time required for an animation to complete a cycle.

Animation-timing-function: Establish a preset acceleration curve, such as ease or linear.

Animation-delay: The time between the element being loaded and the start of the animation sequence.

Animation-direction: Set the direction of the animation after the loop. Its default value resets every cycle.

Animation-iteration-count: The number of times an animation should be executed.

Animation-fill-mode: Sets the values applied before/after animation.

For example, we can set the final state of the animation to remain on-screen, or we can set it to switch back before the animation starts.

Animation-play-state: pause/play animation.

You can then use these child attributes like this:

@keyframesstretch{

/* Declare animation action here */

}

.element{

animation-name:stretch;

animation-duration:1.5s;

animation-timing-function:ease-out;

animation-delay:0s;

animation-direction:alternate;

animation-iteration-count:infinite;

animation-fill-mode:none;

animation-play-state:running;

}

/*

Same:

*/

.element{

animation:

stretch

1.5s

ease-out

0s

alternate

infinite

none

running;

}

At this point, I believe everyone has a deeper understanding of "how to set animation in css3," so let's actually operate it! Here is the website, more related content can enter the relevant channels for inquiry, pay attention to us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.