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

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.

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.