CSS3 animation详细讲解

知识点目录:
1.animation属性的基本用法
2.animation带*名词解释
3.keyframes用法
4.多重动画
5.css的3D动画

1.animation属性的基本用法

只要看一张图就清楚:

图1

看懂这个图中的4个例子即可。
一般只需要填:动画名称、动画形式、持续时间、延迟时间、animation-fill-mode即可
即看懂最后一个例子。

2.下面是带*名词详解:

【动画形式】:animation-timing-function
可选值:
ease 两头慢,中间快
linear 完全匀速
ease-in 开始慢
ease-out 结束的时候
ease-in-out 比ease幅度更大一点
cubic-bezier(num,num,num,num)
大部分情况建议用ease-in-out
cubic-bezier太复杂,大部分时候用不到

【动画方向】:animation-direction
normal是正常,不用解释
reverse反向执行,原本的动画效果倒过来
alternate往返执行,就是一次normal,一次reverse
alternate-reverse相反的往返,即alternate倒过来。

【animation-fill-mode】:
一般就填both
一个动画,假设只执行一次,那么开始的时候是不是第一帧的状态
结束的时候是不是保持最后一帧。下面是取值:
none默认值,即都不保持。
backwards开始的时候保持动画第一帧的状态
forwards结束的时候保持动画最后一帧的状态
both开始的时候保持,结束的时候也保持
如果设置为backwards,那么0%的关键帧会比默认写的css样式优先
forwars同理
通常情况都设置为both

【是否执行】:animation-play-status
就两个值,
running播放动画
paused暂停动画
用:hover来暂停某个动画,是经典用法

3.keyframes用法

示例图

图2

在对应百分比中填入css样式,动画会依次执行这些样式。
-webkit-前缀是浏览器兼容。一般还需要额外写-o-和-moz-

4.关于多重动画

多重动画本质上就是同一个动画属性中,用逗号分隔的两个动画
在不冲突的情况下执行
但是,由于keyframes可以设置的属性很自由,所以不建议写多重动画

5.css的3D动画

似乎用得不多
了解3D动画之前,要先了解css的transition属性。

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值