CSS3 transition-timing-function

transition-timing-function

该属性用于设置过渡函数。

<!-- 当鼠标移动到 div 容器上，执行过渡效果 -->
#transition:hover {

 transition-property: all; 
 margin-left: 500px; 
 border: 3px double black;
 transition-duration: 2s;

 <!-- ease-out | 越来越慢 -->
 transition-timing-function: ease-out;
}

<div style="width:100px; height:100px; background:orange;" id="transition"></div>

过渡效果

过渡函数

下列是transition-duration的所有过渡函数。

函数	含义
ease	默认值，贝塞尔曲线
linear	线性匀速前进
ease-in	越来越快
ease-out	越来越慢
ease-in-out	先快后慢

☞ 返回 publish: 8/8/2018, 2:49:54 PM / by: jmjc.tech

CSS3 教程 CSS3 入门 CSS3 选择器 CSS3 颜色 CSS3 度量单位 CSS3 文本 CSS3 盒子模型 CSS3 边框 CSS3 背景 CSS3 表格 CSS3 列表 CSS3 变形效果 CSS3 过渡效果 CSS3 动画效果 CSS3 媒体查询 CSS3 浮动布局 CSS3 定位布局 CSS3 多列布局 CSS3 Flex布局 @精简版 - CSS3教程