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

This article mainly introduces the relevant knowledge of how to use the animation module in HTML and CSS, the content is detailed and easy to understand, the operation is simple and fast, and has a certain reference value, I believe you will gain something after reading this HTML and CSS animation module. Let's take a look at it.

one。 Animation module

1. Similarities and differences between transition and Animation

1.1 differences

The transition must be artificially triggered to perform animation.

Animation can be performed without human trigger.

1.2 similarities

Transitions and animations are used to animate elements.

Transition and animation are some new attributes of the system.

Transition and animation need to meet three elements in order to have animation effect.

2 three elements of animation

2.1 tell the system which animation to perform

2.2 tell the system that we need to create our own animation called lnj

2.3 tell the system how long the animation lasts

P {width:100px

Height:50px

Background-color:red

/ * 1. Tell the system which animation needs to be performed * /

Animation-name:lnj

/ * 3. Tell the system how long the animation lasts * /

Animation-duration:3s;}

/ * 2. Tell the system that we need to create our own animation called lnj * /

@ keyframeslnj {

From {margin-left:0;}

To {margin-left:500px;}

}

two。 Animation module-other attributes (part 1)

P {

Width:100px

Height:50px

Background-color:red

Animation-name:sport

Animation-duration:2s

/ * tell the system how many seconds to start the animation * /

/ * animation-delay:2s;*/

/ * tell the system the speed of animation execution * /

Animation-timing-function:linear

/ * tell the system how many times the animation needs to be performed * /

Animation-iteration-count:3

/ / infinite: unlimited

/ * tell the system whether it is necessary to perform round trip animation

Value: normal, the default value. After one execution, go back to the starting point and proceed to the next one.

Alternate, round trip animation, after one execution, go back to the next one.

* / animation-direction:alternate;}

@ keyframessport {

From {margin-left:0;}

To {margin-left:500px;}}

P:hover {

/ * tell the system whether the current animation needs to be paused

Value: running: perform animation. Default value

Paused: pauses the animation. When the animation is executed, when the mouse hover over p, the animation stops and the mouse moves away, then the animation continues.

* /

Animation-play-state:paused;}

three。 Animation module-other attributes (part two)

.box2 {

Width:200px

Height:200px

Background-color:blue

Margin:100pxauto

Animation-name:myRotate

Animation-duration:5s

Animation-delay:2s

/ * through our observation, animation has a certain state.

1. Waiting status 2. Execution status 3. End status * /

/ * animation-fill-mode function: specify the style of animation wait state and end state

Value: none: do not make any changes

Forwards: keep the end of the element in the style of the last frame of the animation

/ / forward

Backwards: the style in which the element waits for the state to display the first frame of the animation

/ / backward

Both: let the wait state of the element display the style of the first frame of the animation, and let the end state of the element keep the style of the last frame of the animation.

* /

/ * animation-fill-mode:backwards;*/

/ * animation-fill-mode:forwards;*/

Animation-fill-mode:both;}

@ keyframesmyRotate {

0% {transform:rotate (10deg);}

50% {transform:rotate (50deg);}

100% {transform:rotate (70deg);}

}

Animation-fill-mode

four。 Animation module-serial

1. Animation module concatenation format

Animation: animation name animation duration animation motion speed delay time execution times round trip animation

two。 The abbreviation of the continuous writing format of the animation module

Animation: animation name animation duration

five。 Cloud effect

104-Animation Module-Cloud effect

* {margin:0;padding:0;}

Ul {height:400px;background-color:skyblue

Margin-top:100px;animation:change5slinear0sinfinitealternate

Position:relative;overflow:hidden;// hides the scroll bar at the bottom of the screen}

Ulli {list-style:none;width:400%

/ / set the width of the li to four times the width of the screen, and move up to three times the width of the screen. In order to ensure that there are clouds in the screen all the time, set one more screen width of the cloud.

Height:100%;position:absolute

/ / after setting the absolute father of the child, the three li will overlap.

Left:0;top:0;} ulli:nth-child (1) {

Background-image:url ("images/cloud_one.png")

Animation:one30slinear0sinfinitealternate;}

Ulli:nth-child (2) {background-image:url ("images/cloud_two.png")

Animation:two30slinear0sinfinitealternate;}

Ulli:nth-child (3) {background-image:url ("images/cloud_three.png")

Animation:three30slinear0sinfinitealternate;}

@ keyframeschange {

From {background-color:skyblue;}

To {background-color:black;}}

@ keyframesone {

From {margin-left:0;}

To {margin-left:-100%

/ / if you move to the right first, there is no cloud on the screen, so move to the left first.

}}

@ keyframestwo {

From {margin-left:0;}

To {margin-left:-200%

/ / because the time of the animation is the same, but the distance of movement is different, and because of the linear speed, there will be some fast movement and some slow motion!

}}

@ keyframesthree {from {margin-left:0;}

To {margin-left:-300%;}}

six。 Infinite scrolling

105-Animation Module-Infinite Scroll

* {margin:0;padding:0;}

P {width:600px;height:188px;border:1pxsolid#000

Margin:100pxauto;overflow:hidden;} ul {width:2000px

/ / the principle of infinite scrolling is that ul animates.

Height:188px;background-color:black

/ / the background color is black. When the transparency of li is translucent, li will have a black mask effect.

Animation:move10slinear0sinfinitenormal

/ / name time and speed delay whether infinite repetition is round trip (normal means no round trip)

}

Ulli {float:left;list-style:none;width:300px

Height:188px;background-color:red

Border:1pxsolid#000;box-sizing:border-box;}

Ul:hover {

/ * stop the animation to whoever it is added to * /

Animation-play-state:paused;}

Ul:hoverli {opacity:0.5

/ / when the transparency of li is 0.5, you will see the background color (black) of the parent element, which will have a masking effect.

}

Ulli:hover {opacity:1

/ / the transparency is 1, opaque, and cannot see the background color of the parent element, so there is no mask effect.

} @ keyframesmove {

From {margin-left:0;}

To {margin-left:-1200px

/ / you only need to remove the width of 4 li on the screen. The 5.6th li will be displayed on the screen. At this time, the original animation will be restored to its original position and then the animation will be followed by the animation, realizing the wireless scrolling effect.

}}

! [] (images/banner1.png) [] (images/banner2.jpg)

! [] (images/banner3.jpg) [] (images/banner4.jpg)

/ / add the first two li to the back, play an excessive effect; the animation will not appear too stiff.

! [] (images/banner1.png) [] (images/banner2.jpg)

This is the end of the article on "how to use animation modules in HTML and CSS". Thank you for reading! I believe that everyone has a certain understanding of the knowledge of "how to use the animation module in HTML and CSS". If you want to learn more knowledge, you are 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.