css 页面从左侧向右滑入，动画只执行一次

＊且听风吟

已于 2023-03-03 16:47:20 修改

阅读量9.1k

点赞数 3

分类专栏： # CSS 文章标签： css javascript css3

于 2020-06-17 19:29:11 首次发布

本文链接：https://blog.csdn.net/HH18700418030/article/details/106816692

版权

CSS 专栏收录该内容

55 篇文章 5 订阅

订阅专栏

简单实现了页面进入时的动画：
（1）从左侧滑入；
（2）只执行一次。

<template>
  <div class="big_screen_contant">
    <div class="contant">
    </div>
  </div>
</template>
<script>
import $ from "jquery";
export default {
  data () {
    return {
    }
  },
  created () {
    this.autoHeight = window.screen.height + "px";
    $("html").css("background", "#03082f");
  },
  mounted () {
    this.getPage();
  },
  beforeDestroy () {
  },
  methods: {
    getPage () {
      $(".big_screen_contant").addClass("contantActive");
      setTimeout(function () {
        $(".big_screen_contant").removeClass("contantActive");
      }, 3000);     
    }
  }
};
</script>
<style lang="less" scoped>
html {
  background: #03082f !important;
  background-size: 100%;
}
</style>
<style lang="less">
.contant {
  width: 600px;
  height: 400px;
  background-color: antiquewhite;
}
.contantActive {
  animation: bounceInLeft 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0s 1 alternate
    forwards;
  -webkit-animation: bounceInLeft 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0s 1
    alternate forwards; /*Safari and Chrome*/
}
@keyframes bounceInLeft {
  0% {
    opacity: 0;
    transform: translate3d(-3000px, 0, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(-25px, 0, 0);
  }
  75% {
    transform: translate3d(-10px, 0, 0);
  }
  90% {
    transform: translate3d(-5px, 0, 0);
  }
  100% {
    transform: none;
  }
}
</style>