[10 MINS/DAY] CSS Animation

时间:2020-9-8 作者:admin
  • CSS animation属性代表什么

animation = animation-name + animation-duration + animation-timing-function + animation-delay + animation-iteration-count + animation-direction + animation-fill-mode + animation-play-state

  • Animation-name

指定了应用的一系列动画,每个名称对应@keyframes定义的一个动画序列

.<class-name> {
animation-name: <anime_A>, <anime_B>;
animation-name: initial;
animation-name: inherit;
animation-name: unset;
/*初始值*/
animation-name: none; 
}

*inherit: 从父级类继承css属性
initial: 使用浏览器初始css属性
unset: 如果父级有对应的属性就继承,没有就用初始默认值,就是既是inherit又是initial*

  • Animation-duration

一个动画周期的时长,单位为秒(s)或者毫秒(ms),无单位值无效。

  • Animation-timing-function 缓动函数

定义CSS动画在每一动画周期中执行的节奏。一个或多个值。
对于关键帧动画来说,timing function作用于一个关键帧周期而非整个动画周期,即从关键帧开始开始,到关键帧结束结束。
定义于一个关键帧区块的缓动函数(animation timing function)应用到该关键帧;若该关键帧没有定义缓动函数,则使用定义于整个动画的缓动函数。

/* Keyword values */
animation-timing-function: ease;
animation-timing-function: ease-in;
animation-timing-function: ease-out;
animation-timing-function: ease-in-out;
animation-timing-function: linear;
animation-timing-function: step-start;
animation-timing-function: step-end;

/* Function values */
animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
animation-timing-function: steps(4, end);
animation-timing-function: frames(10);

/* Multiple animations */
animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1);

/* Global values */
animation-timing-function: inherit;
animation-timing-function: initial;
animation-timing-function: unset;

timing-function表示一个数学函数,它描述了在一个过渡或动画中一维数值的改变速度。这实质上让你可以自己定义一个加速度曲线,以便动画的速度在动画的过程中可以进行改变。这些函数通常被称为缓动函数。~~~~

timing-function description
ease 此关键字表示定时函数 cubic-bezier(0.25, 0.1, 0.25, 1.0)。 这个函数类似于ease-in-out,只是它在开始时加速地更快,但在接近中间中,加速已经开始变慢了。
ease-in 此关键字表示定时函数cubic-bezier(`0.42, 0.0, 1.0, 1.0`)。动画开始时缓慢,然后逐步加速,知道达到最后状态,动画突然停止。
ease-out 此关键字表示定时函数 cubic-bezier(`0.0, 0.0, 0.58, 1.0`)。动画开始很快,然后逐渐减慢,直到最终状态。
ease-in-out 此关键字表示定时函数 cubic-bezier(`0.42, 0.0, 0.58, 1.0`)。使用这个定时函数,动画开始的行为类似于 ease-in 函数,动画结束时的行为类似于ease-out函数。
linear 此关键字表示定时函数cubic-bezier(`0.0, 0.0, 1.0, 1.0`)。使用这个定时函数,动画会以恒定的速度从初始状态过渡到结束状态。
step-start 此关键字表示定时函数 steps(1, start)。使用这个定时函数,动画会立刻跳转到结束状态,并一直停留在结束状态直到动画结束。
step-end 此关键字表示定时函数 steps(1, end)。使用这个定时函数,动画会一直保持初始状态直到动画结束,然后立刻跳转到结束状态。
  • 定时函数

1.立方贝塞尔曲线的子集 cubic-bezier()
这些曲线是连续的,一般用于动画的平滑变换,也被称为缓动函数(_easing functions_)。
贝塞尔曲线曲线由四个点 P0,P1,P2 和 P3 定义。P0 和 P3 是曲线的起点和终点。P0是(0,0)并且表示初始时间和初始状态,P3是(1,1)并且表示最终时间和最终状态.
Px(time,status).
cubic-bezier(x1,y2,x2,y2)中x1_, _y1_, _x2_, _y2是<number>类型的值,它们代表当前定义立方贝塞尔曲线中的P1 和 P2点的横坐标和纵坐标,X1和X2必须在[0,1]范围内,否则当前值无效。
2.阶梯函数
step()定义了一个以等距步长划分值域的步长函数。这个阶跃函数的子类有时也称为阶梯函数。

steps(number_of_steps, direction)

number_of_steps是一个正Integer(>0)用于表示划分的步数
direction表示函数是左连续(start),右连续(right)

steps(5, end)          There is 5 treads, the last one happens right before the end of the animation.
steps(2, start)        A two-step staircase, the first one happening at the start of the animation.
  • animation-delay

定义动画于何时开始,即从动画应用在元素上到动画开始的这段时间的长度。默认0s(值要有单位,s或者ms)。
定义一个负值会让动画立即开始。但是动画会从它的动画序列中某位置开始。例如,如果设定值为-1s,动画会从它的动画序列的第1秒位置处立即开始。

  • animation-iteration-count

定义动画在结束前运行的次数 可以是1次或者无限循环(infinite).
如果指定了多个值,每次播放动画时,将使用列表中的下一个值,在使用最后一个值后循环回第一个值。(比如“1,2” 代表第一次动画循环一次,第二次动画循环两次,然后如上重复。)

  • animation-direction

指示动画是否反向播放, 值如下:

# normal 每个循环内动画向前循环,循环结束,动画重置到起点重新开始(默认值).
animation-direction: normal
# reverse 反向运行动画,每周期结束动画由尾到头运行
animation-direction: reverse
# alternate 动画交替反向运行,反向运行时,动画按步后退,同时,带时间功能的函数也反向,比如,ease-in 在反向时成为ease-out。计数取决于开始时是奇数迭代还是偶数迭代
animation-direction: alternate
# alternate-reverse 动画第一次运行时是反向的,然后下一次是正向,后面依次循环。决定奇数次或偶数次的计数从1开始。
animation-direction: alternate-reverse
animation-direction: normal, reverse
animation-direction: alternate, reverse, normal
  • animation-fill-mode

设置CSS动画在执行之前和之后如何将样式应用于其目标。

/* Single animation */
# none 当动画未执行时,动画将不会将任何样式应用于目标,而是已经赋予给该元素的 CSS 规则来显示该元素。这是默认值。
animation-fill-mode: none;
# forward 目标将保留由执行期间遇到的最后一个关键帧计算值。
animation-fill-mode: forwards;
# backward 动画将在应用于目标时立即应用第一个关键帧中定义的值,并在animation-delay期间保留此值.
animation-fill-mode: backwards;
# both 动画将遵循`forwards`和`backwards`的规则,从而在两个方向上扩展动画属性。
animation-fill-mode: both;

/* Multiple animations */
animation-fill-mode: none, backwards;
animation-fill-mode: both, forwards, none;

Forward:

animation-direction animation-iteration-count last keyframe
normal even/odd 100% or to
reverse even/odd 0% or from
alternate even 0% or from
alternate odd 100% or to
alternate-reverse even 100% or to
alternate-reverse odd 0% or from

Backward

animation-direction first keyframe
normal or alternate 0% or from
reverse or alternate-reverse 100% or to
  • animation-play-state

定义一个动画是否运行或者暂停. 可以通过查询它来确定动画是否正在运行。另外,它的值可以被设置为暂停和恢复的动画的重放.恢复一个已暂停的动画,将从它开始暂停的时候,而不是从动画序列的起点开始在动画.
running: 当前动画正在运行。
paused: 当前动画已被停止。

  • @keyframe

通过在动画序列中定义关键帧(或waypoints)的样式来控制CSS动画序列中的中间步骤。和transition相比,关键帧 keyframes 可以控制动画序列的中间步骤。
一个关键帧规则没有指定动画的开始或结束状态(也就是,0%/from100%/to,浏览器将使用元素的现有样式作为起始/结束状态。如果在关键帧的样式中使用了不能用作动画的属性,那么这些属性会被忽略掉,支持动画的属性仍然是有效的,不受波及。
如果多个关键帧使用同一个名称,以最后一次定义的为准
关键帧中出现的 !important将会被忽略。

@keyframes example {
  from { margin-top: 50px; }
  50%  { margin-top: 150px }
  to   { margin-top: 100px; }
}
声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。