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

This article mainly introduces the relevant knowledge of "how to use css3 @ keyframes". The editor shows you the operation process through an actual case. The operation method is simple, fast and practical. I hope this article "how to use css3 @ keyframes" can help you solve the problem.

What is CSS3@keyframes? What's the use?

Keyframes is a rule of CSS3 that can be used to define the behavior of a cycle of CSS animation and to create simple animations.

Animations are similar to transformations in that they both change the representation value of the CSS property over time. The main difference is that when the property value changes (for example, when the property value changes when hovering), the transformation is implicitly triggered, but the animation is explicitly performed when the animation attribute is applied. Therefore, the animation needs to display the explicit values of the animation properties. These values are defined by the animation keyframes specified in the @ keyframes rule. Therefore, the @ keyframes rule consists of a set of encapsulated CSS-style rules that describe how attribute values change over time.

Then, using different CSSanimation attributes, you can control many different aspects of the animation, including the number of iterations in the animation, whether it alternates between the start and end values, and whether the animation should be run or paused. Animation can also delay its start time.

The @ keyframe rule consists of the keyword "@ keyframe", followed by an identifier of the animation name (which will be referenced by animation-name), followed by a set of style rules (separated by curly braces). The animation is then applied to the element by using the identifier as the value of the animation-name attribute. For example:

/ * define animation * /

@ keyframes Animation name {

/ * style rules * /

}

/ * apply it to the element * /

.element {

Animation-name: animation name (declared in @ keyframes)

/ * or use animation shorthand properties * /

Animation: animation name 1s.

}

What is in the curly braces of the @ keyframes rule?

In curly braces, we need to define keyframes or voyages that specify the value of the attribute being animated at a specific point during the animation. This allows us to control the intermediate steps in the animation sequence. For example, the @ keyframe of a simple animation can look like this:

@ keyframeschange-bg-color {

0% {

Background-color:red

}

50% {

Background-color:blue

}

100% {

Background-color:red

}

}

.demo {

-webkit-animation:change-bg-color5sinfinite

Animation:change-bg-color5sinfinite

}

This is the end of the content about "how to use css3 @ keyframes". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

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.