css动画效果

缓动动画

小球下落效果

@keyframes bounce {
  60%, 80%, 100% {
    transform: translateY(80px);
    animation-timing-function: cubic-bezier(.215, .61, .355, 1);
  }
  70% {
    transform: translateY(60px);
  }
  90% {
    transform: translateY(70px);
  }
}

.ball {
  width: 20px;height:20px;background:orange;border-radius:50%;margin: 0 auto;
  animation: bounce 3s cubic-bezier(.755, .05, .855, .06) infinite;
}

三次贝塞尔曲线可视化：https://cubic-bezier.com

输入框提示效果

一些提示，
比如只能输入数字

<div class="input-wrap">
  <input></input>
  <div class="callout">一些提示，<br/>比如只能输入数字</div>
</div>

.input-wrap {
  height: 24px;
  position: relative;
}
.input-wrap .callout {
  background: pink;
  position: absolute;
  left: 185px;
  top: 0;
  transform: scale(0);
  transition: .25s transform;
}
.input-wrap input:focus + .callout{
  transition: .5s cubic-bezier(.25, .1, .3, 1.5) transform;
  transform: scale(1);
}

逐帧动画

loading效果

网上随便找的一个马跑步素材：

利用该素材实现逐帧动画：

核心原理：background-position和steps

@keyframes loading {
  from {
    background-position: 0;
  }
  to {
    background-position: -550px; // 图片总宽度
  }
}

animation: run 2s steps(4) infinite; // 有4帧，所以为steps(4)

闪烁效果

animation: blink 1s steps(1) infinite;

打字动画

CSS is awesome!

123456789123456

打字动画实际上是文字逐个显示动画+光标闪烁动画

@keyframes typing {
  from {
    width: 0;
  }
}
h1 {
  width: 15ch;
  overflow: hidden;
  white-space: nowrap;
  animation: typing 15s steps(15);
}

animation: typing 15s steps(15);

状态平滑的动画

animation-play-state: pause;

沿环形路径平移的动画

方案一

用内层的变形来抵消外层的变形效果。

<div class="path">
  <div class="avatar">
    <img src="https://img2023.cnblogs.com/blog/3116094/202302/3116094-20230225214134054-1457803797.jpg">
  </div>
</div>

@keyframes spin {
  to {
    transform: rotate(1turn);
  }
}
.path {
  width: 100px;
  height: 100px;
  background: orange;
  border-radius: 50%;
}
.avatar {
  width: 20px;
  height: 20px;
  margin: 0 auto;
  border-radius: 50%;
  overflow: hidden;
  animation: spin 3s infinite linear;
  transform-origin: 50% 50px;  /* 50px 是背景圆形的半径 */
}
.avatar img {
  animation: inherit;
  animation-direction: reverse;
}

方案二

使用translate模拟transform-origin，从而不需要在Img外层多嵌套一个元素。

<div class="path">
  <img src="https://img2023.cnblogs.com/blog/3116094/202302/3116094-20230225214134054-1457803797.jpg" class="img">
</div>

.path {
  width: 100px;
  height: 100px;
  background: orange;
  border-radius: 50%;
}

.img {
  width: 20px;
  height: 20px;
  position: relative;
  left: 40px;
  border-radius: 50%;
  animation: spin2 3s infinite;
}

@keyframes spin2 {
  from {
    transform: translateY(50px)
              rotate(0turn)
              translateY(-50px)
              translateY(50%)
              rotate(1turn)
              translateY(-50%)
  }
  to {
    transform: translateY(50px)
              rotate(1turn)
              translateY(-50px)
              translateY(50%)
              rotate(0turn)
              translateY(-50%)
  }
}

如果一开始头像就位于圆心，上面的css代码可简化：
也就是把translateY(50px) translateY(-50%)去除，这两句做的实际上就是把头像移到圆心。

@keyframes spin2 {
  from {
    transform: rotate(0turn)
              translateY(-50px)
              translateY(50%)
              rotate(1turn)
  }
  to {
    transform: rotate(1turn)
              translateY(-50px)
              translateY(50%)
              rotate(0turn)
  }
}