animation属相详解 - @keyframes 用法 -animation案列- @keyframes 案列
一个完整的css animations 是由俩部分组成的：
- 定义动画的关键帧（运行方式）
- 该动画的声明
@keyframes
css3 中@keyframes 是用来创建动画的，他可以设置多少帧，每个关键帧表示动画过程的一个状态。
语法格式：
@keyframes animationName{
keyframes-selector{css-styles}
}
- animationsName 表示动画的名称，他将作为唯一标识！
- keyframes-selector{css-styles}是关键帧选择器！即当前关键帧要应用到整个动画过程中位置的一个百分比！ from 或者 to! from 代表 0% to 代表100%！
- css-style 定义执行到当前动画帧时，要执行的对应的动画状态！
- 以上三个都是必须的 缺一不可
animation属相
animation 属相描述 动画的 css 声明， 包括指定具体动画以及动画时长等行为！
语法格式
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
<tr>
<td rowspan="2">animation</td>
<td rowspan="2">规定@keyframes 动画的名称</td>
<td>keyframe-name</td>
<td>规定需要绑定到选择器的 keyfram 的名称</td>
</tr>
<tr>
<td>none</td>
<td>规定无动画效果（可用来覆盖级联的动画）</td>
</tr>
<tr>
<td>animation-duration</td>
<td>规定动画完成一个周期所需要花费时间</td>
<td>time 值</td>
<td>以秒或者毫秒计算，默认是0</td>
</tr>
<tr>
<td rowspan="6">animation-timing-function</td>
<td rowspan="6">规定动画运动的曲线</td>
<td>linear</td>
<td>动画从头到尾速度是相同的</td>
</tr>
<tr>
<td>ease</td>
<td>默认值。动画以低速开始，然后加快，在结束之前变慢。</td>
</tr>
<tr>
<td>ease-in</td>
<td>动画以低速开始</td>
</tr>
<tr>
<td>ease-out</td>
<td>动画以低速结束</td>
</tr>
<tr>
<td>ease-in-out</td>
<td>动画以低速开始和结束</td>
</tr>
<tr>
<td>cubic-bezier(n,n,n,n)</td>
<td>在cubic-bezier 函数中定义自己的值。可能的值是 0 到 1 的数值 </td>
</tr>
<tr>
<td>animation-delay</td>
<td>规定动画开始时的延迟， 可选</td>
<td>time 值</td>
<td>以秒或者毫秒计算，默认是0</td>
</tr>
<tr>
<td rowspan="2">animation-iteration-count</td>
<td rowspan="2">规定动画被播放的次数</td>
<td>n</td>
<td>定义动画被播放的次数，默认是 1</td>
</tr>
<tr>
<td>infinite</td>
<td>规定动画无限次循环</td>
</tr>
<tr>
<td rowspan="2">animation-direction</td>
<td rowspan="2">规定动画是否在下个周期，逆向播放</td>
<td>normal</td>
<td>默认值，动画默认播放</td>
</tr>
<tr>
<td>alternate</td>
<td>动画会轮流反向播放</td>
</tr>
<tr>
<td rowspan="2">animation-play-state</td>
<td rowspan="2">规定动画是否正在运行，或者暂停</td>
<td>running</td>
<td>默认值，规定动画正在播放</td>
</tr>
<tr>
<td>paused</td>
<td>规定动画已暂停</td>
</tr>
<tr>
<td rowspan="4">animation-fill-mode</td>
<td rowspan="4">规定对象动画时间之外的状态</td>
<td>none</td>
<td>不改变默认行为</td>
</tr>
<tr>
<td>forwards</td>
<td>当动画完成后，保持最后一个属相值（在最后一个关键帧中定义）</td>
</tr>
<tr>
<td>backwards</td>
<td>在animation-delay所指定的一段时间内，在动画显示之前，应用开始属相（在第一个关键帧中定义）</td>
</tr>
<tr>
<td>both</td>
<td>向前和向后填充模式都被应用</td>
</tr>
</table>
简单案列
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>css 动画</title>
<style>
body{
margin: 0;
padding: 0;
background-color:#f7f7f7;
}
.box{
400px;
margin:100px auto;
animation: rotate 4s linear infinite;
}
img{
display: block;
}
@keyframes rotate {
from {
transform: rotateZ(0deg);
}
to{
transform: rotateZ(-360deg);
}
}
</style>
</head>
<body>
<div class="box">
<img src="./images/fengche.png" alt="">
</div>
</body>
</html>
| 属相 | 描述 | ||
|---|---|---|---|