动画最大的特点可以不用鼠标触发,自动的,反复的执行某些动画。
动画使用分为定义和调用:
-
定义:
/* 1. 定义的动画 */
@keyframes dance {
from {
transform: scale(1)
}
to {
transform: scale(1.5)
}
}
或者是
/* 1. 定义的动画 */
@keyframes dance {
0% {
transform: scale(1)
}
100% {
transform: scale(1.5)
}
}
2. 调用
img {
width: 200px;
/* 2. 使用动画 animation: 动画名称 执行时间; infinite 循环*/
animation: dance .5s infinite;
}
动画属性
-
动画名字参照css类选择器命名
-
动画时长和延迟时间别忘了带单位 s
-
infinate 无限循环动画(重复次数)
-
alternate 为反向 就是左右来回执行动画(跑马灯)
-
forwards 动画结束停留在最后一帧状态, 不循环状态使用
-
linear 让动画匀速执行
鼠标经过暂停动画
/* 鼠标经过box, 则 ul 停止动画 */
.box:hover ul {
animation-play-state: paused;
}
多组动画
/* 我们想要2个动画一起执行 animation: 动画1, 动画2, ... 动画n */
animation: run 1s steps(12) infinite, move 5s linear forwards;