浅谈css3动画属性
css3动画通过animation来实现,css3动画不需要事件的触发,只需要调用关键帧即可。因此,制定好关键帧是实现动画的关键步骤。
制定关键帧
方法一:from内一般写入动画的初始状态,to写入动画的结束状态。
@keyframes 关键帧名字{
from{
}
to{
}
}
方法二:百分比形式表示动画的状态,0%表示动画初始状态,100%表示动画结束状态。
@keyframes 关键帧名字{
0%{
}
25%{
}
75%{
}
100%{
}
}
animation动画属性
1.animation-name 关键帧的名字
2.animation-duration 动画的持续时间
3.animation-timing-function 动画的类型(匀速运动 加速运动 贝塞尔曲线等等)
4.animation-delay 动画延迟
5.animation-iteration-count 动画运动次数(默认为一次,属性值infinite为无限循环)
6.animation-direction 动画运动方向(默认正向运动)
属性值:
(1)reverse 反向运动
(2)alternate 先正向后反向再正向后反向……(一直循环)
(3)alternate-reverse 先反向后正向
7.animation-play-state 动画正在运行还是暂停
属性值:
(1)pause 动画停止
(2)running 运动运动(默认值)
拓展:逐帧动画
animation-timing-function:step-start;
逐帧动画指的是帧与帧之间没有动画中间的过渡效果,每次都直接跳到下一帧开始的地方。
animation常用写法
一般动画都不用将每个属性单独写出来,可以用简写的方式,需要什么属性效果就写什么即可。例如,想要一个立方体在10秒内无限匀速循环,可以写成:
animation:关键帧名字 10s linear infinite;
案例展示:
实现红色小盒子在黄色盒子中无限循环运动,并且当鼠标滑过时红色盒子运动暂停。
1.代码展示:
(1)HTML代码
(2)css代码