转载 

CSS Transform, Animation, and More

分类:没有分类    395人阅读    maoguxia  2024-03-08 22:54

CSS transistion Property

The CSS transition property specifies how to transit a property (such as colorheight, etc.) into its target value. It has these 4 properties:

  • transition-property: the CSS property (e.g., colorweight) to be transitioned, or all if all the transitionabale properties need to be transitioned.
  • transition-duration: in second (s) or millisecond (ms).
  • transition-timing-function: ease|ease-in|ease-out|ease-in-out|linear|cubic-bezier()|steps(): the function describes how the intermediate values during the transistion are calculated.
  • transition-delay: delay in second (s) or millisecond (ms) before the transition starts.
  • (Shorthand) transition: property duration timing-function delay
Example 1:
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Test CSS "transition" Property</title>
  <style>
    .bg-transition {
      transition: background-color 5s; /* shorthand for: property duration */
    }
    div:hover {
      background-color: red;  /* apply transition from normal to this value */
    }
    div {
      background-color: lightgray;  /* normal state */
      width: 200px;
      height: 100px;
    }
  </style>
</head>
<body>
  <div class="bg-transition"></div>
</body>
</html>

When the mouse pointer hovers over the element, the background color transitions from normal state to the new value in 5 second.

Example 2

Three properties are transitioned in this example, with various durations and delays.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Test CSS "transition" Property</title>
  <style>
    .transition {
      transition-property: height, width, background-color;
      transition-duration: 1s, 1s, 5s;
      transition-timing-function: linear;
      transition-delay: 0s, 1s, 0s;
    }
    .transition-all {
      transition: all 3s;  /* all transitionable properties */
    }
    div:hover {
      height: 200px;
      width: 200px;
      background-color: red;
    }
    div {
      background-color: lightgray;
      width: 100px;
      height: 100px;
      margin: 10px;
    }
  </style>
</head>
<body>
  <div class="transition"></div>
  <div class="transition-all"></div>
</body>
</html>
支付宝打赏 微信打赏

如果文章对你有帮助,欢迎点击上方按钮打赏作者

 工具推荐 更多»