Summary of CSS knowledge (9)-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

Summary of CSS knowledge (9)

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Aug 18, 2016 am 08:57 AM

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 style="color: #800000;">body</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><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 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></span></span></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 style="color: #800000;">body</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><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 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 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></span></span></span></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 style="color: #800000;">body</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><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 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></span></span></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 style="color: #800000;">body</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><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 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></span></span></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 style="color: #800000;">body</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><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 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 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 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 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></span></span></span></span></span></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 style="color: #800000;">body</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><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 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></span></span></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 style="color: #800000;">body</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><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 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></span></span></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 style="color: #800000;">body</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><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 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 style="color: #800000;">ul</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">><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 style="color: #800000;">li</span><span style="color: #0000ff;">><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 style="color: #800000;">li</span><span style="color: #0000ff;">><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 style="color: #800000;">li</span><span style="color: #0000ff;">><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></span></span></span></span></span></span></span></span></span></span></span></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

The Future of HTML, CSS, and JavaScript: Web Development TrendsApr 19, 2025 am 12:02 AM

The future trends of HTML are semantics and web components, the future trends of CSS are CSS-in-JS and CSSHoudini, and the future trends of JavaScript are WebAssembly and Serverless. 1. HTML semantics improve accessibility and SEO effects, and Web components improve development efficiency, but attention should be paid to browser compatibility. 2. CSS-in-JS enhances style management flexibility but may increase file size. CSSHoudini allows direct operation of CSS rendering. 3.WebAssembly optimizes browser application performance but has a steep learning curve, and Serverless simplifies development but requires optimization of cold start problems.

HTML: The Structure, CSS: The Style, JavaScript: The BehaviorApr 18, 2025 am 12:09 AM

The roles of HTML, CSS and JavaScript in web development are: 1. HTML defines the web page structure, 2. CSS controls the web page style, and 3. JavaScript adds dynamic behavior. Together, they build the framework, aesthetics and interactivity of modern websites.

The Future of HTML: Evolution and Trends in Web DesignApr 17, 2025 am 12:12 AM

The future of HTML is full of infinite possibilities. 1) New features and standards will include more semantic tags and the popularity of WebComponents. 2) The web design trend will continue to develop towards responsive and accessible design. 3) Performance optimization will improve the user experience through responsive image loading and lazy loading technologies.

HTML vs. CSS vs. JavaScript: A Comparative OverviewApr 16, 2025 am 12:04 AM

The roles of HTML, CSS and JavaScript in web development are: HTML is responsible for content structure, CSS is responsible for style, and JavaScript is responsible for dynamic behavior. 1. HTML defines the web page structure and content through tags to ensure semantics. 2. CSS controls the web page style through selectors and attributes to make it beautiful and easy to read. 3. JavaScript controls web page behavior through scripts to achieve dynamic and interactive functions.

HTML: Is It a Programming Language or Something Else?Apr 15, 2025 am 12:13 AM

HTMLisnotaprogramminglanguage;itisamarkuplanguage.1)HTMLstructuresandformatswebcontentusingtags.2)ItworkswithCSSforstylingandJavaScriptforinteractivity,enhancingwebdevelopment.

HTML: Building the Structure of Web PagesApr 14, 2025 am 12:14 AM

HTML is the cornerstone of building web page structure. 1. HTML defines the content structure and semantics, and uses, etc. tags. 2. Provide semantic markers, such as, etc., to improve SEO effect. 3. To realize user interaction through tags, pay attention to form verification. 4. Use advanced elements such as, combined with JavaScript to achieve dynamic effects. 5. Common errors include unclosed labels and unquoted attribute values, and verification tools are required. 6. Optimization strategies include reducing HTTP requests, compressing HTML, using semantic tags, etc.

From Text to Websites: The Power of HTMLApr 13, 2025 am 12:07 AM

HTML is a language used to build web pages, defining web page structure and content through tags and attributes. 1) HTML organizes document structure through tags, such as,. 2) The browser parses HTML to build the DOM and renders the web page. 3) New features of HTML5, such as, enhance multimedia functions. 4) Common errors include unclosed labels and unquoted attribute values. 5) Optimization suggestions include using semantic tags and reducing file size.

Understanding HTML, CSS, and JavaScript: A Beginner's GuideApr 12, 2025 am 12:02 AM

WebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences.

See all articles