一文说清这难搞的CSS动画

1,819 阅读4分钟

开启掘金成长之旅!这是我参与「掘金日新计划 · 2 月更文挑战」的第 4 天,点击查看活动详情

你学前端的时候,是不是会有一种感觉学会了,又感觉学不会的状态。很大一个原因是CSS属性太多了,很多效果并不能直观的拆解成CSS属性,动画就是其中一项。比如transform、transition、animation这几个,初学者就经常会区分不清楚。 简单区分下这几个:

  • transform 就是变形。针对的是DOM的形状改变,比如旋转,缩放,移动。这个和动画没什么关系,一般可以作为某个动画的一个变量。
  • transition 就是过渡。可以针对某一个样式属性,进行线性变化的动画。只能做简单的过渡动画。
  • animation 就是真正的CSS动画了。 可以自定义一个动画效果,使用一些CSS属性来组合成复杂的动画。

transform

我们从transform开始讲解。代码如下,分别表示位移,缩放,旋转,倾斜。这几个都可以针对X轴Y轴Z轴做变形,这里的例子简单点,只做一个方向的变形。

.translateX {
  transform: translateX(30px);
}
.scaleX {
  transform: scaleX(1.5);
}
.rotateZ {
  transform: rotateZ(30deg);
}
.skewX {
  transform: skewX(30deg);
}

效果如图:

1.gif

transform的基点修改

另外,还有一个transform-origin,可以设置旋转元素的基点位置。怎么理解呢,前面的旋转都是基于元素中心点(center, center)为基点的旋转,transform-origin制定一个另外的基点来旋转,比如基于左上角(0,0位置)的旋转可以这么写:

.rotateZ {
  transform: rotateZ(30deg);
  transform-origin: left top;
}

对比下两个的区别:

2.gif

transition

transition就是过渡,支持简单的变化动画。直接上代码

.transition1 {
  transition: width 2s ease 100ms;
}
.transition1:hover {
  width: 400px;
}

3.gif

transition可以拆分成4个属性:

  • transition-property。用于指定过渡的变量,上面例子中的width,就是说过渡是针对width这个属性的。
  • transition-duration。过渡的时间。上面例子中的2s,就是说该过渡动画2秒完成。
  • transition-timing-function。过渡的动画函数。就是过渡进行的速度变化。常用的有linear, ease, ease-in。也可以通过 cubic-bezier 来设置自定义。
  • transition-delay。过渡开始的延迟。例子中的100ms,表示hover后,动画延迟100ms在开始。

transition指定多个过渡

那么问题来了,transition能否同时指定两个属性过渡呢?答案是当然可以。两个属性过渡,就不能合并在一起写了,需要按照4个拆开的属性来写。

.transition2 {
  transition-property: width height;
  transition-duration: 2s 1s;
  transition-timing-function: ease linear;
  transition-delay: 100ms 1s;
}
.transition2:hover {
  width: 400px;
  height: 150px;
}

4.gif

从效果可以看出,过渡会先进行width变化,等到1s后,再进行height变化。 但是这里有个问题,height过渡恢复时,也是执行1s的延迟后,在进行变化的。并不是hover后动画的反过来。如果要实现这种过渡和恢复是对称的,就需要自定义动画了。

animation

和前面类似, 先上一段简单的代码:

@keyframes anim {
  from {
    width: 260px;
  }
  to {
    width: 400px;
  }
}
.animation {
  animation: anim 2s ease 100ms 1;
}

5.gif

animation由8个属性合并而成,分别是:

  • animation-name。动画的方法,通过keyframes指定。
  • animation-duration。动画的执行时间。
  • animation-timing-function。动画的执行缓动函数。
  • animation-delay。动画开始的延迟时间
  • animation-iteration-count。动画运行的次数。infinite表示无数次。
  • animation-direction。动画播放的方向。正向播放,反向播放,还是先正向播放再反向播放。
  • animation-fill-mode。控制动画结束后,元素的样式。
  • animation-play-state。控制动画的状态。

根据上面的属性,我们就可以做一个复杂一点的动画了。

@keyframes anim1 {
  0% {
    width: 260px;
  }
  50% {
    height: 100px;
  }
  100% {
    width: 400px;
    height: 150px;
  }
}
.animation1 {
  animation: anim1 2s linear 100ms infinite alternate running forwards;
}
.animation1:hover {
  animation-play-state: paused;
}

这段代码的效果就是先等待100ms,然后根据keyframes的设置进行动画,运行2秒完成动画,不断重复。hover之后,动画暂停。

6.gif

后面如果要继续复杂下去,就是对keyframes里面的过程进行设置。

结束

好了,先写这么多,希望本文对你有所帮助 :-) 最近新弄了一个地球号:写代码的浩,求关注 😄。后面会逐步把掌握的前端知识以及职场知识沉淀下来。 本文原创,转载请说明出处。如果有说明疑问或者建议,也欢迎交流。文中若有不正之处,万望告知。