解释

transition（ CSS 属性）是 transition-property，transition-duration，transition-timing-function 和 transition-delay 的一个简写属性。
transition可以为一个元素在不同状态之间切换的时候定义不同的过渡效果。
以下是属性解释。

值	描述
transition-property	指定CSS属性的name，transition效果
transition-duration	transition效果需要指定多少秒或毫秒才能完成
transition-timing-function	指定transition效果的转速曲线
transition-delay	定义transition效果开始的时候

以下列出了transition常用的几种。

1. transition: property name | duration

举例： transition: width .8s;
表示width属性变化时过渡时间为0.8s

2. transition: property name | duration | delay

举例：transition: width .8s .5s;
表示width属性变化时过渡时间为0.8s 且延迟0.5s之后执行宽度变化

3. transition: property name | duration | timing function

举例：transition: width .8s ease-in-out;
使用了转速曲线，以慢速开始和结束的过渡效果。
time function可能的值有以下。

值	描述
linear	规定以相同速度开始至结束的过渡效果
ease	规定慢速开始，然后变快，然后慢速结束的过渡效果
ease-in	规定以慢速开始的过渡效果
ease-out	规定以慢速结束的过渡效果
ease-in-out	规定以慢速开始和结束的过渡效果
cubic-bezier(n,n,n,n)	在cubic-bezier函数中定义自己的值。可能的值是0至1之间的数值

4. transition: property name | duration | timing function | delay

举例： transition: width .8s ease 1s;
表示宽度变化时，过渡时间为0.8s, ease表示规定慢速开始，然后变快，然后慢速结束的过渡效果，延迟1s执行宽度变化

5. 多个属性用逗号隔开

transition: height .8s, color .8s;

6. 应用于所有属性

transition: all 0.5s ease-out;

7. 其他

/* Global values */
transition: inherit;
transition: initial;
transition: unset;
参考地址：MDN、菜鸟教程

css3 transition用法（很详细）相关推荐

3款大屏播放软件，用法很详细，用于大屏幕播放视频和图片
要在展厅或户外的LED大屏幕上长时间循环播放视频或图片,就需要用到大屏播放软件,笔者整理几款好用的给大家. 一.动屏大屏播放软件特点这款软件的特点是配置简单,界面美观,即插即用,将视频或图片文件拷 ...
Java Scanner类的常用方法及用法（很详细）
Java Scanner类的方法及用法(很详细) Scanner类简介 Java 5添加了java.util.Scanner类,这是一个用于扫描输入文本的新的实用程序.它是以前的StringToken ...
介绍一篇关于session的好文章,写的很详细
介绍一篇关于session的好文章,写的很详细目录: 一.术语session 二.HTTP协议与状态保持三.理解cookie机制四.理解session机制五.理解javax.servlet.h ...
python教程很详细_Python编程入门教程：从入门到高级，非常详细
本文的资料和内容是我下载的,觉得非常有用,于是转过来大家瞧瞧: 这里给初学Python的朋友提供一些建议和指导吧.大神请无视, 俗话说:授人以鱼不如授人以渔.所以我这里只是阐述学习过程,并不会直接详细 ...
转：Java多线程学习（总结很详细！！！）
Java多线程学习(总结很详细!!!) 此文只能说是java多线程的一个入门,其实Java里头线程完全可以写一本书了,但是如果最基本的你都学掌握好,又怎么能更上一个台阶呢? 本文主要讲java中多线程 ...
[转载]Matlab绘图-很详细，很全面（包含各种标示符的输入方法）
原文地址:Matlab绘图-很详细,很全面(包含各种标示符的输入方法)作者:deman Matlab绘图-很详细,很全面 Matlab绘图强大的绘图功能是Matlab的特点之一,Matlab提供了一 ...
python or的用法_详细介绍Python中and和or实际用法
and 和 or 的特殊性质在Python 中,and 和 or 执行布尔逻辑演算,但是它们并不返回布尔值:而是,返回它们实际进行比较的值之一.下面来看一下实例.>>> 'a' a ...
[ISUX译转]CSS3 transition规范的实际使用经验
本篇文章主要讲述CSS3 transition规范和在不同浏览器之间的使用差异,关于具体解决方法或如何规避问题的意见可以参考另一篇非常有见地的文章,"All You Need to Know ...
Iframe 用法的详细讲解
Iframe 用法的详细讲解把iframe解释成"浏览器中的浏览器"很是恰当 <iframe frameborder=0 width=170 height=100 marg ...

css3 transition用法（很详细）

解释