CSS动效归纳汇总<持续更新>

CSS动效归纳汇总

效果展示

放大缩小

.app1:hover {
  animation: pulse 1s infinite;
}
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.06);
  }
  100% {
    transform: scale(1);
  }
}

横向左右晃动

.app2:hover {
  animation: headShake 0.82s cubic-bezier(.36,.07,.19,.97)  both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}
@keyframes headShake{
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }
  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }
  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}

上下跳动

.app3:hover {
  animation: bounce 1s infinite;
}
@keyframes bounce {
  0%, 100% {
      transform: translateY(3px);
  }
  50% {
      transform: translateY(-3px);
  }
}

文字左右移动

.app4{
  mix-blend-mode: difference;
  animation: move 5s infinite linear;

}
@keyframes move {
  0% {
      transform: translate(0, 0);
  }

  25% {
      transform: translate(-25%, 0);
  }

  75% {
      transform: translate(25%, 0);
  }

  100% {
      transform: translate(0, 0);
  }
}

由右向左进入

.app5 {
  animation: backInRight 16s infinite;
}
@keyframes backInRight {
  0% {
    transform: translateX(2000px) scale(0.2);
    opacity: 0;
  }
  20% {
    transform: translateX(-20px) scale(0.9);
    opacity: 1;
  }
  100% {
    transform: translateX(0) scale(1);
    opacity: 1;
  }
}