css transition属性用于页面的元素的过渡效果，它是css3的一种属性，我们可以同它来做一些元素的动态效果。

借助于transition属性，在不使用js或者flash的技术的情况下，它可以将元素从一种样式逐渐更改为另一种样式。

语法

transition: property duration timing-function delay;

属性

以上语法transition是一个简写的语法，也就是说它将4个属性写在一起，您也可以分开来写。比如：

transition-property: width;
transition-duration: 1s;
transition-timing-function: ease;

属性解释如下：

  • transition-property：设置元素中参与过渡的属性，比如元素的宽度width，高度height；
  • transition-duration（必须）：过渡效果持续时间（不指定默认为0，不会有任何效果）
  • transition-timing-function：设置元素过渡的动画类型；（默认值：ease）
  • transition-delay：指定过渡延迟开始时间（默认为0）

我们可以一次性对元素的多个属性进行设置，比如同时设置元素的宽度和高度，transition: width 2s, height 2s;。

transition-property属性

transition-property 属性用来设置元素中参与过渡的属性名称，语法格式如下：

transition-property: none | all | property;
参数说明如下：
  • none：表示没有属性参与过渡效果；
  • all：表示所有属性都参与过渡效果；
  • property：定义应用过渡效果的 CSS 属性名称列表，多个属性名称之间使用逗号,进行分隔。

transition-timing-function属性

transition-timing-function 属性用来设置过渡动画的类型，属性的可选值如下：

值描述
linear以始终相同的速度完成整个过渡过程，等同于 cubic-bezier(0,0,1,1)
ease以慢速开始，然后变快，然后慢速结束的顺序来完成过渡过程，等同于 cubic-bezier(0.25,0.1,0.25,1)
ease-in以慢速开始过渡的过程，等同于 cubic-bezier(0.42,0,1,1)
ease-out以慢速结束过渡的过程，等同于 cubic-bezier(0,0,0.58,1)
ease-in-out以慢速开始，并以慢速结束的过渡效果，等同于 cubic-bezier(0.42,0,0.58,1)
cubic-bezier(n, n, n, n)使用 cubic-bezier() 函数来定义自己的值，每个参数的取值范围在 0 到 1 之间
注意1：如果你不指定持续时间，过渡将不起作用，因为它的默认值为0。当你将光标移动到一个元素上时，过渡效果开始。

注意2：IE9及更早版本不支持transition属性。

例子

1）单个属性值设置的效果

<!DOCTYPE html>
<html>
	<title>css transition 过渡效果 </title>
<head>
<style> 
div{
    width: 100px;
    height: 100px;
    background: orange;
    -webkit-transition: width 1s; /* Safari 3.1 to 6.0 */
    transition: width 1s;
}
div:hover {
    width: 300px;
}
</style>
</head>
<body>
<div></div>
<p>将光标移到上面的div元素上，以查看过渡效果.</p>
</body>
</html>
效果gif：

css transition 过渡效果

2）多个属性值设置的效果

 <!DOCTYPE html>
<html>
	<title>css transition 过渡效果 多个属性值 </title>
<head>
<style> 
div {
    padding:15px;
    width: 150px;
    height: 100px;
    background: violet;
    -webkit-transition: width 2s, height 2s, -webkit-transform 2s; /*  Safari 3.1 to 6.0 */
    transition: width 2s, height 2s, transform 2s;
}
div:hover {
    width: 300px;
    height: 200px;
    -webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */
    transform: rotate(360deg);
}
</style>
</head>
<body>
<div><b>yxjc123.com</b><p> (将光标移到我身上以查看效果)</p></div>
</body>
</html>

效果如下，它是一个旋转的效果。

css transition 过渡效果