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

This article mainly shows you "how to achieve background color gradient animation in css", the content is easy to understand, clear, hope to help you solve doubts, the following let Xiaobian lead you to study and learn "how to achieve background color gradient animation in css" this article.

Through this article, you can learn about four different ways to make transition animations of gradient backgrounds using pure CSS.

Sometimes, we may need the following animation effects, a transition animation of a gradient background color:

Transition animation of gradient background

Suppose we write the gradual change as follows:

Div {background: linear-gradient (90deg, # ffc700 0%, # e91e1e);}

According to the general idea, with animation, we will first think of the color gradient animation by changing the color in the step of animation, then our CSS code may be:

Div {background: linear-gradient (90deg, # ffc700 0%, # e91e1e 100%); animation: gradientChange 2s infinite;} @ keyframes gradientChange {100% {/ / gradient background: linear-gradient (90deg, # e91e1e 0%, # 6f27b0 0%);}}

We used three colors on it:

# ffc700 yellow

# e91e1e red

# 6f27b0 purple

In the end, it's not the result we expected, but it goes like this:

Animation effect of CodePen Demo-linear-graident transform [1]

The transition animation we expected became frame-by-frame animation.

In other words, linear gradients do not support animated animation.

What about simply changing from one color to another? Like this:

Div {background: # ffc700; animation: gradientChange 3s infinite alternate;} @ keyframes gradientChange {100% {background: # e91e1e;}}

We find that the change between simple monochromatic values can be gradual:

Monochromatic gradient

Some attributes do not support direct transition animation.

To sum up, linear gradients (radial gradients, angular gradients) do not support animation, while monochrome background is supported.

After looking up the following documents, the screenshot in the area near background is as follows:

Which CSS attributes can be animated? [2], the screenshot above is an incomplete attribute that supports CSS animation, and the complete one can be stamped to the left.

For background-related, the documentation says that background is supported but does not support background: linear-gradient () / radial-gradient ().

So whether we want the background color gradient animation can not be achieved? Let's diverge our thoughts and see if there are other ways to achieve our goals.

Simulate gradient animation with background-position

In the screenshot of which of the above CSS attributes can be animated, it is listed that there is also background-position related to background, that is, background-position supports animation, and gradual animation can be realized by changing the way of background-position:

Div {background: linear-gradient (90deg, # ffc700 0%, # e91e1e 50%, # 6f27b0 100%); background-size: 200% 100%; background-position: 00; animation: bgposition 2s infinite linear alternate;} @ keyframes bgposition {0% {background-position: 00;} 100% {background-position: 100%;}}

Here we also cooperate with background-size. First of all, take a look at:

Background-position: specify the initial location of the picture. This initial position is relative to the background location layer defined by background-origin.

Background-size: sets the background image size. When the value is a percentage, it indicates the percentage size of the background image relative to the background area. When two parameters are set, the first value specifies the width of the picture and the second value specifies the height of the picture.

Set the width of the picture to twice the width of the background area through background-size: 200% 100%, and then move the picture by changing the initial position of the x-axis of the background-position. Because the size of the background image is set to twice that of the background area, the movement of the background-position is from 00 to > 100%.

Simulate gradient animation with background-size

Since background-position can, of course, another background-size is just as good. Similar to the method above, except that this time background-position assists background-size, the CSS code is as follows:

Div {background: linear-gradient (90deg, # ffc700 0%, # e91e1e 33%, # 6f27b0 66%, # 00ff88 100%); background-position: 100%; animation: bgSize 5s infinite ease-in-out alternate;} @ keyframes bgSize {0% {background-size: 300% 100%;} 100% {background-size: 100%;}}

CodePen--Demo--position-size to realize gradient Animation [3]

By changing the first value of background-size, I change the size of the background image from 3 times the size of the background area to 1 times the size of the background area, and there is a kind of animation effect in the process of background image transformation.

As for why to cooperate with background-position: 100%. This is because if background-position is not set, the default value is 0%, which will cause the leftmost color of the animation to remain the same, as shown below, which is unnatural:

Simulate gradient animation with transform

Although the above two ways can be achieved, but the total feeling is not free enough, or random enough.

Not only that, the above two methods, due to the use of background-position and background-size, and change these two attributes in the gradient, resulting in a lot of repaint of the page, which consumes a lot of page performance, so we can also try the transfrom method:

In the following way, use pseudo elements with transform for gradient animation, draw a large background inside the element through the pseudo element before or after of the element, and then transform the pseudo elements through transform:

Div {position: relative; overflow: hidden; width: 100px; height: 100px; margin: 100px auto; border: 2px solid # 000; &: before {content: "; position: absolute; top:-100%; left:-100%; bottom:-100%; right:-100% Background: linear-gradient (45deg, # ffc700 0%, # e91e1e 50%, # 6f27b0 100%); background-size: 100% 100%; animation: bgposition 5s infinite linear alternate; z-index:-1;}} @ keyframes bgposition {0% {transform: translate (30%, 30%);} 25% {transform: translate (30%,-30%) } 50% {transform: translate (- 30%,-30%);} 75% {transform: translate (- 30%, 30%);} 100% {transform: translate (30%, 30%);}}

The implementation principle is shown in the following figure:

CodePen--Demo-- pseudo-elements with transform to realize background gradient [4]

The above list is only part of the method, in theory, pseudo-element coordination can produce displacement or deformation of the properties can achieve the above effect. We can even use different slow functions or learn from the cicada principle to produce a very random effect.

Of course, all the methods listed in this article are pure CSS methods, which can also be made using SVG or Canvas, and the performance is better. Interested readers can study on their own.

Gradient animation via filter hue-rotate (updated 2019-04-06)

The following method can be said to be a sharp weapon in the new era.

Through the filter hue-rotate, you can easily realize the background color gradient animation, the transition effect is also very natural, and the amount of code is small, which can be called cool techs:

Div {background: linear-gradient (45deg, # ffc107, deeppink, # 9c27b0); animation: hueRotate 10s infinite alternate;} @ keyframes hueRotate {0 {filter: hue-rotate (0);} 100% {filter: hue-rotate (360deg);}}

CodePen Demo-hue-rotate to realize gradient background animation [5]

Use CSS @ property to realize background color gradient animation

Today (2021-04-15), we can also use CSS @ property to achieve background color gradient animation, its appearance, greatly enhanced the ability of CSS!

According to MDN-- CSS Property [6], @ property CSS at-rule is part of CSS Houdini API, which allows developers to explicitly define their CSS custom properties, to check for property types, to set default values, and to define whether the custom properties can be inherited.

@ property-- colorA {syntax:'; inherits: false; initial-value: fuchsia;} @ property-- colorC {syntax:'; inherits: false; initial-value: # f79188;} @ property-- colorF {syntax:'; inherits: false; initial-value: red;} div {background: linear-gradient (45deg, var (--colorA), var (--colorC), var (--colorF)) Animation: change 10s infinite linear;} @ keyframes change {20% {--colorA: red;-- colorC: # a93ee0;-- colorF: fuchsia;} 40% {--colorA: # ff3c41;-- colorC: # e228a0;-- colorF: # 2e4c96;} 60% {--colorA: orange -- colorC: green;-- colorF: teal;} 80% {--colorA: # ae63e4;-- colorC: # 0ebeff;-- colorF: # efc371;}}

Look at the effect, perfect:

Gradient background animation using CSS @ property

In a simple interpretation, CSS @ property is actually a more flexible CSS custom property, which we can also call a CSS Houdini custom property. Where:

The-- property-name in @ property--property-name is the name of the custom attribute, which can be referenced in CSS through var (--property-name) after definition.

Syntax: the syntax rule for this custom attribute, which can also be understood as the type that represents the defined custom attribute

Inherits: whether inheritance is allowed

Initial-value: initial valu

In the above DEMO, we use the custom attribute of CSS Houdini to graft the transition effect originally defined in background onto color, while CSS supports the transformation from one color to another, so we skillfully realize the transition animation of gradient background color.

For more information about CSS @ property, you can poke this article to learn more-- CSS @ property to make the impossible possible [7]

The complete code can be stamped here:

CodePen Demo-CSS Houdini Custom attribute to realize gradient transition Animation [8]

So far, we've got four different ways to animate the transition of a gradient background made using pure CSS.

These are all the contents of this article entitled "how to realize background Color gradient Animation in css". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

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.