CSS3 transitions
- CSS3的过渡就是平滑的改变一个元素的CSS值,是元素从一个样式逐渐过渡到另一个样式。
- CSS3过渡使用transition属性来定义,transition属性的基本语法如下所示:
transition:prpperty duration timing-function delay;
1.属性解释
transition-property
:应用过渡的CSS属性的名称。
none:没有属性会获得过渡效果;
all:默认值,所有属性都将获得过渡效果;
property:定义应用过渡效果的CSS属性名称列表
transition-duration
:过渡效果需要的时间。以秒或毫秒计,默认值为0,表示没有效果
transition-timing-function
:过渡效果的世界曲线。
linear:规定以相同速度开始至结束的过渡效果;
ease:默认值,规定慢速开始,然后变快,然后慢速结束的过渡效果;
ease-in:规定以慢速开始的过渡效果;
ease-out:规定以慢速结束的过渡效果;
ease-in-out:规定以慢速开始和结束的过渡效果;
cubic-bezier(n,n,n,n):在cubic-bezier函数中定义自己的值,可能的值是0至1之间的数值。
transition-delay
:效果开始之前需要等待的时间
2.示例如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS 过渡</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #F7F7F7;
}
.transition {
width: 200px;
height: 200px;
margin: 50px auto;
background-color: green;
transition: all 4s;
}
.transition:hover {
background-color: yellow;
}
</style>
</head>
<body>
<div class="transition"></div>
</body>
</html>
效果如下:
开始前:
鼠标停留后: