CSS3中的新特性-过渡

阿年、嗯啊

发布于 2021-04-27 15:31:06

66600

代码可运行

文章被收录于专栏：阿年的数据梦阿年的数据梦

运行总次数：0

代码可运行

CSS3中的过渡

CSS3中新增了一个过渡属性，它使得我们可以在不使用flash动画或者Javascript的情况下，当元素从一种样式变换为另一种样式时为元素添加过渡效果。这种过渡是从一个状态渐渐的过渡到另外一个状态。
过渡最简单的使用是和hover一起搭配使用。
它的语法为：

  transition: 要过渡的属性 花费的时间 运动曲线 开始时间;

参数说明：

参数	解释
要过渡的属性（必须写）	要变化的属性，比如宽度，高度，颜色，内外边距等都可以。如果想要所有的属性都变化，那么可以用all来代替。
花费的时间（必须写）	完成这个过渡变化的效果用多长时间。单位是秒，注意：一定要写上单位例如0.5s或者.5s
运动曲线（可以省略）	默认值是ease(变化速度逐渐慢下来)，跟多值参考下一个表格。
开始时间（可以省略）	默认为0s(必须写单位),可以设置延迟触发时间

运动曲线取值表格

运动曲线可取值	含义
linear	匀速
ease	逐渐慢下来
ease-in	加速
ease-out	减速
ease-in-out	先加速后减速

  /* CSS */
  .a {
      width: 150px;
      height: 10px;
      border: 1px solid red;
      border-radius: 5px;
  }

  .b {
      width: 50%;
      height: 100%;
      border-radius: 5px;
      background-color: red;
      transition: width .5s;
  }

  .a:hover .b {
      width: 100%;
  }

  <!-- HTML -->
  <div class="a">
  	<div class="b"></div>
  </div>