transition transform

简介:
transition主要包含四个属性值:
执行变换的属性:transition-property,
变换延续的时间:transition-duration,
在延续时间段,变换的速率变化transition-timing-function,
变换延迟时间transition-delay
也可以酱紫哦: transition: background 0.5s ease-in,color 0.3s ease-out;

取值:

transition-timing-function的值允许你根据时间的推进去改变属性值的变换速率,transition-timing-function有6个可能值:

1、ease:(逐渐变慢)默认值,ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0).

2、linear:(匀速),linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0).

3、ease-in:(加速),ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0).

4、ease-out:(减速),ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0).

5、ease-in-out:(加速然后减速),ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)

6、cubic-bezier:(该值允许你去自定义一个时间曲线), 特定的cubic-bezier曲线。 (x1, y1, x2, y2)四个值特定于曲线上点P1和点P2。所有值需在[0, 1]区域内,否则无效。


transition-suji.png

兼容写法:

-moz-、 -webkit-t、-ms-




      本文转自Ansue  51CTO博客,原文链接:http://blog.51cto.com/ansue/1621950,如需转载请自行联系原作者




相关文章
|
7月前
|
算法 计算机视觉 Python
Transform
离散傅里叶变换(Discrete Fourier Transform,简称 DFT)是一种将离散时间域信号转换为离散频域信号的数学变换方法。它可以将一个有限长度的离散信号序列转换为一系列不同频率的正弦和余弦波,从而使我们能够更容易地分析和处理信号。
84 0
|
9月前
|
前端开发
transition和animation的区别
transition和animation的区别
|
11月前
|
前端开发
今天来讲讲 scale、translate 和 rotate 这三个属性,你不会以为我是要讲的是 transform 吧?
总所周知,transform 是 CSS3 中最强大的属性之一,它有这么三个函数属性值:scale、translate 和 rotate,它们分别是缩放、位移和旋转,但是你有没有想过有这么一天它们三个
138 0
今天来讲讲 scale、translate 和 rotate 这三个属性,你不会以为我是要讲的是 transform 吧?
|
12月前
|
前端开发
background属性:linear-gradient使用
background属性:linear-gradient使用
你不知道的css3 transition animation transform
你不知道的css3 transition animation transform
|
前端开发
线性渐变背景 CSS linear-gradient() 函数 background-image: linear-gradient()
线性渐变背景 CSS linear-gradient() 函数 background-image: linear-gradient()
93 0
线性渐变背景 CSS linear-gradient() 函数 background-image: linear-gradient()
transform: translateY(-50%)实现垂直居中效果
transform: translateY(-50%)实现垂直居中效果
113 0
transform: translateY(-50%)实现垂直居中效果
|
算法
Transition matrix
**Transition matrix** 中文名:转移矩阵;转换矩阵;跃迁矩阵;状态转移矩阵
2538 0
|
Web App开发 移动开发 HTML5