CSS3 连续向下循环播放动画

AspNetSunny

已于 2022-05-27 11:00:51 修改

阅读量1.1k

点赞数

分类专栏： vue 文章标签： css3 动画 css

于 2022-05-27 10:29:21 首次发布

本文链接：https://blog.csdn.net/sunnywuxian/article/details/124998959

版权

vue 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

向下动画是在 animate.css 的基础上进行修改的

效果展示：

<template>
  <div>
    <img
      src="../assets/imgs/down.png"
      class="my_test animate__animated animate__infinite animate__fadeInDown"
      alt=""
    />
  </div>
</template>
<style>
.my_test {
  display: block;
  margin: 100px auto 0;
  width: 350px;
  animation-direction: alternate; //连续播放
}

:root {
  --animate-duration: 1s;
  --animate-delay: 1s;
  --animate-repeat: 1;
}

.animate__animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-duration: var(--animate-duration);
  animation-duration: var(--animate-duration);
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animate__animated.animate__infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
@-webkit-keyframes fadeInDown {
  from {
    opacity: 0.7;
    -webkit-transform: translate3d(0, -10%, 0);
    transform: translate3d(0, -10%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0.7;
    -webkit-transform: translate3d(0, -10%, 0);
    transform: translate3d(0, -10%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.animate__fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}
</style>