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

时间 2019-11-13

标签动画过渡所需时间 transition duration 繁體版

原文原文链接

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

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

案例演示：html

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

HTML:动画

<div></div>

CSS:spa

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;
}

演示结果：code

鼠标移入htm

鼠标移出blog

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

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

</body>
</html>