Home > Article > Web Front-end > Summary of CSS knowledge (9)

Summary of CSS knowledge (9)

WBOYOriginal: 2016-08-18 08:57:581178browse

Common CSS styles

10. Custom animation

　1)keyframes（keyframes）

　　 are called keyframes, which are similar to keyframes in Flash.

　　 In CSS3, it mainly starts with "@keyframes", followed by the animation name plus a pair of curly brackets "{...}". In the brackets are some style rules for different time periods.

　 Syntax: @keyframes animationname {keyframes-selector {css-styles;}}

　　animationname:Define the name of the animation.

　　keyframes-selector: Specify the time when the change occurs in percentage, or through the keywords "from" and "to", which are equivalent to 0% and 100%. It is recommended to define a percentageselector.

　　css-styles:With @keyframes rules, you can create animations, which gradually change one set of CSS styles into another set of styles, and can change this set of CSS styles multiple times.

　 Compatibility: Currently, browsers do not support @keyframes rules, so you need to add the prefix "-moz-", "-o-", "-webkit-".

　Example:

<span style="color: #800000;">@-webkit-keyframes FromLeftToRight</span>{   <span style="color: #008000;">/*</span><span style="color: #008000;"> Safari 和 Chrome </span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
    0% {left</span>:<span style="color: #0000ff;">0</span>;}<span style="color: #800000;">
    100% </span>{<span style="color: #ff0000;">left</span>:<span style="color: #0000ff;">800px</span>;}<span style="color: #800000;"> 
}
@-moz-keyframes FromLeftToRight</span>{    <span style="color: #008000;">/*</span><span style="color: #008000;"> Firefox </span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
    0% {left</span>:<span style="color: #0000ff;">0</span>;}<span style="color: #800000;">
    100% </span>{<span style="color: #ff0000;">left</span>:<span style="color: #0000ff;">800px</span>;}<span style="color: #800000;"> 
}
@-o-keyframes FromLeftToRight</span>{      <span style="color: #008000;">/*</span><span style="color: #008000;"> Opera </span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
    0% {left</span>:<span style="color: #0000ff;">0</span>;}<span style="color: #800000;">
    100% </span>{<span style="color: #ff0000;">left</span>:<span style="color: #0000ff;">800px</span>;}<span style="color: #800000;"> 
}
@keyframes FromLeftToRight</span>{<span style="color: #ff0000;"> 
    0% {left</span>:<span style="color: #0000ff;">0</span>;}<span style="color: #800000;">
    100% </span>{<span style="color: #ff0000;">left</span>:<span style="color: #0000ff;">800px</span>;}<span style="color: #800000;"> 
}</span>

　2)animation name(animation-name)

　 The animation name applied to the element must be used in conjunction with the rule @keyframes, because the animation name is defined by @keyframes.

　 animation-name: none |

　　: Define one or more animation names. If there are multiple animation names, separate them with commas.

　Example:

<span style="color: #800000;">div</span>{<span style="color: #ff0000;">
    -webkit-animation-name</span>:<span style="color: #0000ff;">FromLeftToRight</span>;<span style="color: #ff0000;">
    -moz-animation-name</span>:<span style="color: #0000ff;">FromLeftToRight</span>;<span style="color: #ff0000;">
    -o-animation-name</span>:<span style="color: #0000ff;">FromLeftToRight</span>;<span style="color: #ff0000;">
    animation-name</span>:<span style="color: #0000ff;">FromLeftToRight</span>;
}<span style="color: #800000;">
@-webkit-keyframes FromLeftToRight</span>{<span style="color: #ff0000;">
    0% {left</span>:<span style="color: #0000ff;">0</span>;}<span style="color: #800000;">
    100% </span>{<span style="color: #ff0000;">left</span>:<span style="color: #0000ff;">800px</span>;}<span style="color: #800000;"> 
}
@-moz-keyframes FromLeftToRight</span>{<span style="color: #ff0000;">
    0% {left</span>:<span style="color: #0000ff;">0</span>;}<span style="color: #800000;">
    100% </span>{<span style="color: #ff0000;">left</span>:<span style="color: #0000ff;">800px</span>;}<span style="color: #800000;"> 
}
@-o-keyframes FromLeftToRight</span>{<span style="color: #ff0000;">
    0% {left</span>:<span style="color: #0000ff;">0</span>;}<span style="color: #800000;">
    100% </span>{<span style="color: #ff0000;">left</span>:<span style="color: #0000ff;">800px</span>;}<span style="color: #800000;"> 
}
@keyframes FromLeftToRight</span>{<span style="color: #ff0000;"> 
    0% {left</span>:<span style="color: #0000ff;">0</span>;}<span style="color: #800000;">
    100% </span>{<span style="color: #ff0000;">left</span>:<span style="color: #0000ff;">800px</span>;}<span style="color: #800000;"> 
}</span>

　3)animation time(animation-duration)

　Specify the duration of object animation

　 animation-duration：

　Example source code:

<span style="color: #008000;">/*</span><span style="color: #008000;"> CSS代码 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
.duration</span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;">100px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;">100px</span>;<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;">#000</span>;<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;">relative</span>;<span style="color: #ff0000;">
    -webkit-animation-name</span>:<span style="color: #0000ff;">FromLeftToRight</span>;<span style="color: #ff0000;">
    -webkit-animation-duration</span>:<span style="color: #0000ff;">3s</span>;<span style="color: #ff0000;">
    -moz-animation-name</span>:<span style="color: #0000ff;">FromLeftToRight</span>;<span style="color: #ff0000;">
    -moz-animation-duration</span>:<span style="color: #0000ff;">3s</span>;<span style="color: #ff0000;">
    animation-name</span>:<span style="color: #0000ff;">FromLeftToRight</span>;<span style="color: #ff0000;">
    animation-duration</span>:<span style="color: #0000ff;">3s</span>;
}<span style="color: #800000;">
@-webkit-keyframes FromLeftToRight</span>{<span style="color: #ff0000;">
    0% {left</span>:<span style="color: #0000ff;">0</span>;}<span style="color: #800000;">
    100% </span>{<span style="color: #ff0000;">left</span>:<span style="color: #0000ff;">500px</span>;}<span style="color: #800000;"> 
}
@-moz-keyframes FromLeftToRight</span>{<span style="color: #ff0000;">
    0% {left</span>:<span style="color: #0000ff;">0</span>;}<span style="color: #800000;">
    100% </span>{<span style="color: #ff0000;">left</span>:<span style="color: #0000ff;">500px</span>;}<span style="color: #800000;"> 
}
@keyframes FromLeftToRight</span>{<span style="color: #ff0000;"> 
    0% {left</span>:<span style="color: #0000ff;">0</span>;}<span style="color: #800000;">
    100% </span>{<span style="color: #ff0000;">left</span>:<span style="color: #0000ff;">500px</span>;}<span style="color: #800000;"> 
}</span>

<span style="color: #008000;"><!--</span><span style="color: #008000;"> HTML代码 </span><span style="color: #008000;">--></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>请按F5刷新动画（矩形用3秒向右移动500px）<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="duration"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>

Effect:

Please press F5 to refresh the animation (the rectangle moves 500px to the right in 3 seconds)

　　4）动画的过渡速度（animation-timing-function）

　　　　①ease : 默认值，逐渐变慢(等于 cubic-bezier(0.25,0.1,0.25,1))

　　　　②linear : 匀速过渡效果(等于 cubic-bezier(0,0,1,1))

　　　　③ease-in : 加速的过渡效果(等于 cubic-bezier(0.42,0,1,1))

　　　　④ease-out : 减速的过渡效果(等于 cubic-bezier(0,0,0.58,1))

　　　　⑤ease-in-out : 加速然后减速(等于cubic-bezier (0.42, 0, 0.58, 1))

　　　　⑥cubic-bezier(n,n,n,n)：在 cubic-bezier 函数中定义自己的值，可能的值是 0 至 1 之间的数值。

　　例子源代码：

<span style="color: #008000;">/*</span><span style="color: #008000;"> CSS代码 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
.function</span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;">100px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;">100px</span>;<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;">#ccc</span>;<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;">relative</span>;<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;">5px</span>;<span style="color: #ff0000;">
    -webkit-animation-name</span>:<span style="color: #0000ff;">FromLeftToRight</span>;<span style="color: #ff0000;">
    -webkit-animation-duration</span>:<span style="color: #0000ff;">3s</span>;<span style="color: #ff0000;">
    -moz-animation-name</span>:<span style="color: #0000ff;">FromLeftToRight</span>;<span style="color: #ff0000;">
    -moz-animation-duration</span>:<span style="color: #0000ff;">3s</span>;<span style="color: #ff0000;">
    animation-name</span>:<span style="color: #0000ff;">FromLeftToRight</span>;<span style="color: #ff0000;">
    animation-duration</span>:<span style="color: #0000ff;">3s</span>;
}<span style="color: #800000;">
.ease-in</span>{<span style="color: #ff0000;">
    -webkit-animation-timing-function</span>:<span style="color: #0000ff;">ease-in</span>;<span style="color: #ff0000;">
    -moz-animation-timing-function</span>:<span style="color: #0000ff;">ease-in</span>;<span style="color: #ff0000;">
    animation-timing-function</span>:<span style="color: #0000ff;">ease-in</span>;
}<span style="color: #800000;">
.ease-out</span>{<span style="color: #ff0000;">
    -webkit-animation-timing-function</span>:<span style="color: #0000ff;">ease-out</span>;<span style="color: #ff0000;">
    -moz-animation-timing-function</span>:<span style="color: #0000ff;">ease-out</span>;<span style="color: #ff0000;">
    animation-timing-function</span>:<span style="color: #0000ff;">ease-out</span>;
}<span style="color: #800000;">
@-webkit-keyframes FromLeftToRight</span>{<span style="color: #ff0000;">
    0% {left</span>:<span style="color: #0000ff;">0</span>;}<span style="color: #800000;">
    100% </span>{<span style="color: #ff0000;">left</span>:<span style="color: #0000ff;">500px</span>;}<span style="color: #800000;"> 
}
@-moz-keyframes FromLeftToRight</span>{<span style="color: #ff0000;">
    0% {left</span>:<span style="color: #0000ff;">0</span>;}<span style="color: #800000;">
    100% </span>{<span style="color: #ff0000;">left</span>:<span style="color: #0000ff;">500px</span>;}<span style="color: #800000;"> 
}
@keyframes FromLeftToRight</span>{<span style="color: #ff0000;"> 
    0% {left</span>:<span style="color: #0000ff;">0</span>;}<span style="color: #800000;">
    100% </span>{<span style="color: #ff0000;">left</span>:<span style="color: #0000ff;">500px</span>;}<span style="color: #800000;"> 
}</span>

<span style="color: #008000;"><!--</span><span style="color: #008000;"> HTML代码 </span><span style="color: #008000;">--></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>请按F5刷新动画（两个矩形同样在3秒用不同的速率向右移动500px）<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="function ease-in"</span><span style="color: #0000ff;">></span>ease-in<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="function ease-out"</span><span style="color: #0000ff;">></span>ease-out<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>

　　效果：

请按F5刷新动画（两个矩形同样在3秒用不同的速率向右移动500px）

ease-in

ease-out

　　5）动画延迟时间（animation-delay）

　　　　指定对象动画延迟的时间

　　　　animation-delay：

　　例子源代码：

<span style="color: #008000;">/*</span><span style="color: #008000;"> CSS代码 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
.delay</span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;">100px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;">100px</span>;<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;">#000</span>;<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;">relative</span>;<span style="color: #ff0000;">
    -webkit-animation-name</span>:<span style="color: #0000ff;">FromLeftToRight</span>;<span style="color: #ff0000;">
    -webkit-animation-duration</span>:<span style="color: #0000ff;">3s</span>;<span style="color: #ff0000;">
    -webkit-animation-delay</span>:<span style="color: #0000ff;">2s</span>;<span style="color: #ff0000;">
    -moz-animation-name</span>:<span style="color: #0000ff;">FromLeftToRight</span>;<span style="color: #ff0000;">
    -moz-animation-duration</span>:<span style="color: #0000ff;">3s</span>;<span style="color: #ff0000;">
    -moz-animation-delay</span>:<span style="color: #0000ff;">2s</span>;<span style="color: #ff0000;">
    animation-name</span>:<span style="color: #0000ff;">FromLeftToRight</span>;<span style="color: #ff0000;">
    animation-duration</span>:<span style="color: #0000ff;">3s</span>;<span style="color: #ff0000;">
    animation-delay</span>:<span style="color: #0000ff;">2s</span>;
}<span style="color: #800000;">
@-webkit-keyframes FromLeftToRight</span>{<span style="color: #ff0000;">
    0% {left</span>:<span style="color: #0000ff;">0</span>;}<span style="color: #800000;">
    100% </span>{<span style="color: #ff0000;">left</span>:<span style="color: #0000ff;">500px</span>;}<span style="color: #800000;"> 
}
@-moz-keyframes FromLeftToRight</span>{<span style="color: #ff0000;">
    0% {left</span>:<span style="color: #0000ff;">0</span>;}<span style="color: #800000;">
    100% </span>{<span style="color: #ff0000;">left</span>:<span style="color: #0000ff;">500px</span>;}<span style="color: #800000;"> 
}
@keyframes FromLeftToRight</span>{<span style="color: #ff0000;"> 
    0% {left</span>:<span style="color: #0000ff;">0</span>;}<span style="color: #800000;">
    100% </span>{<span style="color: #ff0000;">left</span>:<span style="color: #0000ff;">500px</span>;}<span style="color: #800000;"> 
}</span>

<span style="color: #008000;"><!--</span><span style="color: #008000;"> HTML代码 </span><span style="color: #008000;">--></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>请按F5刷新动画（刷新后请等待2秒启动动画）<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="delay"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>

　　效果：

请按F5刷新动画（刷新后请等待2秒启动动画）

　　6）动画执行次数（animation-iteration-count）

　　　　animation-iteration-count：infinite |

　　　　infinite表示无限次数，number指定循环次数。

　　例子源代码：

<span style="color: #008000;">/*</span><span style="color: #008000;"> CSS代码 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
.infinite</span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;">100px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;">100px</span>;<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;">#000</span>;<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;">relative</span>;<span style="color: #ff0000;">
    -webkit-animation-name</span>:<span style="color: #0000ff;">FromLeftToRight</span>;<span style="color: #ff0000;">
    -webkit-animation-duration</span>:<span style="color: #0000ff;">3s</span>;<span style="color: #ff0000;">
    -webkit-animation-iteration-count</span>:<span style="color: #0000ff;">infinite</span>;<span style="color: #ff0000;"> 
    -moz-animation-name</span>:<span style="color: #0000ff;">FromLeftToRight</span>;<span style="color: #ff0000;">
    -moz-animation-duration</span>:<span style="color: #0000ff;">3s</span>;<span style="color: #ff0000;">
    -moz-animation-iteration-count</span>:<span style="color: #0000ff;">infinite</span>;<span style="color: #ff0000;"> 
    animation-name</span>:<span style="color: #0000ff;">FromLeftToRight</span>;<span style="color: #ff0000;">
    animation-duration</span>:<span style="color: #0000ff;">3s</span>;<span style="color: #ff0000;">
    animation-iteration-count</span>:<span style="color: #0000ff;">infinite</span>;
}<span style="color: #800000;">
@-webkit-keyframes FromLeftToRight</span>{<span style="color: #ff0000;">
    0% {left</span>:<span style="color: #0000ff;">0</span>;}<span style="color: #800000;">
    100% </span>{<span style="color: #ff0000;">left</span>:<span style="color: #0000ff;">500px</span>;}<span style="color: #800000;"> 
}
@-moz-keyframes FromLeftToRight</span>{<span style="color: #ff0000;">
    0% {left</span>:<span style="color: #0000ff;">0</span>;}<span style="color: #800000;">
    100% </span>{<span style="color: #ff0000;">left</span>:<span style="color: #0000ff;">500px</span>;}<span style="color: #800000;"> 
}
@keyframes FromLeftToRight</span>{<span style="color: #ff0000;"> 
    0% {left</span>:<span style="color: #0000ff;">0</span>;}<span style="color: #800000;">
    100% </span>{<span style="color: #ff0000;">left</span>:<span style="color: #0000ff;">500px</span>;}<span style="color: #800000;"> 
}</span>

<span style="color: #008000;"><!--</span><span style="color: #008000;"> HTML代码 </span><span style="color: #008000;">--></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>动画全自动无限循环播放<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="infinite"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>

　　效果：

动画全自动无限循环播放

　　7）动画的顺序（animation-direction）

　　　　设置对象动画在循环中是否反向运动

　　　　animation-direction : normal | reverse | alternate | alternate-reverse

　　　　normal：正常方向

　　　　reverse：反方向运行

　　　　alternate：动画先正常运行再反方向运行，并持续交替运行

　　　　alternate-reverse：动画先反运行再正方向运行，并持续交替运行

　　例子源代码：

<span style="color: #008000;">/*</span><span style="color: #008000;"> CSS代码 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
.box</span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;">100px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;">50px</span>;<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;">#ccc</span>;<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;">5px</span>;<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;">relative</span>;<span style="color: #ff0000;">
    -webkit-animation-name</span>:<span style="color: #0000ff;">FormLeftToRight</span>;<span style="color: #ff0000;">
    -moz-animation-name</span>:<span style="color: #0000ff;">FormLeftToRight</span>;<span style="color: #ff0000;">
    animation-name</span>:<span style="color: #0000ff;">FormLeftToRight</span>;<span style="color: #ff0000;">
    -webkit-animation-duration</span>:<span style="color: #0000ff;">5s</span>;<span style="color: #ff0000;">
    -moz-animation-duration</span>:<span style="color: #0000ff;">5s</span>;<span style="color: #ff0000;">
    animation-duration</span>:<span style="color: #0000ff;">5s</span>;<span style="color: #ff0000;">
    -webkit-animation-iteration-count</span>:<span style="color: #0000ff;">infinite</span>;<span style="color: #ff0000;">
    -moz-animation-iteration-count</span>:<span style="color: #0000ff;">infinite</span>;<span style="color: #ff0000;">
    animation-iteration-count</span>:<span style="color: #0000ff;">infinite</span>;
}<span style="color: #800000;">
.reverse</span>{<span style="color: #ff0000;">
    -webkit-animation-direction</span>:<span style="color: #0000ff;">reverse</span>;<span style="color: #ff0000;">
    -moz-animation-direction</span>:<span style="color: #0000ff;">reverse</span>;<span style="color: #ff0000;">
    animation-direction</span>:<span style="color: #0000ff;">reverse</span>;
}<span style="color: #800000;">
.alternate</span>{<span style="color: #ff0000;">
    -webkit-animation-direction</span>:<span style="color: #0000ff;">alternate</span>;<span style="color: #ff0000;">
    -moz-animation-direction</span>:<span style="color: #0000ff;">alternate</span>;<span style="color: #ff0000;">
    animation-direction</span>:<span style="color: #0000ff;">alternate</span>;
}<span style="color: #800000;">
.alternate-reverse</span>{<span style="color: #ff0000;">
    -webkit-animation-direction</span>:<span style="color: #0000ff;">alternate-reverse</span>;<span style="color: #ff0000;">
    -moz-animation-direction</span>:<span style="color: #0000ff;">alternate-reverse</span>;<span style="color: #ff0000;">
    animation-direction</span>:<span style="color: #0000ff;">alternate-reverse</span>;
}<span style="color: #800000;">
@-webkit-keyframes FormLeftToRight</span>{<span style="color: #ff0000;">
    0%{left</span>:<span style="color: #0000ff;">0</span>;}<span style="color: #800000;">
    100%</span>{<span style="color: #ff0000;">left</span>:<span style="color: #0000ff;">500px</span>;}<span style="color: #800000;">
}
@-moz-keyframes FormLeftToRight</span>{<span style="color: #ff0000;">
    0%{left</span>:<span style="color: #0000ff;">0</span>;}<span style="color: #800000;">
    100%</span>{<span style="color: #ff0000;">left</span>:<span style="color: #0000ff;">500px</span>;}<span style="color: #800000;">
}
@keyframes FormLeftToRight</span>{<span style="color: #ff0000;">
    0%{left</span>:<span style="color: #0000ff;">0</span>;}<span style="color: #800000;">
    100%</span>{<span style="color: #ff0000;">left</span>:<span style="color: #0000ff;">500px</span>;}<span style="color: #800000;">
}</span>

 <span style="color: #008000;"><!--</span><span style="color: #008000;"> HTML代码 </span><span style="color: #008000;">--></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>四种不同的顺序<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="box"</span><span style="color: #0000ff;">></span>normal<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="box reverse"</span><span style="color: #0000ff;">></span>reverse<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="box alternate"</span><span style="color: #0000ff;">></span>alternate<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="box alternate-reverse"</span><span style="color: #0000ff;">></span>alternate-reverse<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>

　　效果：

四种不同的顺序

normal

reverse

alternate

alternate-reverse

　　8）动画的状态（animation-play-state）

　　　　设置对象动画的状态

　　　　animation-play-state：running | paused

　　　　running：运动

　　　　paused：暂停

　　例子源代码：

<span style="color: #008000;">/*</span><span style="color: #008000;"> CSS代码 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
.state</span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;">100px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;">100px</span>;<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;">#000</span>;<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;">relative</span>;<span style="color: #ff0000;">
    -webkit-animation-name</span>:<span style="color: #0000ff;">FromLeftToRight</span>;<span style="color: #ff0000;">
    -webkit-animation-duration</span>:<span style="color: #0000ff;">3s</span>;<span style="color: #ff0000;">
    -webkit-animation-iteration-count</span>:<span style="color: #0000ff;">infinite</span>;<span style="color: #ff0000;"> 
    -moz-animation-name</span>:<span style="color: #0000ff;">FromLeftToRight</span>;<span style="color: #ff0000;">
    -moz-animation-duration</span>:<span style="color: #0000ff;">3s</span>;<span style="color: #ff0000;">
    -moz-animation-iteration-count</span>:<span style="color: #0000ff;">infinite</span>;<span style="color: #ff0000;"> 
    animation-name</span>:<span style="color: #0000ff;">FromLeftToRight</span>;<span style="color: #ff0000;">
    animation-duration</span>:<span style="color: #0000ff;">3s</span>;<span style="color: #ff0000;">
    animation-iteration-count</span>:<span style="color: #0000ff;">infinite</span>;
}<span style="color: #800000;">
.state:hover</span>{<span style="color: #ff0000;">
    -webkit-animation-play-state</span>:<span style="color: #0000ff;">paused</span>;<span style="color: #ff0000;">
    -moz-animation-play-state</span>:<span style="color: #0000ff;">paused</span>;<span style="color: #ff0000;">
    animation-play-state</span>:<span style="color: #0000ff;">paused</span>;
}<span style="color: #800000;">
@-webkit-keyframes FromLeftToRight</span>{<span style="color: #ff0000;">
    0% {left</span>:<span style="color: #0000ff;">0</span>;}<span style="color: #800000;">
    100% </span>{<span style="color: #ff0000;">left</span>:<span style="color: #0000ff;">500px</span>;}<span style="color: #800000;"> 
}
@-moz-keyframes FromLeftToRight</span>{<span style="color: #ff0000;">
    0% {left</span>:<span style="color: #0000ff;">0</span>;}<span style="color: #800000;">
    100% </span>{<span style="color: #ff0000;">left</span>:<span style="color: #0000ff;">500px</span>;}<span style="color: #800000;"> 
}
@keyframes FromLeftToRight</span>{<span style="color: #ff0000;"> 
    0% {left</span>:<span style="color: #0000ff;">0</span>;}<span style="color: #800000;">
    100% </span>{<span style="color: #ff0000;">left</span>:<span style="color: #0000ff;">500px</span>;}<span style="color: #800000;"> 
}</span>

<span style="color: #008000;"><!--</span><span style="color: #008000;"> HTML代码 </span><span style="color: #008000;">--></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>鼠标移动到矩形上可以暂停动画<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="state"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>

　　效果：

鼠标移动到矩形上可以暂停动画

　　9）动画时间之外的状态（animation-fill-mode）

　　　　设置对象动画时间之外的状态

　　　　animation-fill-mode ： none | forwards | backwards | both

　　　　none：默认值。不设置对象动画之外的状态

　　　　forwards：设置对象状态为动画结束时的状态

　　　　backwards：设置对象状态为动画开始时的状态

　　　　both：设置对象状态为动画结束或开始的状态

　　例子源代码：

<span style="color: #008000;">/*</span><span style="color: #008000;"> CSS代码 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
.mode</span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;">100px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;">100px</span>;<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;">#000</span>;<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;">relative</span>;<span style="color: #ff0000;">
    -webkit-animation-name</span>:<span style="color: #0000ff;">FromLeftToRight</span>;<span style="color: #ff0000;">
    -webkit-animation-duration</span>:<span style="color: #0000ff;">3s</span>;<span style="color: #ff0000;">
    -webkit-animation-fill-mode</span>:<span style="color: #0000ff;">forwards</span>;<span style="color: #ff0000;">
    -moz-animation-name</span>:<span style="color: #0000ff;">FromLeftToRight</span>;<span style="color: #ff0000;">
    -moz-animation-duration</span>:<span style="color: #0000ff;">3s</span>;<span style="color: #ff0000;">
    -moz-animation-fill-mode</span>:<span style="color: #0000ff;">forwards</span>;<span style="color: #ff0000;">
    animation-name</span>:<span style="color: #0000ff;">FromLeftToRight</span>;<span style="color: #ff0000;">
    animation-duration</span>:<span style="color: #0000ff;">3s</span>;<span style="color: #ff0000;">
    animation-fill-mode</span>:<span style="color: #0000ff;">forwards</span>;
}<span style="color: #800000;">
@-webkit-keyframes FromLeftToRight</span>{<span style="color: #ff0000;">
    0% {left</span>:<span style="color: #0000ff;">0</span>;}<span style="color: #800000;">
    100% </span>{<span style="color: #ff0000;">left</span>:<span style="color: #0000ff;">500px</span>;}<span style="color: #800000;"> 
}
@-moz-keyframes FromLeftToRight</span>{<span style="color: #ff0000;">
    0% {left</span>:<span style="color: #0000ff;">0</span>;}<span style="color: #800000;">
    100% </span>{<span style="color: #ff0000;">left</span>:<span style="color: #0000ff;">500px</span>;}<span style="color: #800000;"> 
}
@keyframes FromLeftToRight</span>{<span style="color: #ff0000;"> 
    0% {left</span>:<span style="color: #0000ff;">0</span>;}<span style="color: #800000;">
    100% </span>{<span style="color: #ff0000;">left</span>:<span style="color: #0000ff;">500px</span>;}<span style="color: #800000;"> 
}</span>

<span style="color: #008000;"><!--</span><span style="color: #008000;"> HTML代码 </span><span style="color: #008000;">--></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>请按F5刷新动画（动画结束后停在结束位置）<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="mode"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>

　　效果：

请按F5刷新动画（动画结束后停在结束位置）

　　10）动画复合属性（animation）

　　　　通过 animation ，我们能够创建自定义动画，这可以在许多网页中取代动画图片gif、Flash 动画以及 JavaScript。

　　　　animation： || || || || || || || [ ,*]

　　利用学过的动画样式，制作一个下滑菜单栏

　　源代码：

<span style="color: #008000;">/*</span><span style="color: #008000;"> CSS代码 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
.dropmenu</span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;">100px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;">30px</span>;<span style="color: #ff0000;">
    line-height</span>:<span style="color: #0000ff;">30px</span>;<span style="color: #ff0000;">
    text-align</span>:<span style="color: #0000ff;">center</span>;<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;">green</span>;<span style="color: #ff0000;">
    border-radius</span>:<span style="color: #0000ff;">10px</span>;<span style="color: #ff0000;">
    overflow</span>:<span style="color: #0000ff;">hidden</span>;
}<span style="color: #800000;">
.dropmenu a</span>{<span style="color: #ff0000;">
    font-family</span>:<span style="color: #0000ff;">"微软雅黑"</span>;<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;">18px</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;">#fff</span>;<span style="color: #ff0000;">
    text-decoration</span>:<span style="color: #0000ff;">none</span>;
}<span style="color: #800000;">
.dropmenu ul</span>{<span style="color: #ff0000;">
    list-style-type</span>:<span style="color: #0000ff;">none</span>;<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;">0</span>;<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;">0</span>;
}<span style="color: #800000;">
.dropmenu ul li</span>{<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;">#808080</span>;
}<span style="color: #800000;">
.dropmenu:hover</span>{<span style="color: #ff0000;">
    -webkit-animation-name</span>:<span style="color: #0000ff;">SlideDown</span>;<span style="color: #ff0000;">
    -moz-animation-name</span>:<span style="color: #0000ff;">SlideDown</span>;<span style="color: #ff0000;">
    animation-name</span>:<span style="color: #0000ff;">SlideDown</span>;<span style="color: #ff0000;">
    -webkit-animation-duration</span>:<span style="color: #0000ff;">1s</span>;<span style="color: #ff0000;">
    -moz-animation-duration</span>:<span style="color: #0000ff;">1s</span>;<span style="color: #ff0000;">
    animation-duration</span>:<span style="color: #0000ff;">1s</span>;<span style="color: #ff0000;">
    -webkit-animation-fill-mode</span>:<span style="color: #0000ff;">forwards</span>;<span style="color: #ff0000;">
    -moz-animation-fill-mode</span>:<span style="color: #0000ff;">forwards</span>;<span style="color: #ff0000;">
    animation-fill-mode</span>:<span style="color: #0000ff;">forwards</span>;
}<span style="color: #800000;">
@-webkit-keyframes SlideDown</span>{<span style="color: #ff0000;">
    0% {height</span>:<span style="color: #0000ff;">30px</span>;}<span style="color: #800000;">
    100% </span>{<span style="color: #ff0000;">height</span>:<span style="color: #0000ff;">155px</span>;}<span style="color: #800000;">
}
@-moz-keyframes SlideDown</span>{<span style="color: #ff0000;">
    0% {height</span>:<span style="color: #0000ff;">30px</span>;}<span style="color: #800000;">
    100% </span>{<span style="color: #ff0000;">height</span>:<span style="color: #0000ff;">155px</span>;}<span style="color: #800000;">
}
@keyframes SlideDown</span>{<span style="color: #ff0000;">
    0% {height</span>:<span style="color: #0000ff;">30px</span>;}<span style="color: #800000;">
    100% </span>{<span style="color: #ff0000;">height</span>:<span style="color: #0000ff;">155px</span>;}<span style="color: #800000;">
}</span>

<span style="color: #008000;"><!--</span><span style="color: #008000;"> HTML代码 </span><span style="color: #008000;">--></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="dropmenu"</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="###"</span><span style="color: #0000ff;">></span>菜单栏<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="###"</span><span style="color: #0000ff;">></span>AAA<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="###"</span><span style="color: #0000ff;">></span>AAA<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="###"</span><span style="color: #0000ff;">></span>AAA<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="###"</span><span style="color: #0000ff;">></span>AAA<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"></</span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>

　　效果：

菜单栏

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：【CSS】Create layoutNext article：【CSS】Create layout

See more

Summary of CSS knowledge (9)

Common CSS styles

10. Custom animation

Related articles