CSS3 animation（动画） 属性 |
您所在的位置：网站首页 › 动画地点 › CSS3 animation（动画） 属性 |
CSS3 animation（动画） 属性
|
工欲善其事必先利其器，这一篇把animation的所有属性及属性值详细的讲了一下，后面会慢慢开始写一些css动画。 语法 animation: name duration timing-function delay iteration-count direction fill-mode play-state; 值说明animation-name指定要绑定到选择器的关键帧的名称animation-duration动画指定需要多少秒或毫秒完成animation-timing-function设置动画将如何完成一个周期animation-delay设置动画在启动前的延迟间隔。animation-iteration-count定义动画的播放次数。animation-direction指定是否应该轮流反向播放动画。animation-fill-mode规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。animation-play-state指定动画是否正在运行或已暂停。initial设置属性为其默认值。 inherit从父元素继承属性。示例： div { animation:mymove 5s infinite; } animation-timing-function 设置动画将如何完成一个周期速度曲线定义动画从一套 CSS 样式变为另一套所用的时间。 速度曲线用于使变化更为平滑。 默认值:ease继承:noanimation-timing-function使用的数学函数，称为三次贝塞尔曲线，速度曲线。 值描述linear动画从头到尾的速度是相同的。ease默认。动画以低速开始，然后加快，在结束前变慢。ease-in动画以低速开始。ease-out动画以低速结束。ease-in-out动画以低速开始和结束。steps(int,start \ end)指定了时间函数中的间隔数量（步长）。有两个参数，第一个参数指定函数的间隔数，该参数是一个正整数（大于 0）。 第二个参数是可选的，表示动画是从时间段的开头连续还是末尾连续。含义分别如下：- start：表示直接开始。end：默认值，表示戛然而止。cubic-bezier(n,n,n,n)在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。 linear 动画从头到尾速度相同 animation: move-circle 3s linear;等价于 animation: move-circle 3s;缓动函数通过控制时间和速度之间的关系来定义动画的变化。对于 "ease"，其速度变化是一个类似于正弦曲线的函数，即动画开始和结束时速度较慢，中间时速度较快。这使得动画在开始和结束时更加平缓，中间部分加速。 动画开始时： 速度较慢，实现了一个缓慢启动的效果。 动画中间： 速度逐渐加快，使得动画在中间部分更快。 动画结束时： 速度再次减缓，实现了一个平缓结束的效果。"ease" 缓动函数的具体数学公式通常是通过贝塞尔曲线来描述的。在 CSS 中，"ease" 缓动函数可以近似描述为一个 cubic Bézier 曲线，其控制点的位置确定了速度的变化。 数学公式为： B(t)=C1⋅(3t^2−2t^3)B(t) 在这里： t 是时间轴上的时间百分比（0 到 1）。 c1 是控制点的纵坐标。具体到 "ease" 缓动函数，它的控制点通常设置为 (0.25,0.1)，这使得曲线在动画的开始和结束时较为平缓，中间部分速度变化较快。 所以，对于 "ease" 缓动函数，其数学公式可以表示为： B(t)=0.25⋅(3t^2−2t^3) ease-in 动画以低速开始 animation: move-circle 3s ease-in;
在缓动函数中，我们可以表示为 (x, y)，其中 x 表示时间轴上的时间百分比，y 表示速度轴上的速度百分比。对于 "ease-in"，这个曲线可以近似表示为： 起始点 P0: (0, 0) 控制点 P1: (c, 1-c), 其中 c 是一个小于 1 的正数，控制曲线的形状 终点 P2: (1, 1)这个贝塞尔曲线的方程可以用二项式方程来表示。在 "ease-in" 的情况下，我们可以表示为： B(t)=(1−t)^2 其中，t 是时间轴上的时间百分比。 这个方程描述了 "ease-in" 的加速曲线。通过不同的 c 值，你可以调整曲线的形状，但一般来说，c 取较小的值，使得曲线在开始时较为平缓，然后逐渐加速。 ease-out 动画以低速结束 animation: move-circle 3s ease-out;"ease-out" 是一种 CSS 缓动函数，它描述了动画在时间轴上的速度变化。与 "ease-in" 相反，"ease-out" 动画在开始时速度较快，然后逐渐减缓，最终结束时速度较慢。这种速度变化使得动画在开始时显得更加生动，而在结束时更为平缓。 数学上，"ease-out" 缓动函数可以近似描述为一个 cubic Bézier 曲线。其数学公式为： B(t)=c1⋅(3t^2−2t^3) 在这里： t 是时间轴上的时间百分比（0 到 1）。 c1 是控制点的纵坐标。对于 "ease-out" 缓动函数，通常控制点的位置设置为(0,0)。这样的设置使得动画在开始时速度较快，然后逐渐减缓，最终结束时速度较慢。 具体到 "ease-out" 缓动函数，其数学公式可以表示为： B(t)=0.25⋅(3t^2−2t^3) 这个公式描述了 "ease-out" 缓动函数的速度变化。同样地，实际应用中通常不需要手动计算这些值，而是直接在 CSS 中使用 "ease-out" 缓动函数。 从这个公式中可以看出，"ease-out"这个缓动函数小球实际运动是越来越慢的 ease-in-out 动画以低速开始和结束。 animation: move-circle 3s ease-in-out;"ease-in-out" 是一种 CSS 缓动函数，它是 "ease-in" 和 "ease-out" 两者的结合。它描述了动画在时间轴上的速度变化，具体特点是在开始和结束时速度较慢，中间时速度较快。 与 "ease" 缓动函数相比，主要区别在于 "ease-in-out" 在整个动画过程中都相对平滑，既避免了开始时的突然加速，也避免了结束时的突然减缓。 "ease-in-out" 缓动函数的数学公式也可以近似描述为一个 cubic Bézier 曲线。其数学公式为： B(t)=0.5⋅(1−cos(πt)) 在这里： t 是时间轴上的时间百分比（0 到 1）。这个公式描述了 "ease-in-out" 缓动函数的速度变化。与 "ease" 不同，"ease-in-out" 在整个动画过程中都相对平缓，没有明显的开始和结束时的速度变化。 "ease": 在整体上是平缓的，但在开始和结束时有些许加速和减缓。 "ease-out": 开始时速度较快，然后逐渐减缓，结束时速度较慢。 "ease-in-out": 整体上相对平缓，避免了 "ease" 中明显的开始和结束时速度变化。 steps 时间函数中的间隔数量（步长） animation: move-circle 3s steps(5);cubic-bezier() 函数定义了一个贝塞尔曲线(Cubic Bezier)。 贝塞尔曲线曲线由四个点 P0，P1，P2 和 P3 定义。P0 和 P3 是曲线的起点和终点。P0是（0,0）并且表示初始时间和初始状态，P3是（1,1）并且表示最终时间和最终状态。 P0：默认值 (0, 0) P1：动态取值 (x1, y1) P2：动态取值 (x2, y2) P3：默认值 (1, 1) 语法： cubic-bezier(x1,y1,x2,y2)Cubic Bézier 曲线的一般表示式为： B(t)=(1−t)^3⋅P0+3(1−t)^2⋅t⋅P1+3(1−t)⋅t^2⋅P2+t^3⋅P3 在 cubic-bezier(x1, y1, x2, y2) 中： P0 是起始点，可以看作是 (0,0)。 P3 是终点，可以看作是 (1,1)。 P1 的横坐标为 x1，纵坐标为 y1。 P2 的横坐标为 x2，纵坐标为 y2。将这些值代入公式，得到具体的缓动函数： B(t)=(1−t)^3⋅(0,0)+3(1−t)^2⋅t⋅(x1,y1)+3(1−t)⋅t^2⋅(x2,y2)+t^3⋅(1,1) animation-iteration-count 定义动画的播放次数 animation: move-circle 3s cubic-bezier(0,0,0.25,1) 3; 值描述n一个数字，定义应该播放多少次动画测试 »infinite指定动画应该播放无限次（永远） animation-direction 指定是否应该轮流反向播放动画。 属性值 值描述normal默认值。动画按正常播放。reverse动画反向播放。alternate动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。alternate-reverse动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放。initial设置该属性为它的默认值。inherit从父元素继承该属性。 animation-fill-mode 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。 属性值 值描述none默认值。动画在动画执行之前和之后不会应用任何样式到目标元素。forwards在动画结束后（由 animation-iteration-count 决定），动画将应用该属性值。backwards动画将应用在 animation-delay 定义期间启动动画的第一次迭代的关键帧中定义的属性值。这些都是 from 关键帧中的值（当 animation-direction 为 "normal" 或 "alternate" 时）或 to 关键帧中的值（当 animation-direction 为 "reverse" 或 "alternate-reverse" 时）。both动画遵循 forwards 和 backwards 的规则。也就是说，动画会在两个方向上扩展动画属性。initial设置该属性为它的默认值。inherit从父元素继承该属性。 forwards animation: move-circle 3s cubic-bezier(0,0,0.25,1) 1 forwards;none： 默认值。表示动画不应用于目标元素的任何样式，即动画执行完毕后，目标元素将回到初始状态。forwards： 表示在动画结束后，目标元素应该应用动画的最后一帧的样式。换句话说，目标元素将停留在动画的最后一帧的状态。backwards： 表示在动画开始前，目标元素应该应用动画的第一帧的样式。即在动画开始前，目标元素就已经具有了动画的初始状态。both： 结合了 forwards 和 backwards。表示在动画开始前应用第一帧的样式，在动画结束后应用最后一帧的样式。 animation-play-stateanimation-play-state 是 CSS 动画属性，用于控制动画的播放状态，即动画是正在运行还是暂停。 running： 默认值。表示动画正在运行，即动画效果正在应用到目标元素上。paused： 表示动画被暂停，即动画效果不再应用到目标元素上。元素将保持在当前的样式状态，直到动画再次被设置为 running。 |
【本文地址】
今日新闻 |
推荐新闻 |