CSS动画基础

发表于 | 分类于

transform

transform指变换，使用过photoshop的人应该知道里面的Ctrl+T自由变换。transform就是指的这个东西，拉伸，压缩，旋转，偏移，且transform 属性 , 只对 block 级元素生效！（配合transition过渡）

  • 平移：

    1
    2
    3
    transform:  translate(tx[, ty])
                translateX(tx)  x轴方向平移
                translateY(ty)

  • 角度旋转：transform: rotate(angle)

  • 缩放：

    1
    2
    3
    transform:  scale(sx[, sy])
                scaleX(sx);   x轴方向缩放
                scaleY(sy)

  • 倾斜：

    1
    2
    3
    transform:  skew(ax[, ay])
                skewX(angle)
                skewY(angle)

  • 旋转中心：transform-origin:x-axis y-axis z-axis (值：left，right，center，length，%)

transition

transition提供了一种在更改CSS属性时控制动画速度的方法。 其可以让属性变化成为一个持续一段时间的过程，而不是立即生效的。(即平滑地改变css的属性值)

语法： transition：property name | duration //过渡时间

​ transition： property name | duration | delay //过渡时间、延长时间

​ transition：property name | duration | timing function | delay //过渡时间、效果、延长时间

​ transition: margin-left 4s, color 1s //两个属性用逗号隔开

​ transition: all 0.5s ease-out //all

  • transition-property :指定过渡的性质，比如transition-property:backgrond 就是指backgound参与这个过渡
  • transition-duration:指定这个过渡的持续时间
  • transition-timing-function:指定过渡类型，有ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier（贝塞尔曲线）
  • transition-delay:延迟过渡时间
1
2
3
4
5
6
transition-timing-function: linear  匀速
                            ease  慢-快-慢
                            ease-in  先慢后快
                            ease-out  先快后慢
                            ease-in-out  先慢后快再慢
                            cubic-bezier(n,n,n,n); 自定义（http://cubic-bezier.com/）

perspective

perspective 属性指定了观察者与z=0平面的距离，使具有三维位置变换的元素产生透视效果。z>0的三维元素比正常大，而z<0时则比正常小，大小程度由该属性的值决定。

默认情况下，透视消失点位于元素的中心，但是可以通过设置perspective-origin属性来改变其位置。在父容器上设置perspective（相当于远处的舞台），会让元素指向透视的消失点。

1
perspective-origin: x-axis y-axis  (值：left，right，center，length，%)

注：perspective在Z轴上，而perspective是设置Z轴的长度。在css3中只有设置了perspective的值元素才会有Z轴，perspective为none元素则没有Z轴(就是2D元素)。

animation & keyframes

创建动画序列，需要使用animation属性或其子属性，该属性允许配置动画时间、时长以及其他动画细节，但该属性不能配置动画的实际表现，动画的实际表现是由 @keyframes规则实现。

语法：animation: name duration timing-function delay iteration-count direction;

  • animation-name: 规定需要绑定到选择器的 keyframe 名称。
  • animation-duration: 规定完成动画所花费的时间，以秒或毫秒计。
  • animation-timing-function: ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier（贝塞尔曲线）
  • animation-delay:设置延时，规定在动画开始之前的延迟。
  • animation-iteration-count: infinite|小数定义循环（0.5将播放动画到一半）设置动画重复次数， 可以指定infinite无限次重复动画.
  • animation-direction: normal|alternate（交替反向运动）|reverse|alternate-reverse 设置动画在每次运行完后是反向运行还是重新回到开始位置重复运行。
  • animation-play-state: running|paused 暂停和恢复动画

一旦完成动画的时间设置， 接下来就需要定义动画的表现。通过使用@keyframes建立两个或两个以上关键帧来实现。每一个关键帧都描述了动画元素在给定的时间点上应该如何渲染。

  • 要使用关键帧, 先创建一个带名称的@keyframes规则，以便后续使用 animation-name这个属性来调用指定的@keyframes
  • 关键帧使用百分比来指定动画发生的时间点。0%表示动画的第一时刻，100%表示动画的最终时刻。因为这两个时间点十分重要，所以还有特殊的别名：from和to。
  • @keyframes 不存在层叠样式(cascade)的情况，如果一个@keyframes 里的关键帧的百分比存在重复的情况，以最后一次定义的关键帧为准。

小结：animation定义动画的时间，keyframes定义动画的效果。

举例