动画--过渡所需时间 transition-duration

来源：互联网发布：国际版淘宝学校哪里有编辑：程序博客网时间：2024/05/05 03:43

transition-duration属性主要用来设置一个属性过渡到另一个属性所需的时间，也就是从旧属性过渡到新属性花费的时间长度，俗称持续时间。

案例演示：

在鼠标悬停（hover）状态下，让容器从直角慢慢过渡到圆角，并让整个动画持续0.5s。

HTML:

<div></div>

CSS:

div {  width: 300px;  height: 200px;  background-color: orange;  margin: 20px auto;  -webkit-transition-property: -webkit-border-radius;  transition-property: border-radius;  -webkit-transition-duration: .5s;  transition-duration: .5s;  -webkit-transition-timing-function: ease-out;  transition-timing-function: ease-out;  -webkit-transition-delay: .2s;  transition-delay: .2s;}div:hover {  border-radius: 20px;}

演示结果：

鼠标移入

鼠标移出

任务

在右侧CSS编辑器第8行输入正确的代码，让容器高度从200px慢慢过渡到100px，并且整个过渡持续1s。

<!DOCTYPE www.dztcsd.com/html>
<html>
<head>
<meta charset="utf-8">
<title>变形与动画</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div></div>
</body>
</html>

0 0