CSS3 连续向下循环播放动画

原创已于 2022-05-27 11:00:51 修改 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #动画 #css

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

vue 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一种基于animate.css的向下淡入动画实现方法。通过自定义CSS样式和关键帧动画，可以使图片从上至下平滑淡入显示。该动画适用于网页元素的加载过渡效果。

向下动画是在 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>