How CSS3 controls the animation effect of HTML elements
This article "CSS3 how to control HTML element animation effect" article knowledge point most people do not understand, so Xiaobian to you summarized the following content, detailed content, clear steps, has a certain reference value, I hope you can read this article to gain something, let's take a look at this article "CSS3 how to control HTML element animation effect" article bar.
1. Control of the element transform
The code is as follows:
.showbox{ float: left; margin:4em 1em; width:100px; height:60px; borer:2px solid green; background-color:#000; text-align:center; -webkit-transition: 1s ease-in-out; transition:1s ease-in-out; } .sliderright:hover{ -webkit-transform:translate(30em, 0); transform:translate(30em, 0); }
In CSS3, elements can have the following transform-control attributes:
-webkit-transform: translate(3em,0); -webkit-transform: rotate(30deg); -webkit-transform: scale(1.5);
With the right transformation, we can finally change the position of the element to the effect we want.
2. Animation properties of CSS3
All elements in CSS3 are controlled by the following attributes
The code is as follows:
-webkit-transition: 1s ease-in-out;
In fact, this CSS property controls how the values change when the element's style changes. Some styles that can change continuously, such as opacity, color, width, etc., can be animated under the control of this property.
3. Multi-point control of animation
We can control the animation point by point. Here's another example:
The code is as follows:
.box{ position:relative; width:100px; height:100px; left:0; top:0; background:blue; -webkit-transition-property: width, height, left, top, background, -webkit-transform; -webkit-transition-duration: 1s, 1s, 2s, 2s, 1s, 1s; -webkit-transition-timing-function: ease-in-out, ease-in-out, ease-out, ease-in, linear, ease-in-out; -webkit-transition-delay:1s, 1s, 0, 0, 0, 1s; } .box:hover{ width:50px; height:50px; left:150px; top:150px; background:red; -webkit-transform:rotate(360deg); }
In the example above, -webkit-transition-property controls which style attributes the animation needs to control, duration and delay control the timing nodes, and the timing function controls whether the effect needs to fade in or out.
4. How do I make the hover action of one element trigger the animation of another element?
We can use some link symbols of CSS properties, such as the following example, using the ~ sign, when the hover action of label1 is triggered, it will affect label2, and then trigger the animation of label2.
.box1{ position:absolute; background:red; width:100px; height:100px; top:0; left:0; } .box1:hover ~ .box2{ left:500px; } .box2{ position:absolute; width:100px; height:100px; left:120px; top:0; background:blue; -webkit-transition: 1s ease-in-out; } The above is about "CSS3 how to control HTML element animation effect" this article content, I believe everyone has a certain understanding, I hope the content shared by Xiaobian is helpful to everyone, if you want to know more related knowledge content, please pay attention to the industry information channel.
