css动画
css中动画叫做animation
它的特点:不需要事件进行触发,配合调用关键帧即可。
css动画属性
1 动画的名称 ,设置对象所应用的动画名称,需要调用关键帧来使用
关键帧:
关键帧的表示方法
1.可以使用from和to
@keyframes 关键帧的名称{
from{初始状态属性}
to{结束状态属性}
}
2.可以用百分比来划分多个步骤
@keyframes 关键帧的名称{
0%{
开始状态
}
25%{
}
50%{
}
......
100%{
结束状态
}
}
2 animation-duration 动画的持续的时间
即设置对象动画的持续时间
例如:
animation-duration:3s; 即动画完成使用的时间为3s
举例:下方div为父元素,h1为子元素,完成动画的时间为3s,匀速运动,无线循环
3 nimation-timing-function 动画运用的类型
即设置对象动画的过渡类型
①linear:匀速。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
②ease:平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
③ease-in:由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
④ease-out:由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
⑤ease-in-out:由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
⑥step-start:马上跳到动画每一结束桢的状态:没有动画中间的过渡效果。每次直接跳到下一帧开始的地方
举例:
下方为step-start 逐帧动画的显示,截取一小段代码:
4 animation-delay 动画的延迟
即设置对象动画延迟的时间
例如:
animation-delay:1s; 动画开始前延迟的时间为1s
5 animation-iteration-count 动画运动的次数
即设置对象动画的循环次数
①number: 动画运动循环的次数(默认情况下运动1次)
例如:
animation-iteration-count: 3;即动画运动三次
②infinite(无限循环)
例如:
animation-iteration-count: infinite;即动画会无限循环展示
举例:下方为球体的无线循环转动
6 animation-direction 运动的方向
设置对象动画在循环中是否反向运动
①reverse:反方向运行 ( 让关键帧从后往前执行 )
②alternate:动画先正常运行再反方向运行,并持续交替运行
③alternate-reverse:动画先反运行再正方向运行,并持续交替运行
④normal:正常方向
举例:截取小段css代码
h1{
position: absolute;
width: 50px;
height: 50px;
background: salmon;
border-radius: 100%;
animation: h1move 5s linear reverse infinite;
}
reverse:反方向运行
7 animation-play-state
即设置对象动画的状态
①running:运动
②paused: 暂停
例如:
animation-play-state:paused; 当鼠标经过时动画停止,鼠标移开动画继续执行