作为公司一打杂的(啥都干,没前端工程师),那么页面的设计也得硬上!除去很多东西可以去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:部分内容节选自互联网