182 Understanding CSS Animations

示例

1、<style>中添加关键帧

/* 关键帧 */
@keyframes slide-fade {
  0% {
    transform: translateX(0) scale(1);
  }

  70% {
    transform: translateX(-120px) scale(1.1);
  }

  100% {
    transform: translateX(-150px) scale(1);
  }
}

2、css样式中使用关键帧(注释.block中的transition)

.animate {
  /* transform: translateX(-150px); */
  animation: slide-fade 0.3s ease-out forwards;
}