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

This article mainly explains "how to use the animation attribute in css3 to achieve the effect of dynamic gradient of background color", interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to use the animation attribute in css3 to achieve the effect of dynamic gradient of background color.

First, let's take a look at the basics of CSS3 Keyframe animation

What is a key frame?

Keyframes (transfer points) are frames that define changes in the animation. We @ keyframes define how elements change with each Keyframe. In order for the animation to match its keyframes, you need to match the name of the @ keyframes rule with the name of the animation-name attribute specified for the element.

The name of the @ keyframes rule is declared "@ keyframes + any name". I will write 0% to 100% Keyframe information. 0% indicates the start of the animation and 100% indicates the end time. 0% from 100% can be replaced with to. The following example is a key frame for changing the background color from red to orange to pink. @ keyframes name {

0% {background: red;}

50% {background: orange;}

100% {background: pink;}

}

Description: for WebKit browsers such as Chrome and Safari, a vendor prefix (- webkit-) is required. Write "- webkit-keyframes" as an author, and write-webkit- between @ and keyframes.

Animation related attributes

Animation-name (Animation name)

The name defined in the @ keyframes specification. If this is not specified, the animation is not performed. In addition, if the specified animation name does not match any Keyframe, the Keyframe is not executed.

Animation-duration (Animation duration)

Specify the length of time to execute an animation through "seconds + s". For example, "5 seconds" lasts 5 seconds. If 0, it will not be executed. Even if a negative value is specified, it is treated as 0.

Animation-timing-function (Animation timing function)

Specify the time of the animation and how to continue. You can express smooth motion by adjusting the scale of the animation progress speed.

Ease (initial stage)

Ease-in

Ease-out

Ease-in-out

Linear

Animation-delay (Animation delay)

When reading an element, specify the start time of the animation from the element number + s. For example, "5 seconds" lasts 5 seconds. The initial value of 0 will be executed immediately.

Animation-iteration-count (Animation iteration count)

Specifies the number of times to repeat the animation with numbers. Infinite to specify an infinite loop, specify.

Animation-direction (animation direction)

Specifies the direction in which the animation is repeated.

Normal... Play in normal direction (initial value)

Alternate... Regenerate an odd number of times in the opposite direction in normal and even time (return and return.)

Reverse... Play backwards

Alternate-reverse... Reverse playback

Animation-play-state (Animation playback status)

Specify animation pause (paused) and playback (running). However, it does not seem to be used much.

Animation-fill-mode (Animation fill Mode)

Specifies the state before and after the animation is played.

None (default)

Forwards.. Maintain the state of the last Keyframe after playback

Backwards... The state of applying the first Keyframe before playback

Both... Forwards. Apply both forward and backward

Attribute summary

The animation attribute allows you to specify the values of each property separately, separated by spaces. The project can be omitted, but the animation name must be written before execution. It is recommended that you list them in the following order.

Animation-name (Animation name)

Animation-duration (Animation duration)

Animation-timing-function (Animation timing function)

Animation-delay (Animation delay)

Animation-iteration-count (Animation iteration count)

Animation-direction (animation direction)

Animation-fill-mode (Animation fill Mode)

Animation-play-state (Animation playback status) body {

Animation: test 5s ease 1s infinite forwards

}

Let's take a look at the specific content of the background color change.

After understanding the basic knowledge, let's take a detailed look at the specific implementation method. First, set the name of the Keyframe to "bg-color" and set the background color to the transition from 0 to 100%. If you set the same color to 0% and 100%, it moves smoothly as you cycle through the animation. We will also describe the version you enabled for Webkit-based browsers. @-webkit-keyframes bg-color {

0% {background-color: # e74c3c;}

20% {background-color: # f1c40f;}

40% {background-color: # 1abc9c;}

60% {background-color: # 3498bb;}

80% {background-color: # 9b59b6;}

100% {background-color: # e74c3c;}

}

@ keyframes bg-color {

0% {background-color: # e74c3c;}

20% {background-color: # f1c40f;}

40% {background-color: # 1abc9c;}

60% {background-color: # 3498bb;}

80% {background-color: # 9b59b6;}

100% {background-color: # e74c3c;}

}

Since the background color of the entire page is specified at this time, body specifies the property as animation. The value is "Keyframe name", and bg-color "change" to add in 10 seconds, ", 10s" specifies an infinite loop infinite. Don't forget the version of webkit. Background-color lets us specify the basic background color as the background color to prepare for situations where the animation doesn't work. Body {

Background-color: # e74c3c

Animation: bg-color 10s infinite

-webkit-animation: bg-color 10s infinite

}

The complete code is as follows:

Body {

Background-color: # e74c3c

Animation: bg-color 10s infinite

-webkit-animation: bg-color 10s infinite

}

@-webkit-keyframes bg-color {

0% {background-color: # e74c3c;}

20% {background-color: # f1c40f;}

40% {background-color: # 1abc9c;}

60% {background-color: # 3498bb;}

80% {background-color: # 9b59b6;}

100% {background-color: # e74c3c;}

}

@ keyframes bg-color {

0% {background-color: # e74c3c;}

20% {background-color: # f1c40f;}

40% {background-color: # 1abc9c;}

60% {background-color: # 3498bb;}

80% {background-color: # 9b59b6;}

100% {background-color: # e74c3c;}

}

P {

Font-family: Meiryo, "Hiragino Kaku Gothic Pro W3", sans-serif

Text-align: center

Margin-top: 150px

Color: # fff

}

At this point, I believe you have a deeper understanding of "how to use the animation attribute in css3 to achieve the effect of dynamic gradient of background color". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow 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.