css3---动画animation

75% {

transform: translate(0,500px);

}

100% {

transform: translate(0,0);

}

}

html:

动画序列：

• 0% 是动画的开始，100% 是动画的完成。这样的规则就是动画序列。

• 在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。

• 动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。

• 请用百分比来规定变化发生的时间，或用关键词 “from” 和 “to”，等同于 0% 和 100%。

[](()1. 动画animation的属性

综合写法

animation：动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态;

animation: name duration timing-function delay iteration-count direction fill-mod 《大厂前端面试题解析+Web核心总结学习笔记+企业项目实战源码+最新高清讲解视频》无偿开源 徽信搜索公众号【编程进阶路】 e;

前边的两个属性必须写，后边的可以省略；综合写法里边不包含animation-play-state：paused(暂停)，和鼠标经过时配合使用

[](()1.1 详解animation

[](()1.1.1 动画名

​ 设置要使用的·动画名 animation-name:xxx;

[](()1.1.2 持续时间

​ 设置动画播放的持续时间 animation-duration:5s;

[](()1.1.3 速度曲线

​ animation-timing-function:linear;

​ linear:匀速；ease:慢–快–慢；ease-in:慢–快；ease-out:快–慢；ease-in-out:慢–快–慢；steps():指定了时间函数中的间隔数量

[](()1.1.4 延时时间

animation-delay:10s;

[](()1.1.5 循环次数

​ 设置动画播放次数 animation-iteration-count:5; 可以设置数字，也可以设置infinite(无限循环)

[](()1.1.6 循环方向

animation-direction:normal;

若动画中定义了0%：绿色; 100%:蓝色；

normal:默认值 绿–蓝；

resverse:反向 蓝–绿

alternate 正–反–正 绿–蓝–绿

alternate-reverse 反–正–反 蓝–绿–蓝

**注意：**以上与次数有关，交替的话，循环次数至少2，才能进行往返交替