css3 uses the animation attribute to achieve the effect of dynamic gradient of background color (code attached)

If the background color of the website is relatively single, it will not look beautiful enough. So, how to make the background color changeable? This article will introduce to you how to use CSS3 animation to gradually change the background color, adjust the combination of color and order, and make the color design more eye-catching.

Without further ado, let’s take a look at the specific content (recommended course: css3 video tutorial)

First of all, let’s take a look at CSS3 keyframe animation Basics

Let’s start by understanding the animation of gradually changing elements! In CSS 3 animation properties you can set keyframes and draw detailed motion. Regarding the time and timing of animations and infinite loops, only CSS can be specified!

What are keyframes?

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

The name of the @keyframes rule is declared as "@keyframes any name". I'll write keyframe information from 0% to 100%. 0% indicates the start of the animation and 100% indicates the end time. 0% from, 100% can be replaced with to. The example below is a key frame that changes the background color from red to orange to pink.

@keyframes name {
  0% { background: red; }
  50% { background: orange; }
  100% { background: pink; }
}

Note: For WebKit browsers such as Chrome and Safari, the vendor prefix (-webkit-) is required. Write " -webkit-keyframes " as written, and write -webkit- between @ and the keyframe.

animation related properties

animation-name (animation name)

The name defined in @keyframes specification. If this is not specified, the animation will not be performed. Additionally, if the specified animation name does not match any keyframe, the keyframe will not be executed.

animation-duration (animation duration)

Specify the length of time to execute an animation through "seconds". For example, "5 seconds" lasts for 5 seconds. If 0, it will not be executed. Even if a negative value is specified, it will be 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 scaling the animation's progress speed.

ease(initial value)

ease-in

ease-out

ease-in-out

linear

animation-delay (animation delay)

When reading an element, specify the "animation start" time from "element number s". For example, "5 seconds" lasts for 5 seconds. An initial value of 0 will execute immediately.

animation-iteration-count (animation iteration count)

Specifies the number of times to repeat the animation using a number. To specify an infinite loop, specify infinite.

animation-direction

Specifies the direction of the repeating animation.

normal...plays in normal direction (initial value)

alternate...regenerates odd times in opposite direction at normal and even times (return and return...)

reverse...play backwards

alternate-reverse...play reversely

animation-play-state(animation play state)

Specify animation pause (paused) and play (running). However, it doesn't seem to be used much.

animation-fill-mode (animation fill mode)

Specify the state before and after playing the animation.

none (default)

forwards..Keep the state of the last keyframe after playback

backwards...Apply the state of the first keyframe before playback

both … forwards …applies both forwards and backwards

Property Summary

The animation property allows you to specify each individually Attribute values, separated by spaces. The item can be omitted, but the animation name must be written before execution. It is recommended to 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 play state)

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 methods. 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 will move smoothly while looping the animation. We will also describe the version you enable for Webkit-based browsers.

@-webkit-keyframes bg-color {
  0% { background-color: #e74c3c; }
  20% { background-color: #f1c40f; }
  40% { background-color: #1abc9c; }
  60% { background-color: #3498db; }
  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: #3498db; }
  80% { background-color: #9b59b6; }
  100% { background-color: #e74c3c; }
}

Since the background color of the entire web page is specified at this time, the body is specified with animation attributes. Values ​​are "keyframe name", bg-color "change" is added in 10 seconds, ",10s" specifies infinite loop. Don't forget the webkit version. background-color lets us specify a base background color as the background color, preparing for situations where 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:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<title></title>
	<style type="text/css">
	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: #3498db; }
  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: #3498db; }
  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;
}
</style>
</head>
<body>
<p>php中文网</p>
</body>
</html>

效果如下：

The above is the detailed content of css3 uses the animation attribute to achieve the effect of dynamic gradient of background color (code attached). For more information, please follow other related articles on the PHP Chinese website!