動畫--過渡所需時間 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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。