动画的特点
动画最大的特点可以不用鼠标触发,自动的,反复的执行某些动画。
动画和过渡的区别在于:
1, 过渡是两个状态的变化,动画可以定位为多个状态之间的变化过程。
2, 过渡要搭配鼠标执行效果且只能执行一次 ,而动画可以自动执行,反复执行某些动态效果 相比过渡更为灵活多变。
动画的使用
动画使用分为定义和调用:
注意点:动画要先定义再进行调用。
定义
开始状态from等同于0% 开始状态起点为0时可以省略。
结束状态to 等同于100% 结束状态不能省略会影响后面添加属性。
/* 定义动画 */
/* @keyframes + 动画名*/
@keyframes move {
/* 开始状态 起点为0时可以省略 */
from {
transform: translate(0, 0);
}
40% {
transform: translate(0, 800px);
}
/* 结束状态 */
to {
transform: translate(800px, 0);
}
}
动画名建议参考css类选择器名。
调用
语法: animation: 动画名 动画执行时间(单位s) ;
/*调用动画*/
.box {
width: 200px;
height:200px;
/* 2. 使用动画 animation: 动画名称 执行时间;*/
animation: move 1s infinite;
}
动画的属性
infinate :无限循环动画(重复次数)
alternate :反向执行动画 (需要搭配infinate使用)
forwards :动画结束停留在结束状态
linear : 让动画匀速执行
延迟时间与动画执行时间写法相同 数字+s
注意点 :
1.多个属性用空格隔开
2.多个属性顺序可以打乱
3.forwards不能和无线循环 ,反向执行一起使用
鼠标经过暂停动画
语法:animation-play-state: paused;
/* 鼠标悬停在box上,ul停止动画 */
.box:hover ul {
animation-play-state: paused;
}
逐帧动画
语法:animarion: 动画速度帧 steps(帧数) ;
其原理即将每帧不同的图像连续播放,从而产生动画效果 ,搭配精灵图使用。
.box {
width: 140px;
height: 140px;
background: url(./images/bg.png);
animation: run 1s steps(12) infinite;
}
@keyframes run {
0% {
background-position: 0 0;
}
100% {
background-position: -1680px 0;
}
}
多组动画
多个动画一起执行 animation: 动画1, 动画2, ... 动画n;
.box{
animation: move 1s infinite, move 5s linear forwards;
}
动画与动画之间用逗号隔开。