过渡触发的是属性值的隐式变化,动画变化过程中要用到的属性值,必须在关键帧中显示声明.
18.1 定义关键帧(keyframes)
- 元素的动画效果 = 1或多个关键帧动画(keyframes)
- keyframes = 动画名称 + 1或多个关键帧块
- 这里应该是书上描述有错吧.明明是一个动画名称对应一个块
- 关键帧块 = 1或多个关键帧选择符
- 关键帧选择符 = 属性声明和值
关键帧选择符是动画持续时间内的时间点,其作用是指定,在动画的某个时刻呈现具体的某个状态
18.2 设置关键帧动画
定义好关键帧(keyframes)后,要使用animation-name把动画附加到元素上
动画命名
- 不能以数字开头
- 不能以两个连字符开头,如
--___- - 转义字符必须以
\转义 - 别使用CSS里面的关键字
18.3 关键帧选择符
- from等于0%
- end等于100%
- 一级选择符可以使用逗号分隔放在一起
- 无需按升序排序
- 系统会自动按升序处理
@keyframes test {
from{}
75%,25%{}
50%{}
to{}
}
18.3.1 省略from和to
- 省略from/0%,to/100%后
- 应用的动画效果的属性,取在元素中的默认设置的属性
- 在from/0%,to/100%上设置值的时候
- 最开始和结束的时候,还是会变回默认的值
- 关键帧选择符应用无效的值的时候,会自动忽略
18.3.2 重复关键帧属性
如果有多个相同的关键帧选择符,他们的值将会合并,后面的会重叠前 的
@keyframes W {
from, to {
top: 2em;
left: 1em;
}
to {
top: 3em;
}
}
// 等同于
from {
top: 2em;
left: 1em;
}
to {
from: 3em;
left: 1em;
}
18.3.3 支持动画的属性
如果两个属性间没有中间点,得到的动画效果可能与预期不符.
- 如果height:auto和height:300px.就不会有动画效果
正常情况下,最好显示指定0%,100%的动画值,避免出问题.
除非是要把0%,100%设置为默认初始值,可以省略
18.3.4 不支持动画但不被忽略的属性
- visibility:
- 虽然没有过渡效果,但是会从看不见变到看得见,只不过是瞬间变化的
- animation-timing-function
- 应用在关键帧里面的时候,可以指定当前帧的变化速率
18.3.5 通过脚本编写@keyframes动画
关键帧规则在出现的那一刻,还可以通过API增删改查
- appendRule(n)
- deleteRule(n)
- findRule(n)
这个是要通过CSSRule来获取对应的值,首先CSSRule这个没用过,所以暂时不搞代码了
18.4 把动画应用到元素上
要卢动画显示出来,至少要指名名称和设置时间,要不然就看不到
18.4.1 指定动画名称animation-name
- 应用多个动画,可以用逗号
,分开多个@keyframes标识符 - 通过脚本编程添加的动画,将在它再现的那一刻应用到元素上
- 为相同的属性-设置的多个动画-在同一时刻播放时,后面动画的属性会覆盖前面的(CSS层叠)
- 3个条件同时满足时才考虑
18.4.2 设定动画时长animation-duration
- 如果不声明
- 默认是0S
- 马上开始马上结束
- 会触发相应事件
- 必须带上单位s/ms
- 多个时间用
,分隔- 如果其中一个错了,整个都错了
- 如果和name比起来差一个,就自动复制
- 如果比name多,多的会忽略
18.4.3 声明动画迭代次数animation-iteration-count
- 多个值以
,分开- 无效值导致整个声明失效
- 多的值被忽略
- 少的值自动复制
- 如果不是整数
- 将会在最后一次循环的中途执行
18.4.4 设置动画的播放方向animation-diretion
- normal
- 从0%到100%
- reverse
- 从100%至0%
- 同时逆转了animation-timing-function
- alternate
- 奇数次正向,偶数次反向
- alternate-reverse
- 奇数次反向,偶数次正向
18.4.5 延迟播放动画animation-delay
- 默认情况下
- 立即开始动画
- 设为负值
- 立即开始动画
- 但是会跳过相应时长的播放时间,相当于从指定时间开始播放
18.4.6 动画事件
- animationstart
- 动画开始时执行
- 如果有animation-delay,则在delay后的时间触发
- animationiteration
- 循环时触发
- animationend
- 结束时触发
- 结束和循环不可能同时触发
注意:
- 动画在UI线程中的优先级最低,当脚本占用UI线程的时候,某些动画效果会失效
暂停/重启动画
- 删除或重新添加动画名称可起到停止重启动画的作用
- display:none;可以也关闭动画
动画链
- 通过设置关键帧选择符,然后重复动画次数达到目的
- 多次应用同一个动画,设置不同的delay时间
- 在animationend事件中通过setTimeout延迟启动动画
18.4.7 改变动画的内部时序animation-timing-function
- 贝赛尔曲线:通过三次方贝塞尔曲线控制动画执行的快慢速度,主要是高逼真场景下使用,就像书中关于小球动量损失直到停止的例子那样.
- 曲线越陡,运动速度越快
- 曲线越平缓,运动速度越慢
- cubic-bezier.com可以实时预览曲线
animation-timing-function: cubic-bezier(0, 4, 1, -4); // 前两个参数指定第一点坐标,后2个指点第2点的坐标
- x坐标只能是0到1之间
- y坐标不受限制
- 步进时序函数
- steps(步数, 变化点)
- 步数是正整数,把一个动画平分成对应的段数
- 后面那个有点没看懂,不过一直用end就对了
- 以动画形式改变时序函数
- 这个太绕了,有点像CSS揭秘中的伪随机背景那种骚操作,这个暂时就不看了
18.4.8 设置动画的播放状态animation-play-state
定义动画是播放还是暂停...
- running
- paused
18.4.9 动画的填充模式animation-fill-mode
定义动画播放结束后,是否应用原来的属性值
- none: 还原为最初的状态
这个没看起来这么简单,还要考虑delay和direction.现在不深究,毕竟没怎么用过动画.完全靠想很难想出来.还是等用几次之后再来回顾一下
18.5 写为一个简写属性animation
- animation-name放在最前面(最佳实践)
- 如果同时出现两个时间
- 第1个是持续时间
- 第2个是延迟时间
- 多个动画以逗号分开,类似background
18.6 动画特指度和优选顺序
- 关键帧中设置的属性值,会覆盖其他值,即使是!important也会被覆盖
- 不要在关键帧中使用!important
18.7 癫痫..
只能一声叹息,这个是超高阶段才需要考虑的问题了.目前知道有这样一个东西存在即可
