过渡属性
过渡（transition）是CSS3新增的属性，添加某种效果可以从一种样式转变到另一个的时候可以使用过渡的属性。要实现过渡效果，必须规定两项内容：指定要添加效果的CSS属性；指定效果的持续时间。
过渡相关的属性：
- transition()：简写属性，用于在一个属性中设置四个过渡属性。
- transition-property：规定应用过渡的 CSS 属性的名称。
- transition-duration：定义过渡效果花费的时间。默认是 0。
- transition-timing-function：规定过渡效果的时间曲线。默认是 "ease"。
- transition-delay：规定过渡效果何时开始。默认是 0。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>CSS3 过渡</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
div{width: 200px;height: 100px;background-color: lime;}
.transition-width:hover{width: 400px;height: 200px;font-size: 40px;}
.transition-trans:hover{transform: rotate(180deg);background-color: magenta;}
</style>
</head>
<body>
<h1>鼠标放在元素上，观察元素的变化。</h1>
<div style="transition: width,height,font-size 2s;" class="transition-width">CSS3 transition过渡 宽高变长 字体变大</div>
<div style="transition: all 2s;" class="transition-trans">CSS3 transition过渡 颜色改变 旋转180度</div>
</body>
</html>
指定需要过渡的属性和时间可以实现过渡效果，或者使用all来为所有可以过渡的属性创建过渡效果。
过渡时间和曲线
前面说到我们可以使用transition-timing-function属性来规定过渡效果的时间曲线，该属性有六个可选值
- linear：规定以相同速度开始至结束的过渡效果。
- ease：规定慢速开始，然后变快，然后慢速结束的过渡效果。
- ease-in：规定以慢速开始的过渡效果。
- ease-out：规定以慢速结束的过渡效果。
- ease-in-out：规定以慢速开始和结束的过渡效果。
- cubic-bezier(n,n,n,n)：在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>CSS3 过渡</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
div{width: 200px;height: 100px;border: 1px solid black; background-color: lime;}
.transition-width:hover{width: 500px;}
</style>
</head>
<body>
<h1>鼠标放在元素上，观察元素的变化。</h1>
<div style="transition: width 2s linear;" class="transition-width">CSS3 transition过渡 linear</div>
<div style="transition: width 2s ease;" class="transition-width">CSS3 transition过渡 ease</div>
<div style="transition: width 2s ease-in;" class="transition-width">CSS3 transition过渡 ease-in</div>
<div style="transition: width 2s ease-out;" class="transition-width">CSS3 transition过渡 ease-out</div>
<div style="transition: width 2s ease-in-out;" class="transition-width">CSS3 transition过渡 ease-in-out</div>
<div style="transition: width 2s cubic-bezier(0,0.2,0.5,1);" class="transition-width">CSS3 transition过渡 cubic-bezier(0,0.2,0.5,1)</div>
</body>
</html>
同样我们还可以使用transition-delay延迟属性来指定什么时候开始过渡。
网友评论