animation属相详解 - @keyframes 用法 -animation案列
程序员文章站
2024-03-24 20:21:22
...
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;
| 属相 | 描述 | ||
|---|---|---|---|
| animation | 规定@keyframes 动画的名称 | keyframe-name | 规定需要绑定到选择器的 keyfram 的名称 |
| none | 规定无动画效果（可用来覆盖级联的动画） | ||
| animation-duration | 规定动画完成一个周期所需要花费时间 | time 值 | 以秒或者毫秒计算，默认是0 |
| animation-timing-function | 规定动画运动的曲线 | linear | 动画从头到尾速度是相同的 |
| ease | 默认值。动画以低速开始，然后加快，在结束之前变慢。 | ||
| ease-in | 动画以低速开始 | ||
| ease-out | 动画以低速结束 | ||
| ease-in-out | 动画以低速开始和结束 | ||
| cubic-bezier(n,n,n,n) | 在cubic-bezier 函数中定义自己的值。可能的值是 0 到 1 的数值 | ||
| animation-delay | 规定动画开始时的延迟， 可选 | time 值 | 以秒或者毫秒计算，默认是0 |
| animation-iteration-count | 规定动画被播放的次数 | n | 定义动画被播放的次数，默认是 1 |
| infinite | 规定动画无限次循环 | ||
| animation-direction | 规定动画是否在下个周期，逆向播放 | normal | 默认值，动画默认播放 |
| alternate | 动画会轮流反向播放 | ||
| animation-play-state | 规定动画是否正在运行，或者暂停 | running | 默认值，规定动画正在播放 |
| paused | 规定动画已暂停 | ||
| animation-fill-mode | 规定对象动画时间之外的状态 | none | 不改变默认行为 |
| forwards | 当动画完成后，保持最后一个属相值（在最后一个关键帧中定义） | ||
| backwards | 在animation-delay所指定的一段时间内，在动画显示之前，应用开始属相（在第一个关键帧中定义） | ||
| both | 向前和向后填充模式都被应用 | ||
简单案列
<!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{
width: 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>