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

Editor to share with you there are several types of css3 animation, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

There are three types of css3 animation: 1, gradient animation realized by transition attribute, 2, transition animation realized by transform attribute, 3. Custom animation realized by animation attribute and "@ keyframes" rule.

The operating environment of this tutorial: windows7 system, CSS3&&HTML5 version, Dell G3 computer.

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. Let's talk about the realization of three kinds of animation in detail.

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:

The value describes the constant speed of linear (equal to cubic-bezier), ease from slow to fast and then to slow (cubic-bezier (0.25pyrrine 0.1)) ease-in slowly becomes fast (equal to cubic-bezier (0.42) ease-out slows down (equal to cubic-bezier) ease-in-out first becomes fast and then slows (equal to cubic-bezier (0.42)) The fade effect cubic-bezier defines its own value in the cubic-bezier function. The possible value is a numeric delay between 0 and 1: 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; / * abbr. * / / * transition: all 2s ease-in 500ms leadership / &: hover {width: 200px; height: 200px; background-color: # 5daf34; border-width: 10px Border-color: # 3a8ee6;}}

Running effect:

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:

1. 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. Scale: generally used to set the size contraction 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.

3. Skew: it is 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.

4. 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 uses .base2 {transform:none; transition-property: transform; &: hover {transform:scale (0.8,1.5) rotate (35deg) skew (5deg) translate (15px, 25px);}}

Running effect:

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;}}

Running effect:

As you can see, custom animation can achieve more flexible animation effects, including all the functions of the first and second animation, and the attributes are more comprehensive.

The above is all the content of this article "there are several types of css3 animation". 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.