CSS transition过渡属性详解

瑞雨溪

已于 2022-11-12 13:12:48 修改

阅读量1.9k

点赞数

分类专栏： HTML基础文章标签： css css3 html

于 2022-11-12 12:12:11 首次发布

本文链接：https://blog.csdn.net/m0_57301042/article/details/127818219

版权

HTML基础专栏收录该内容

6 篇文章 0 订阅

订阅专栏

transition属性作用

transition属性用来给元素的属性加过渡动画，当元素的属性变化时会有一个缓慢变化的动画。

transition属性用法

transition的属性值

属性	作用
transition-property	要过渡的css属性名
transition-duration	过渡动画的时间
transition-timing-function	过渡动画速度曲线函数
transition-delay	过渡动画开始的延迟时间

transition复合书写

transition:<属性名> <动画时间><动画速度曲线><动画延迟时间>；

如：transition:width .3s ease-inout;

动画时间应始终大于等于0.1s，否则过渡动画不会生效。

属性名可以用一个关键词all，代表所有属性值。

动画的延迟时间是可选的。

可以同时设定多个属性，格式如下transition:<属性名> <动画时间><动画速度曲线><动画延迟时间>,<属性名> <动画时间><动画速度曲线><动画延迟时间>。用逗号隔开每个属性的设置

transition属性用法实例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    div {
      width: 200px;
      height: 200px;
      background: #000;
      transition: background 0.3s ease-in-out;
    }
    div:hover {
      background: pink;
    }
  </style>
  <body>
    <div class="box1"></div>
  </body>
</html>

效果如下图