@keyframes关键帧
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
开发工具与关键技术:DW @keyframes关键帧
作者: 李杨
撰写时间:2019-02-06
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
@keyframes规则通过在动画序列中被定义为关键帧的样式来控制CSS动画序列中的中间步骤。它比转换更能控制动画序列的中间步骤。
要使用关键帧,首先要创建一个带名称的@Keyframes规则,方便后续使用animation这个属性。每个@keyframe规则包含多个关键帧,每一个关键帧都有一个百分比值来作为名称,表示在动画进行中,在什么阶段触发这个帧所包含的样式。
Animation是一个复合属性,有以下子属性
animation-name:指定keyfranes动画名称
animation-duration: 指定动画执行时间
animation-timing-function: 指定动画的速度曲线,默认“ease”缓动
animation-delay:指定动画的延迟时间,默认的话“0”无延迟
animation-direction:规定动画执行方向的,默认“normal”
这个属性比之前学的transition要复杂一点
@keyframes的重复定义
如果多个关键帧使用同一个名称的话,以最后一次的定义为准。@keyframes不存在层叠样式的情况,所以动画在一个阶段会使用一个关键帧的数据。
举个例子:
改变颜色
改变位置
改变颜色和背景位置
Css3的动画属性
@Keyframes的所有属性都在这了
好啦今天就写到这儿啦!