Community Learn Tools Library Leisure
search
English
Home > Web Front-end > HTML Tutorial > Summary of CSS knowledge (9)

Summary of CSS knowledge (9)

WBOY
Release： 2016-08-18 08:57:58
Original
1210 people have browsed it

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>
Copy after login

　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>
Copy after login

　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>
Copy after login
<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>
Copy after login

Effect:

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

 

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

　　　　animation-timing-function : ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n)

　　　　①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>
Copy after login
<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>
Copy after login

　　效果：

请按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>
Copy after login
<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>
Copy after login

　　效果：

请按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>
Copy after login
<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>
Copy after login

　　效果：

动画全自动无限循环播放

 

 

 

 　　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>
Copy after login

 

 <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>
Copy after login

　　效果：

四种不同的顺序

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>
Copy after login
<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>
Copy after login

　　效果：

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

 

 

 

 

 　　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>
Copy after login
<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>
Copy after login

　　效果：

请按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>
Copy after login
<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>
Copy after login

 　　效果：

菜单栏
  • AAA
  • AAA
  • AAA
  • AAA

 

　　

 

 

 

　　　　

Related labels：
CSS知识总结（九）
source：php.cn
Previous article：【CSS】Create layout Next article：CSS positioning: relative positioning, absolute positioning and fixed positioning (relative absolute fixed)
Statement of this Website
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
Latest Articles by Author
Latest Issues
function_exists() cannot determine the custom function Function test () {return true;} if (function_exists ('test')) {echo "test is function...
From 2024-04-29 11:01:01
0
3
2313
How to display the mobile version of Google Chrome Hello teacher, how can I change Google Chrome into a mobile version?
From 2024-04-23 00:22:19
0
11
2448
The child window operates the parent window, but the output does not respond. The first two sentences are executable, but the last sentence cannot be implemented.
From 2024-04-19 15:37:47
0
1
2064
There is no output in the parent window document.onclick = function(){ window.opener.document.write('I am the output of the child ...
From 2024-04-18 23:52:34
0
1
1949
Where is the courseware about CSS mind mapping? Courseware
From 2024-04-16 10:10:18
0
0
2015
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template