CSS自定义属性实现按钮与气泡动画

按钮动画

.button{
  animation flow 2s infinite ease-in-out;
}

@keyframes flow {
  0%, 100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, -25%);
  }
}

鼠标悬停在按钮上时抖动动画

.button:hover {
  animation: shake .1s infinite ease-in-out;
}

@keyframes shake {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(-1%, 3%) rotate(-2deg);
  }
  50% {
    transform: translate(1%, 2%) rotate(2deg);
  }
  75% {
    transform: translate(1%, -2%) rotate(-1deg);
  }
}

更多就参阅https://css-tricks.com/the-power-and-fun-of-scope-with-css-custom-properties/