Detailed CSS3animation property (c)
animation-direction
animation-direction property
Animating Objects retrieved or whether the reverse movement in the loop
grammar
animation-direction: normal | reverse | alternate | alternate-reverse | initial | inherit;
Parameter Description
normal: normal direction
reverse: run opposite
alternate: running the first operation and then in the opposite direction, and run continuously alternating
alternate-reverse: first run in the reverse direction and then run the positive direction, and are alternately running continuously
animation-fill-mode
animation-fill-mode properties
When the provisions of the animation does not play (when the animation is complete or not there is a delay when the animation begins playing), to be applied to the elements of style
grammar
animation-fill-mode: none | forwards | backwards | both | initial | inherit;
Parameter Description
none: default. Not set beyond the object animation state
forwards: Set object state to state at the end of the animation
backwards: the state of the object's state is set to animation starts
both: Sets the object state to state, or the beginning of the end
animation-play-state
animation-play-state property
Specifies whether the animation is running or stopped
grammar
animation-play-state: paused | running;
Parameter Description
paused: Specifies to pause the animation
running: the default value, specify a running animation
animation
animation properties
Composite properties. Where the application to retrieve or set the object animation effects
grammar
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
Programming Exercises
We usually can see some scrolling web page has a scroll arrow tips animation effects, such as when we open such a web page when the bottom of the page there will be a down arrow to move back and forth to remind us decline screen. So we have to try it.
task
- Create a div, use CSS to control the size, font, type ">" let down and turned 90 °, the position of the control center for the bottom of the page
- Create downward movement animation keyframes
- Animate an infinite loop, and before the start of the animation delay .5s
Task Tips
Iteration-COUNT-Animation: Infinite | <Number>;
<Number> is the number whose default value is "1"; infinite infinite number of cycles.
Animation-direction: Normal | Reverse | Alternate | Alternate-Reverse;
Normal: normal direction;
Reverse: reverse direction run;
Alternate: first running again in the opposite direction to run, and continued to run alternately;
Alternate-Reverse: to reverse direction run again positive the direction of running, and continue alternating operation.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3animation属性详解（三）</title>
<style type="text/css">
div{
font-family: arial;
font-size: 72px;
font-weight: bold;
position: fixed;
right: 0;
left: 0;
bottom: 20px;
width: 30px;
height: 30px;
margin: auto;
transform: rotate(90deg);
animation: gt 1s linear .5s infinite alternate;
}
@keyframes gt{
from{bottom: 20px;}
to{bottom: 50px;}
}
</style>
</head>
<body>
<div>></div>
</body>
</html>
