likes
comments
collection
share

CSS3-transition过渡动画详解

作者站长头像
站长
· 阅读数 22

基本了解

​ css中实现动画有两种方式：transition过渡动画、 animation自定义动画。

​ 在不使用transition时，若通过用户的交互直接改变css样式属性，呈现的形式是立刻转变，但有时我们希望这个变化是有过渡效果的，这时就可应用transition过渡动画了。

我们先来简单了解下transition族属性：

属性含义
transition-property指定使用过渡效果的css属性
transition-duration设置过渡动画持续时间
transition-timing-function设置动画的时间函数。
transition-delay设置动画的延迟时间

下面详细介绍各个属性👇

transition-property

transition-property : 用于指定使用过渡效果的css属性，默认值为all。

案例展示：

CSS3-transition过渡动画详解

<style>
  .box {
    width: 50px;
    height: 50px;
    background-color: pink;
    transition-property: all;
    transition-duration: 0.8s;
  }
  .box::after {
    content: "★";
    color: rgba(255, 255, 255, 0.8);
    width: inherit;
    height: inherit;
    display: flex;
    justify-content: center;
    align-items: center;
    transition-duration: 0.8s;
  }
  .box:hover {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: skyblue;
  }
  .box:hover::after {
    content: "♥";
    font-size: 100px;
  }
</style>
<body>
  <div class="box"></div>
</body>

为了使动画有过渡效果，必须设置过渡时间，这也是过渡动画的基本要素，所以上述具有动画的元素都设置了transition-duration。

注意点

transition-property的默认值

​ 上述案例在触发hover时,我只改变了文字和大小，可实际效果却影响了文字的布局（文字移动），产生的原因就是忽略了transition-property的默认值。

​ 我们已经多次提及了transition-property的默认值，上述代码给.box的伪类::after只添加了一个transition-duration，而没有设置transition-property,所以会应用其默认值all，也就是说：所有能够被transition支持的属性都会有过渡效果。

我们来具体分析一下，为什么会产生变动：

​ .box伪类::after的宽高是继承父级的，由于在触发hover时，父级宽高发生改变，所以伪类宽高也会跟随改变，从而影响了布局。

​ 为了更清晰的看到原因，我们可以为伪类添加一个背景

CSS3-transition过渡动画详解

.box::after {
  ……
  background-color: rgba(0, 0, 0, 0.3); 
}

如果我们只想让文字大小产生过渡效果，只需要明确指定transition-property:font-size即可。

transition不能支持的过渡

​ 上述动画中可发现，文字内容是突变的，当然还有其他transition不支持过渡的选项，也都很好理解:

  • z-index
  • display

transition-duration

transition-duration定义动画的过渡时间，默认值为0s,也就是说，如果不设置该属性，默认是没有过渡效果的。

transition-timing-function

定义动画事件函数，animation族属性中也有该属性，该属性可以改变动画的执行速率以及轨迹。

其值对应animation-timing-function

值描述
linear动画从头到尾的速度是相同的。
ease（缓解）默认值：动画以低速开始，然后加快，在结束前变慢。
ease-in动画以低速开始。
ease-out动画以低速结束。
ease-in-out动画以低速开始和结束。
cubic-bezier(n,n,n,n)贝塞尔曲线（自定义数值），可到相关网站可视化设置。

案例展示：

CSS3-transition过渡动画详解

.box {
  width: 50px;
  height: 50px;
  background-color: pink;
  transition-property: all;
  transition-duration: 0.8s;
  transition-timing-function: cubic-bezier(0.49, 1.59, 0.46, -0.21);
}
.box:hover {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  transform: rotate(360deg);
  background-color: skyblue;
}

transition-delay

transition-delay用于设置动画延迟时间，单位为s

下例动画：触发hover于1s后执行，离开元素后也会延时1s再过渡

CSS3-transition过渡动画详解

<style>
  main {
    width: 300px;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transform: perspective(500px) rotateY(50deg);
    transform-style: preserve-3d;
    background-color: #ddd;
    font-size: 24px;
  }
  .box {
    width: 50px;
    height: 50px;
    background-color: pink;
    transition-property: all;
    transition-duration: 0.8s;
    transition-delay: 1s;
    transform-origin: center;
  }
  
  main:hover .box {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    transform: rotateY(90deg) translateZ(180px);
    background-color: skyblue;
    /* transition-delay: 0s; */
  }
</style>
<body>
  <main>
    <p>跨过这堵墙</p>
    <div class="box"></div>
  </main>
</body>

若我们想要立即触发动画，只在恢复时延迟过渡，该怎么办呢？

我们只需要在动画触发时，重新设置transition-delay: 0s 即可，动画一旦出发就会应用对应的样式表，这时重置延时为0s，动画执行完毕，恢复原来样式，而原来样式表中transition-delay: 1s设置延时为1s，恢复时就会延时1s。

我们只需要在原有代码基础上添加

  main:hover .box {
  	……
  	transition-delay: 0s;
  }

添加之后效果：

CSS3-transition过渡动画详解

当同时使用多个动画时，这个属性使用频率非常高，可依次定义每个动画的延迟执行时间，区分开每个动画。

当然其实也可分别设置每个动画的其它transition族属性，后面会详细介绍多动画累加。

多属性累加

​ 我们知道，当transition-property属性值为all，则所有transition能够支持的属性发生改变时，都会触发过渡效果，但能不能对每个属性的过渡分别进行设置呢？

答案是当然可以，之前介绍的transition族属性都可以设置多个值，各个值之间使用,隔开，从而分别设置各个属性的过渡效果。

值得注意的是：其它transition族属性在设置多个值时，要与transition-property定义的各个属性对应起来，才能准确对目标属性定制过渡效果。

例如：

transition-property: width, heitht, color ;
trnasition-duration: 1s, 1.5s, 2s ;
transition-timing-function: ease, linear, ease-in-out ;
transition-delay: 0s, 1s, 0s ;

当然，也可使用transition综合属性:

定义顺序分别为：

  • transition-property
  • transition-duration
  • transition-timing-function
  • transition-delay

下面代码与上例效果相同

transition: width 1s ease ,heitht 1.5s linear 1s, color 2s ease-in-out ;

最后

原创文章，文笔有限，才疏学浅，文中若有不正之处，速速告知。

本文到此结束，希望对你有所帮助，我是 Ashun ，在校大学生，立志成为资深前端工程师，欢迎大家一起交流、学习。后续更新更多文章，请持续关注哦~

转载自:https://juejin.cn/post/6970885478967050254
评论
请登录