What are the ways for css3 to realize animation?
This article will explain in detail the ways to achieve animation in css3. The editor thinks it is very practical, so I share it for you to make a reference. I hope you can get something after reading this article.
There are three main ways to realize animation in css, the first is to realize gradient animation by transition, the second is to transform animation by transform, and the third is to realize custom animation by animation.
Transition gradient animation
Let's first take a look at the properties of transition:
Property: enter the css attributes that need to be changed, such as width,line-height,font-size,color, etc., all the attributes that function with the dom style
Duration: the unit of time required to complete the transition effect (s or ms)
Timing-function: the speed curve to complete the effect (linear,ease,ease-in,ease-out, etc.)
The specific values of timing-function can be found in the following table:
Delay: the delayed trigger time of the animation effect (in ms or s)
Let's look at a complete example:
.base {
Width: 100px
Height: 100px
Display: inline-block
Background-color: # 0EA9FF
Border-width: 5px
Border-style: solid
Border-color: # 5daf34
Transition-property: width,height,background-color,border-width
Transition-duration: 2s
Transition-timing-function: ease-in
Transition-delay: 500ms
/ * abbreviation * /
/ * transition: all 2s ease-in 500ms
&: hover {
Width: 200px
Height: 200px
Background-color: # 5daf34
Border-width: 10px
Border-color: # 3a8ee6
}
}
As you can see, when the mouse moves up, the animation starts with a delay of 0.5s, and because border-color is not set to transition-property, there is no gradient animation.
Transform transition animation
The transform attribute is applied to 2D or 3D transformations. This attribute allows us to rotate, scale, tilt, and move elements. It is generally used with the properties of transition.
None: the definition does not perform any conversion and is generally used to register the transformation.
Transform-functions: defines the type function to be converted. The main ones are:
2.1rotation (rotate): mainly divided into 2D rotation and 3D rotation. Rotate (angle), 2D rotation, parameter is angle, such as 45degscape angle, 3D rotation, 3D rotation around the straight line from the place to (xjournal yjournal z); rotateX (angle), 3D rotation along the X axis; rotateY (angle); rotateZ (angle)
2.2Zoom (scale): commonly used to set the size of an element. The main types are scale (x, y), scale3d (x, y, z), scaleX (x), scaleY (y) and scaleZ (z), where x, y and z are contraction ratios.
2.3Tilt (skew): mainly used to tilt the style of the element. Skew (x-angle, y-angle), 2D tilt conversion along the x and y axes; skewX (angle), 2D tilt conversion along the x axis; and skew (angle), 2D tilt conversion along the y axis.
2.4Mobility (translate): mainly used to move elements. Translate (x, y), which defines pixels moving toward x and y axes; translate (x, y, z), which defines pixels that move like x, y, z axes; translateX (x); translateY (y); translateZ (z).
Transition is used with transform
.base2 {
Transform:none
Transition-property: transform
&: hover {
Transform:scale (0.8,1.5) rotate (35deg) skew (5deg) translate (15px, 25px)
}
}
You can see that the box rotates, tilts, translates, and zooms in.
Animation Custom Animation
In order to achieve more flexible animation effects, css3 also provides the ability to customize animation.
(1) name: the keyframe name that needs to be bound to the selector.
(2) duration: the time, seconds, or milliseconds it takes to complete the animation.
(3) timing-function: same as transition-linear.
(4) delay: sets the delay before the animation starts.
(5) iteration-count: sets the number of times the animation is performed. Infinite is an infinite loop.
(6) direction: whether to poll for reverse playback of animation. Normal, default, animation should be played normally; alternate, animation should be played in reverse in turn.
Animate Custom Animation
.base3 {
Border-radius: 50%
Transform:none
Position: relative
Width: 100px
Height: 100px
Background: linear-gradient (
35deg
# ccffff
# ffcccc
)
&: hover {
Animation-name: bounce
Animation-duration: 3s
Animation-iteration-count: infinite
}
}
@ keyframes bounce {
0% {
Top: 0px
}
50% {
Top: 249px
Width: 130px
Height: 70px
}
100% {
Top: 0px
}
}
This is the end of this article on "what are the ways of css3 to achieve animation?". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it out for more people to see.
