Commonly used CSS styles (4): animations and css styles

Commonly used CSS styles (4): animations and css styles

In the previous article, common CSS styles (3) This article has introduced the transition and transform with animation effects in CSS. Let's talk about the animation in CSS today. The addition of animation will make the animation more optimistic.

Animation

The implementation of animation must be implemented through keyframes. Keyframes (Key Frame) is similar to the Key Frame in flash. A key frame has its own syntax rules. Its name starts with "@ keyframes", followed by the "animation name" and a pair of curly braces "{}". there are some style rules in the brackets for different time periods, a bit like the style of css. A style rule in "@ keyframes" consists of multiple percentages, for example, "0%" to "100%". We can create multiple percentages in this rule, we add different attributes to each element in each percentage that requires an animation effect, so that the element can achieve a changing effect, such as moving, changing the color and position of the element, size and shape. However, we can use "fromt" and "to" to indicate where an animation starts and ends, that is to say, this "from" is equivalent to "0%" and "to" is equivalent to "100%". It is worth mentioning that "0%" cannot omit the percentage symbol like other attribute values, we must add a percentile ("%") here. If it is not added, keyframes is invalid and does not work. Because the unit of keyframes only accepts the percentage value.

Different browsers:

Kernel type	Writing Method
Webkit (Chrome/Safari)	-Webkit-animation
Gecko (Firefox)	-Moz-animation
Presto (Opera)
Trident (IE)	-Ms-animation
W3C	Animation

　

 

 

 

 

 

Attribute description:

1. animation-name: used to retrieve or set the animation name applied to an object. It must be used with rule @ keyframes. Animation names can be freely retrieved, making them more semantic.

2. animation-duration: Retrieves or sets the duration of an object animation.

3. animation-timing-function: Retrieves or sets the transition type of an object animation.

Valid value:

Linear: linear transition. Equivalent to the besell curve (0.0, 0.0, 1.0, 1.0)

Smooth: smooth transition. Equivalent to the besell curve (0.25, 0.1, 0.25, 1.0)

Slow-in: from slow to fast. Equivalent to the besell curve (0.42, 0, 1.0, 1.0)

Slow-out: From fast to slow. Equivalent to the besell curve (0, 0, 0.58, 1.0)

Slow-in-out: from slow to fast and then to slow. Equivalent to the besell curve (0.42, 0, 0.58, 1.0)

Cubic-bezr (<number >,< number>): the type of the beiser curve. Four values must be in the range [0, 1 ].

4. animation-iteration-count: Retrieves or sets the number of cycles of an object animation.

Valid value:

Infinite: infinite Loop

　　　Number: the number of cycles of an object animation.

5. animation-direction: Retrieves or sets whether the object animation reversely moves in a loop.

Valid value:

Normal

Alternate: switching between normal and reverse

6. animation-play-state: Retrieves or sets the state of an object animation.

Running: Exercise

Paused: Pause

7. animation-fill-mode: Retrieves or sets the State beyond the animation time of an object.

Valid value:

None: default value. Do not set the status outside the object Animation

Forwards: sets the object state to the state when the animation ends.

Backwards: sets the object status to the state when the animation starts.

Both: Set the object status to the animation end or start state.

The following is a comprehensive example:

CSS code:

# Animation {width: 250px; height: 250px; background-color: brown; opacity: 0.5; position: absolute; left: 40%; overflow: hidden ;} # animation span {font-family: ""; font-size: 20px; color: # ccc; opacity: 0; display: block; margin: 30px ;}# text1: hover {-moz-animation-play-state: paused;/* pause the animation when the mouse passes */-webkit-animation-play-state: paused; -o-animation-play-state: paused;-ms-animation-play-state: paused;} # text2: hover {-moz-animation-play-state: paused;-webkit-animation-play-state: paused;-o-animation-play-state: paused; -ms-animation-play-state: paused;} # text1 {-webkit-animation-name: animation1; /* animation name */-webkit-animation-duration: 4 s;/* animation duration */-webkit-animation-timing-function: animation-in; /* changes from slow to fast */-webkit-animation-delay: 2 s;/* starts animation after 2 s */-webkit-animation-iteration-count: infinite; /* set the animation to play infinitely */-webkit-transform: translate (55px); animation-name: animation1; animation-delay: 4S; animation-timing-function: animated-in; animation-delay: 2 s; animation-iteration-count: infinite; transform: translate (55px);-ms-animation-name: animation1;-ms-animation-duration: 4 s;-ms-animation-timing-function: memory-in;-ms-animation-delay: 2 s;-ms-animation-iteration-count: infinite; -ms-transform: translate (55px);-moz-animation-name: animation1;-moz-animation-delay: 4 s;-moz-animation-timing-function: transform-in;-moz-animation-delay: 2 s;-moz-animation-iteration-count: infinite;-moz-transform: translate (55px );} # text2 {-webkit-animation-name: animation2;/* animation name */-webkit-animation-duration: 4 s; /* animation duration */-webkit-animation-timing-function: animation-in;/* changes from slow to fast */-webkit-animation-delay: 2 s; /* Start the animation after 2 seconds */-webkit-animation-iteration-count: infinite;/* set the animation to play infinitely */-webkit-transform: translate (60px ); animation-name: animation2; animation-delay: 4S; animation-timing-function: animation-in; animation-delay: 2 s; animation-iteration-count: infinite; transform: translate (60px);-ms-animation-name: animation2;-ms-animation-duration: 4 s;-ms-animation-timing-function: progress-in; -ms-animation-delay: 2 s;-ms-animation-iteration-count: infinite;-ms-transform: translate (60px);-moz-animation-name: animation2; -moz-animation-delay: 4 s;-moz-animation-timing-function: Random-in;-moz-animation-delay: 2 s; -moz-animation-iteration-count: infinite;-moz-transform: translate (60px);} @-webkit-keyframes animation1 {0% {-webkit-transform: translate (-10px); opacity: 0;} 20% {-webkit-transform: translate (25px); opacity: 0.5;} 45% {-webkit-transform: translate (45px ); opacity: 1;} 100% {-webkit-transform: translate (60px); opacity: 0.8 ;}@- webkit-keyframes animation2 {0% {-webkit-transform: translate (280px); opacity: 0;} 30% {-webkit-transform: translate (200px); opacity: 0.5;} 65% {-webkit-transform: translate (130px ); opacity: 1;} 100% {-webkit-transform: translate (60px); opacity: 0.8 ;}}

HTML code:　

<Div id = "animation"> <span id = "text1"> This is the blog of ly moving forward </span> <span id = "text2"> welcome and comment! </Span> </div>

The effect is as follows:

Explanation:

In this example, the effect is as follows. Here, we mainly use animation and translate to achieve a progressive text effect. The function of translate is to let the text translate according to the given value. Animation uses the key frame and percentage value to divide the translation process into several frames, and then sets the duration. A frame is connected to form an animation.