CSS3动画属性，这么简单
Posted 浪漫主义码农
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS3动画属性，这么简单相关的知识，希望对你有一定的参考价值。
CSS3动画属性
简单来说：动画就是把一帧一帧的画面连接起来。，以一定的速度连续播放时，视觉差看不出来，这就是动画。
知道了动画的概念，那就明白了怎么去实现，我们就要把每一帧的画面长什么样子画出来，然后以一定的速度连接起来就行了。
🤣那么有人就会问和过渡有什么区别呢？
区别在于：
- transition需要触发一个事件才会随着时间改变其CSS属性；animation在不需要触发任何，事件的情况下，也可以显式的随时间变化来改变元素CSS属性，达到一种动画的效果。
- 过渡只有两帧，开始和结束，其余都是靠补间动画实现的。 而动画可以设置任意多帧。
动画的使用
@keyframes规则
@keyframes 规则中指定了 CSS 样式，动画将在特定时间逐渐从开始样式、经过中间的帧数样式、到最后的样式。
要使动画生效，必须将动画绑定到某个元素。使用关键词 “from” 和 “to”，等同于 0% 和 100%。
定义一个动画，
@keyframes 动画名称
0%
//样式
width: 200px;
50%
width: 300px;
100%
width: 200px;
div
animation: 动画名称 5s; //将该动画使用到div上，动画时长5s
动画属性
-
💠 animation-name ：规定 @keyframes 动画的名称。
-
💠animation-duration ：规定动画完成一个周期所花费的秒或毫秒。默认是 0。
-
💠 animation-delay ：规定动画何时开始，也可以说是延迟开始。默认是 0。
-
💠animation-iteration-count ：规定动画被播放的次数。默认是 1。
-
💠 animation-direction ：指定是向前播放、向后播放还是交替播放动画。默认是 “normal”。
- 🔘 normal - 动画正常播放（向前）。默认值
- 🔘reverse - 动画以反方向播放（向后）
- 🔘alternate - 动画先向前播放，然后向后
- 🔘alternate-reverse - 动画先向后播放，然后向前
-
💠 animation-timing-function ：规定动画的速度曲线。默认是 “ease”。
-🔘 cubic-bezier(n, n, n, n) ：在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。
-
🔘 ease : 前面慢，中间快，后面慢
-
🔘linear :匀速运动
-
🔘 ease-in ：慢速开始
-
🔘 ease-out ：慢速结束
-
🔘 ease-in-out ：以慢速开始和结束的过渡效果
-
-
💠animation-fill-mode ：规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
- 🔘 none - 默认值。动画在执行之前或之后不会对元素应用任何样式。
- 🔘forwards - 元素将保留由最后一个关键帧设置的样式值（依赖 animation-direction 和 animation-iteration-count）。
- 🔘 backwards - 元素将获取由第一个关键帧设置的样式值（取决于 animation-direction），并在动画延迟期间保留该值。
- 🔘 both - 动画会同时遵循向前和向后的规则，从而在两个方向上扩展动画属性。
-
animation-play-state ：规定动画是否正在运行或暂停。默认是 “running”。
-
💠 animation ：前面所有的属性的合写
动画的属性很多，但是我们常用的都是使用animation合写形式。动画能实现的东西很多很多。
实例
实现一个跑步的动画。随便从网上找一张连贯动作的图，我找的是这个，做到后面才发现图尽量找每一帧大小一样，动作幅度不是很多，帧数越多，分解的越多，动画的效果越好。
我们的实现思路就是，让一个动作看做一帧，一帧一帧的往方框移动，只要衔接的流畅，和你的图片帧数多，效果就很好。
效果：我把握的不是很好。
代码：
<body>
<div class="main">
<img src="./pace.png">
</div>
</body>
<style>
.main
width: 240px;
height: 460px;
border: 1px solid red;
overflow: hidden;
position: relative;
img
position: absolute;
top: 0;
animation: name 1.2s steps(10) infinite;
@keyframes name
from
left: 0;
to
left: -950px;
</style>
😉😉😉😉😉😉
以上是关于CSS3动画属性，这么简单的主要内容，如果未能解决你的问题，请参考以下文章