【CSS 28】animations 动画 @keyframes规则延迟动画运行次数反向or交替速度曲线填充模式简写属性

CSS

- - animations 动画

animations 动画

CSS 可实现 HTML 元素的动画效果，而不使用 JavaScript 或 Flash

下面我们将使用到下面的属性：

@keyframes
animation-name
animation-duration
animation-delay
animation-iteration-count
animation-direction
animation-timing-function
animation-fill-mode
animation

动画使元素逐渐从一种样式变为另一种样式
可以随意更改任意数量的 CSS 属性
如需使用 CSS 动画，您必须首先为动画指定一些关键帧
关键帧包含元素在特定时间所拥有的样式

@keyframes 规则
如果您在 @keyframes 规则中指定了 CSS 样式，动画将在特定时间逐渐从当前样式更改为新样式
要使动画生效，必须将动画绑定到某个元素

<!-- 
下面的例子将 "example" 动画绑定到 <div> 元素
动画将持续 4 秒钟，同时将 <div> 元素的背景颜色从 "red" 逐渐改为 "yellow"注意：animation-duration 属性定义需要多长时间才能完成动画
如果未指定 animation-duration 属性，则动画不会发生，因为默认值是 0s（0秒）通过使用关键字 "from" 和 "to"（代表 0％（开始）和 100％（完成）），我们设置了样式何时改变
也可以使用百分比值，通过使用百分比可以根据需要添加任意多个样式更改
-->
<!DOCTYPE html>
<html>
<head>
<style>
div {width: 100px;height: 100px;background-color: red;animation-name: example;animation-duration: 4s;
}@keyframes example {from {background-color: red;}to {background-color: yellow;}
}
</style>
</head>
<body><p>当动画结束后，会变回最初的样式</p><div></div></body>
</html>

酷一点的

/*动画代码*/
@keyframes example {0% {background-color: red;}25% {background-color: yellow;}50% {background-color: blue;}100% {background-color: green;}
}/*应用动画的元素*/
div {width: 100px;height: 100px;background-color: red;animation-name: example;animation-duration: 4s;
}

更酷一点的

div {width: 100px;height: 100px;background-color: red;position: relative;animation-name: example;animation-duration: 4s;
}@keyframes example {0% {background-color: red; left: 0px; top: 0px;}25% {background-color: yellow; left: 200px; top: 0px;}50% {background-color: blue; left: 200px; top: 200px;}75% {background-color: green; left: 0px; top: 200px;}100% {background-color: red; left: 0px; top: 0px;}
}

延迟动画
animation-delay 属性规定动画开始的延迟时间
下面的例子在开始动画前有 2 秒的延迟

div {width: 100px;height: 100px;position: relative;background-color: red;animation-name: example;animation-duration: 4s;animation-delay: 2s;
}@keyframes example {0%   {background-color:red; left:0px; top:0px;}25%  {background-color:yellow; left:200px; top:0px;}50%  {background-color:blue; left:200px; top:200px;}75%  {background-color:green; left:0px; top:200px;}100% {background-color:red; left:0px; top:0px;}
}

负值也是允许的。如果使用负值，则动画将开始播放，如同已播放 N 秒
在下面的例子中，动画将开始播放，就好像它已经播放了 2 秒钟一样

div {width: 100px;height: 100px;position: relative;background-color: red;animation-name: example;animation-duration: 4s;animation-delay: -2s;
}

设置动画应该运行多少次
animation-iteration-count 属性指定动画应运行的次数
下面的例子在停止前把动画运行 3 次

div {width: 100px;height: 100px;position: relative; /*必须开启相对定位，否则div方块就不会进行移动*/background-color: red;animation-name: example;animation-duration: 4s;animation-delay: 2s;animation-iteration-count: 3;
}@keyframes example {0%   {background-color:red; left:0px; top:0px;}25%  {background-color:yellow; left:200px; top:0px;}50%  {background-color:blue; left:200px; top:200px;}75%  {background-color:green; left:0px; top:200px;}100% {background-color:red; left:0px; top:0px;}
}

下面的例子使用值 “infinite” 使动画永远持续下去

div {width: 100px;height: 100px;position: relative; /*必须开启相对定位，否则div方块就不会进行移动*/background-color: red;animation-name: example;animation-duration: 4s;animation-delay: 2s;animation-iteration-count: infinite;
}

反向或交替运行动画
animation-direction 属性指定是向前播放、向后播放还是交替播放动画
animation-direction 属性可接受以下值：

normal
reverse
alternate
alternate-reverse

div {width: 100px;height: 100px;position: relative;background-color: red;animation-name: example;animation-duration: 4s;animation-iteration-count: 2;animation-direction: alternate-reverse;
}

指定动画的速度曲线
animation-timing-function 属性规定动画的速度曲线
animation-timing-function 属性可接受以下值：

ease
linear
ease-in
ease-out
ease-in-out
cubic-bezier(n, n, n, n)

div {width: 100px;height:50px;background-color: red;font-weight: bold;position:relative;animation: mymove 5s infinite;
}#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}@keyframes mymove {from {left: 0px;}to {left: 300px;}
}

指定动画的填充模式
CSS 动画不会在第一个关键帧播放之前或在最后一个关键帧播放之后影响元素
animation-fill-mode 属性能够覆盖这种行为

在不播放动画时（在开始之前，结束之后，或两者都结束时），animation-fill-mode 属性规定目标元素的样式

animation-fill-mode 属性可接受以下值:

none - 默认值，动画在执行之前或之后不会对元素应用任何样式
forwards - 元素将保留由最后一个关键帧设置的样式值（依赖 animation-direction 和 animation-iteration-count）
backwards - 元素将获取由第一个关键帧设置的样式值（取决于 animation-direction），并在动画延迟期间保留该值
both - 动画会同时遵循向前和向后的规则，从而在两个方向上扩展动画属性

<!DOCTYPE html>
<html>
<head>
<style> 
div {width: 100px;height: 100px;background: red;position: relative;animation-name: example;animation-duration: 3s;  animation-delay: 2s;animation-fill-mode: both;
}@keyframes example {from {top: 0px; background-color: yellow;}to {top: 200px; background-color: blue;}
}
</style>
</head>
<body><p>在动画开始之前，让 div 元素获取第一个关键帧设置的样式值，并在动画结束时保留最后一个关键帧的样式值：</p><div></div><p><b>注释：</b>Internet Explorer 9 以及更早的版本不支持 animation-fill-mode 属性。</p></body>
</html>

动画简写属性

div {animation-name: example;animation-duration: 5s;animation-timing-function: linear;animation-delay: 2s;animation-iteration-count: infinite;animation-direction: alternate;
}div {animation: example 5s linear 2s infinite alternate;
}