How to realize multiple background Animation in CSS
This article mainly explains "how to realize multi-background animation in CSS". 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 realize multiple background animation in CSS.
CSS code
Setting multiple background images for a page element is a technique that works a long time ago. You just need to separate the backgrounds with commas:
The code is as follows:
. animate-area {
Background-image: url (twitter-logo-bird.png), url (treehouseFrog.png), url (bg-clouds.png)
Background-position: 20px-90px, 30px 80px, 0px 0px
Background-repeat: no-repeat, no-repeat, repeat-x
}
It is important to note that the background image you want to appear at the top should be at the top of the picture queue. To get these background images moving requires changing the background-position, also separated by commas:
The code is as follows:
@ keyframes animatedBird {
From {background-position: 20px 20px, 30px 80px, 0;}
To {background-position: 300px-90px, 30px 20px, 100%;}
}
. animate-area {
Animation: animatedBird 4s linear infinite
}
At this point, I believe you have a deeper understanding of "how to achieve multi-background animation in CSS". 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!
