css3过渡属性

孙景荣

已于 2023-01-29 10:16:32 修改

阅读量586

点赞数 1

分类专栏： CSS 文章标签： css3 前端

于 2022-10-01 19:51:33 首次发布

本文链接：https://blog.csdn.net/ssjjrr/article/details/127129653

版权

CSS 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

一、过渡属性

过渡属性: 元素从一种状态变化到另外一种状态(初始和结束必须都是存在)
1.transition-property: 对象中的参与过渡的属性，属性值可以设置参与过渡的过程，默认为all，表示所有属性都参与过渡，省略不写
2.transition-duration: 对象过渡的持续时间，单位ms s
3. transition-delay: 对象延迟过渡的时间，单位ms s
4. transition-timing-function: 对象中过渡的动画类型

简写方式 transition
属性值: all 0.8s 延迟运动方式

二、示例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      div {
        width: 200px;
        height: 200px;
        background: red;
        transition-property: all;
        transition-duration: 0.8s;
        transition-delay: 0;
        transition-timing-function: linear;
      }
      div:hover {
        width: 500px;
        height: 500px;
        background: green;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>