動畫--過渡函數 transition-timing-function

時間 2019-11-09

標籤動畫過渡函數 transition timing function 简体版

原文原文鏈接

動畫--過渡函數 transition-timing-function

transition-timing-function屬性指的是過渡的「緩動函數」。主要用來指定瀏覽器的過渡速度，以及過渡期間的操做進展狀況，其中要包括如下幾種函數：css

(單擊圖片可放大)html

案例展現：web

在hover狀態下，讓容器從一個正方形慢慢過渡到一個圓形，而整個過渡是先加速再減速，也就是運用ease-in-out函數。瀏覽器

HTML代碼:函數

<div></div>

CSS代碼:動畫

div {
  width: 200px;
  height: 200px;
  background: red;
  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-in-out;
  transition-timing-function: ease-in-out;
  -webkit-transition-delay: .2s;
  transition-delay: .2s;
}
div:hover {
  border-radius: 100%;
}

演示結果spa

鼠標移入：code

鼠標移出：htm

<!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>

div {
  width: 200px;
  height: 200px;
  background-color: orange;
  margin: 20px auto;
  border-radius: 100%;
  -webkit-transition-property: -webkit-border-radius,background-color;
  transition-property: border-radius,background-color;
  -webkit-transition-duration: 1s;
  transition-duration: 1s;
   -webkit-transition-timing-function: linear;
  transition-timing-function: linear;

}
div:hover {
  border-radius: 0px;
  background-color:red;
}

相關標籤/搜索

每日一句

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