CSS 动画

CSS动画属性用于
在网页上创建动画。它可以替代Flash和JavaScript创建的动画。

CSS3 @keyframes规则

动画是在@keyframe规则中创建的。它用于控制CSS动画序列中的中间步骤。

动画的作用

动画
使元素逐渐从一种样式更改为。您可以添加要添加的属性。您还可以指定百分比的变化。0％指定动画的开始，而100％指定动画的完成。

CSS动画的工作方式

动画时是在@keyframe规则中创建的，必须与选择器绑定；否则动画将无效。

可以通过至少指定以下两个属性将动画绑定到选择器：

动画名称
动画的持续时间

CSS动画属性

属性	说明
@keyframes	它用于指定动画。
animation	这是一个简写属性，用于设置除animation-play-state和animation-fill-mode属性之外的所有属性。
animation-delay	它指定动画何时开始。
animation-direction	它指定动画是否应在备用周期中保留播放。
animation-duration	它指定动画完成一个周期所花费的时间。
animation-fill-mode	它指定元素的静态样式。（当动画不播放时）
animation-iteration-count	它指定动画播放的次数。
animation-play-state	它指定动画是正在运行还是暂停。
animation-name	它指定@keyframes动画的名称。
animation-timing-function	它指定动画的速度曲线。

CSS动画示例：更改背景颜色

让我们看一个简单的CSS动画示例，该示例将矩形的背景颜色从RED更改为BLACK。

 <!DOCTYPE html>
 <html>
 <head>
 <style> 
 div {
     width: 100px;
     height: 100px;
     background: red;
     -webkit-animation: myfirst 6s; /* Chrome, Safari, Opera */
     animation: myfirst 5s;
 }
 /* Chrome, Safari, Opera */
 @-webkit-keyframes myfirst {
     from {background: red;}
     to {background: green;}
 }
 /* Standard syntax */
 @keyframes myfirst {
     from {background: red;}
     to {background: green;}
 }
 </style>
 </head>
 <body>
 <p><b>Note:</b> The IE 9 and earlier versions don't support CSS3 animation property. </p>
 <div></div>
 </body>
 </html>

输出

CSS 动画_https://bianchenghao6.com_【CSS 教程】_第1张

CSS动画示例：移动矩形

让我们再举一个示例来显示具有百分比值的动画。

 <!DOCTYPE html>
 <html>
 <head>
 <style> 
 div {
     width: 100px;
     height: 100px;
     background: red;
     position: relative;
     -webkit-animation: myfirst 5s; /* Chrome, Safari, Opera */
     animation: myfirst 5s;
 }
 /* Chrome, Safari, Opera */
 @-webkit-keyframes myfirst {
     0% {background:red; left:0px; top:0px;}
     25% {background:yellow; left:300px; top:0px;}
     50% {background:blue; left:200px; top:300px;}
     75% {background:green; left:0px; top:200px;}
     100% {background:red; left:0px; top:0px;}
 }
 /* Standard syntax */
 @keyframes myfirst {
     0% {background:red; left:0px; top:0px;}
     25% {background:yellow; left:300px; top:0px;}
     50% {background:blue; left:300px; top:200px;}
     75% {background:green; left:0px; top:200px;}
     100% {background:red; left:0px; top:0px;}
 }
 </style>
 </head>
 <body>
 <p><b>Note:</b> The Internet Explorer 9 and its earlier versions don't support this example.</p>
 <div></div>
 </body>
 </html>

输出

CSS 动画_https://bianchenghao6.com_【CSS 教程】_第2张

CSS 过渡

CSS quotes