CSS动画

前言

能用CSS实现很多动画，是一件很装逼的事情，所以必须得好好学！本文结合小册讲解内容及网上学习资料，分享了几种有趣且快速实现的动画案例。

基础知识
transition用于过渡，避免不同状态切换属性时过于生硬。
animation让节点有更多状态，交互效果更精彩。
transform用于旋转rotate、缩放scale、平移translate、透视perspective或倾斜skew元素。

一、纯CSS点击会滚的圆动画

要想实现点击圆形就能滚的效果，可以借助选择器:active和animation-play-state来实现。

点击水杯时，可以触发选择器:active的出现。animation-play-state则可以指定动画是否正在运行或已暂停，属性值有running和pause。

这里要注意的是，在圆形平移滚动过程中，要将translate放在rotate前面。因为圆形实际上是一个被裁剪的正方形，在旋转的过程中会导致transform-origin相对页面发生变化。

<div class="wrap">
  <div class="circle"></div>
  <div class="line"></div>
</div>

/* 仅展示核心代码 */
.circle {
  animation: scroll 5s ease-in alternate infinite;
  animation-play-state: paused;
}

@keyframes scroll {
  0% {
    transform: translateX(0px) rotate(0deg);
  }

  100% {
    transform: translateX(200px) rotate(360deg);
  }
}
.line {
  animation: addline 5s ease-in alternate infinite;
  animation-play-state: paused;
}
@keyframes addline {
  0% {
    width: 0;
  }

  100% {
    width: 200px;
  }
}
.wrap:active {
  .circle,
  .line {
    animation-play-state: running;
  }
}

二、hover文本出现划线动画

这里利用transform的缩放scale来让初始时x轴为0，使得起初是看不到下划线的。在鼠标经过时，transform: scale3d(1, 1, 1)还原到正常比例。再加上transition过渡动画，即可。

/* 仅展示核心代码 */
.line::after {
  content: "";
  display: block;
  width: 100%;
  background: currentColor;
  transition: all 0.3s ease-in-out;
  transform: scale3d(0, 1, 1);
}
.line:hover::after {
  transform: scale3d(1, 1, 1);
}

三、转场动画

利用使用svg中定义的mark作为遮罩，可以很容易实现任意形状的动画。

/* 仅展示核心代码 */
.img {
  mask: url("../assets/images/star.svg") no-repeat center;
  mask-size: 300% 300%;
  animation: maskStarIn 1s infinite alternate;
}
@keyframes maskStarIn {
  from {
    mask-size: 0 0;
  }
  to {
    mask-size: 300% 300%;
  }
}

总结

简单的动画只是个别属性变化，实现起来并不难的。而复杂的动画，其实也是由一个个简单的动画组成，这时也不要觉得被难到，好事多磨，耐心实现就好。

参考资料：

本文正在参与「掘金小册免费学啦！」活动, 点击查看活动详情。

玩转CSS的艺术之美-动画 | 小册免费学

CSS动画

前言

一、纯CSS点击会滚的圆动画

二、hover文本出现划线动画

三、转场动画

总结