CSS-transition的一些简单用法

CSS-transition的一些简单用法

Scroll Down

作为公司一打杂的(啥都干,没前端工程师),那么页面的设计也得硬上!除去很多东西可以去Google复制粘贴, 做前端效果可能最离不开CSS里面的transition效果(或者是过度效果,也可以翻译为'转变'), 简洁的说就是当一个元素的样式属性发生变化,我们可以立刻看到页面元素发生变化, 变化所发生的时长, 这个时长内所产生的Transition(转变)效果.所以正是有了时间概念, 页面元素样式的变换不是即时的, 而是根据设定的时间从一种状态变成另外一种状态, 也就形成了一种动画过程.

  • transition-property – 什么属性将用动画表现,例如,opacity。

  • transition-duration – 转变过程持续时间。

  • transition-timing-function – 转变时使用的调速函数 (比如,linear、 ease-in 或自定义的 cubic bezier 函数)。

  • transition – 三种属性的合体简写。(鄙人最常用的一种)

实例

div {
  opacity: 1;
  transition: opacity 1s linear;
}

div:hover {
  opacity: 0;
}

Transition 也支持多个参数配置,用逗号隔开(顺序需要一致)

div {
  /*opacity 的变化过程将会持续 1 秒, left 值的变化过程将会持续 2 秒*/
  transition-property: opacity, left;
  transition-duration: 1s, 2s;
}

属性介绍

transition-property

允许值: none | all | <属性名>

初始值: all

描述: 指明什么属性将触发动画效果。none 值表示没有变化。 all 值表示所有可以动画演示的属性都可以触发动画效果。否则,只有指定的属性值方式变化才能触发动画效果。

transition-duration

允许值: <时间>

初始值: 0

描述: 指明动画持续的时间长度。

transition-timing-function

允许值: ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(x1, y1, x2, y2)

初始值: ease

描述: 这个 transition-timing-function 属性描述了动画随着时间运动的速度 - 时间函数。可以使用几种常见的调速函数,也可以使用立方贝塞尔 (cubic bezier) 函数加控制点来自定义动画的变换速度方式。对于立方贝塞尔曲线方程,我们需要两个点的(X,Y)来控制曲线。点 P0 固定是 (0,0) 而 P3 固定是 (1,1)。有了这个四个点就能计算出一条立方贝塞尔曲线。

这些调速函数的意思是这样的:

linear – 线性函数,返回值一个输入值一样的结果。

ease – 减缓函数,是缺省值,等同于 cubic-bezier (0.25, 0.1, 0.25, 1.0).

ease-in – 等同于 cubic-bezier (0.42, 0, 1.0, 1.0).

ease-out – 等同于 cubic-bezier (0, 0, 0.58, 1.0).

ease-in-out – 等同于 cubic-bezier (0.42, 0, 0.58, 1.0)

cubic-bezier – P0 和 P3 两个点分别是 (0,0) 和 (1,1) 。再加上另外两个点 (x1, y1, x2, y2) 就定义了一个立方贝塞尔曲线。

特性要点

  • 这些动画是暗含的。你的 JavaScript 脚本和 CSS 都像往常一样编写。动画只会简单的发生在属性值发生变化的时候。

  • 不支持这些 transition 属性的浏览器不会有任何动画发生。你的 JavaScript 和 css 不会对正常的显示带来任何负面影响。


PS:部分内容节选自互联网