tarnsition过渡效果

最新推荐文章于 2022-09-28 07:00:00 发布

mufengs16

最新推荐文章于 2022-09-28 07:00:00 发布

阅读量240

点赞数

分类专栏： CSS3.0 文章标签： css3

本文链接：https://blog.youkuaiyun.com/qq_44087363/article/details/109730621

版权

CSS3.0 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了CSS3的transition属性，它是一个简写属性，用于设置元素的过渡效果。内容包括transition-property（指定过渡的CSS属性）、transition-duration（定义过渡的持续时间）、transition-delay（设定过渡开始前的延迟时间）和transition-timing-function（定义过渡的速度曲线）。通过实例展示了如何应用这些属性来创建平滑的动画效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

transition过渡效果

transition同样亦是一个简写属性

transition-property: 属性选项 all指代所有属性，在这也可以只设置width/height，应用于单独某个属性
transition-duration:动画持续时间
transition-delay:延迟时间
transition-timing-function: esae是默认值，即整个过程先慢后快再慢。如果是ease-in,即是先慢后快；ease-out,即是先快后慢；ease-in-out,即是先慢后快再慢，和ease效果几乎等同

实例

<!DOCTYPE html>
<html>
  <head>
    <title>transition过度属性</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width initial-scale=1.0"/>
    <link rel="stylesheet" href="./pattern.css"/>
  </head>
  <body>
    <div class="main">
      <div class="wrapper">    
      </div>
      <div class="outBox">
      </div>
    </div>
  </body>
</html>

* {
  margin:0;
  padding:0;
}
.main{
  width:100px;
  margin:60px auto;
}
.wrapper {
  width:100px;
  height:100px;
  background-color:lightskyblue;
  cursor:pointer;
  transition-property:all /*height all指代所有属性，在这也可以只设置width/height，应用于单独某个属性*/;
  transition-duration:.8s; /*动画持续时间*/
  transition-delay:0s; /*延迟时间*/
  transition-timing-function:ease; /*esae是默认值，即整个过程先慢后快再慢。如果是ease-in,即是先慢后快；ease-out,即是先快后慢；ease-in-out,即是先慢后快再慢，和ease效果几乎等同；*/
 /* tansition:all .8s 1s ease-in; 简写属性，即是属性值-持续时间-延迟时间-过渡函数*/ 
}
.wrapper:hover {
  width:150px;
  height:200px;
}
.outBox {
  width:50px;
  height:50px;
  background-color:lightsalmon;
  cursor:pointer;
  transition:all .6s .6s ease-out
}
.outBox:hover {
  width:100px;
  height:100px;
  background-color:lightgreen;
  border-radius:15px;;
}

效果