10
社区成员
帧动画也叫动画,是css中非常重要的一个东西,也叫keyframe,CSS3动画是CSS中具有颠覆性的特征之一,动画可以被用来实现各种复杂的效果,如平移、旋转、缩放、倾斜、淡入淡出等。这种技术最大的优点是能够在不使用任何插件的情况下实现各种创意的动画效果,并且操作简单,易于控制,相比过渡(transition),动画可以实现更多变化、更多控制和连续自动播放等效果
CSS3动画具有以下优点:
1.定义帧动画:@keyframes 后边跟动画名称(可以自定义名称)
2.帧动画分三种形式:
① 0% -------100%,中间可以写任何百分比 比较建议,易控制,动画幅度更多
② form是开始 to是结束
③ form和to可以和百分比混合使用,但不建议,容易乱套
3.写完keyframes中的动画需求之后,需要用animation引入帧动画,谁需要这个动画就加给谁(建议动画的需求是目标属性中有的)
4.animation的属性:
① name: 动画名称(也就是keyframes后边的名称)
② duration 动画执行时间(多长时间进行完毕这个动画 单位s,也可以小数,如果是1秒以 下,可以省略0,就比如0.5s可以简写成.5s,点不能省略)
③ timing-function 速度曲线
数值: ease:默认值,先慢后快最后慢
ease-in 先慢后快
ease-out 先快后慢
ease - in - out 先慢后快最后慢 相对于ease更慢一些
step-start 不考虑过渡时间,直接到终点
step-end 不考虑过渡时间,时间到了直接到终点
steps (数值)(步长,一段一段的过渡)
cubIc - bezier (贝塞尔曲线)
linear 匀速
④ delay 延时执行 (单位s 可以是小数,小数的时候可以省略0,直接.5s)
⑤ iteration-count 动画播放的次数
默认就运动一次
infinite 无数次
⑥ direction 动画运动的方向
normal 从左到右 (默认值)
reverse 反向
alternate 来回滚动
alternate-reverse 反向来回滚动
⑦ fill-mode 动画以外的状态,就是动画运行完之后停止在哪里
forwards 停止在最后一帧
backforwards 运动完停止在第一帧
⑧ play-state 滑入动画之后的播放状态 (不能写入复合属性,需要单独设置)
paused 暂停
running 运行(默认值)
⑧效果如下图:
⑨ 复合属性
animation : 动画名称 运行时间 延时时间 速度曲线 动画次数 运动方向 运行完的状态
animation:动画名称 1s .5s linear infinite normal forwards
!!! 注意: 动画名称和运行时间必须写,运动时间和延时时间别写反了,其他属性能省略不写
帧动画和transition也可以一起用:
.box1:hover{
animation: hover 2s linear forwards;
}