Skip to main content

animation使用

基础语法​

animation: [name] [duration] [timing-function] [delay] [iteration-count] [direction] [fill-mode] [play-state];


属性作用​

属性项说明示例值
name（必需）动画名称，对应 @keyframes 中定义的名称slidein、fade
duration（必需）动画持续时间，单位是 s 或 ms2s、500ms
timing-function动画的速度曲线linear、ease、ease-in-out、cubic-bezier(0.25, 0.1, 0.25, 1)
delay动画开始前的延迟时间1s、0ms
iteration-count动画重复次数1、infinite
direction动画的播放方向normal、reverse、alternate、alternate-reverse
fill-mode动画播放前后状态的保留方式none、forwards、backwards、both
play-state动画的播放状态running、paused

无限X轴上下翻转​

#target {
  display: inline-block;
  animation: slash-rotate 2s ease-in-out 1s infinite;
  transform-origin: center;
  transform-style: preserve-3d;
}

@keyframes slash-rotate {
  0% {
    transform: rotateX(0deg); /* 动画开始 */
  }
  50% {
    transform: rotateX(360deg); /* 动画在第1秒完成 */
  }
  100% {
    transform: rotateX(360deg); /* 保持状态到第2秒（间隔1秒） */
  }
}