css3---动画animation

div {

width: 100px;

height: 100px;

background-color: pink;

animation: move 2s linear 2s infinite alternate forwards;

}

@keyframes move {

0% {

transform: translate(0,0);

}

25% {

transform: translate(500px,0);

}

50% {

transform: translate(500px,500px);

}

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-mode;

前边的两个属性必须写，后边的可以省略；综合写法里边不包含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，才能进行往返交替

1.1.7 动画等待与结束时的状态

animation-fill-mode:设置动画在结束或者等待时的状态 默认是backwards(动画结束时回到初始状态)；

​ forwards:动画结束后元素停止在100%的样式；

​ backwards:元素停留在0%的样式

​ both:同时设置以上两个属性