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

简单实现了页面进入时的动画：
（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 alternateforwards;-webkit-animation: bounceInLeft 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0s 1alternate 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>

页面效果：

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

Bootstrap Modal 从左侧和右侧滑入
在web开发中,添加.修改操作,用modal弹出层是一种不错的选择. 但是modal弹出层,默认动画效果从顶端滑入,从左侧或右侧滑入也是一种不错的选择. 展示效果如下: 右侧划入代码,class=&q ...
css3 div从左到右滑入
css3 div从左到右滑入实现div从左到右滑入,代码如下: // lToR定义一个动画 @keyframes lToR{from {width: 0px;}}@-moz-keyframes lT ...
CSS div从左侧、上侧滑入效果代码实例
滑入的方向更改translate3d里面的参数即可(left.....) <!doctype html> <html> <head> <meta charse ...
android右滑返回动画,Android仿微信右滑返回功能的实例代码
先上效果图,如下: 先分析一下功能的主要技术点,右滑即手势判断,当滑到一直距离时才执行返回,并且手指按下的位置是在屏幕的最左边(这个也是有一定范围的), 这些可以实现onTouchEvent来实现. ...
html页面加载内容从左侧滑入,CSS 3从左过渡处滑入
您可以使用CSS3过渡或CSS3动画在元素中滑动. 我做了两个快速示例,只是为了告诉你我的意思. CSS转换(悬停时) 相关代码 .wrapper:hover #slide { transition: ...
html纯css页面滑动效果,纯css3滑动按钮动画效果
android系统的滑动按钮相信大家都使用过.这款插件就是使用纯css3制作出类似android系统的滑动按钮效果. HTML html代码十分简单.使用一个大的div作为包裹容器,给它一个class ...
css上滑事件,css transition 实现滑入滑出
transition是css最简单的动画. 通常当一个div属性变化时,我们会立即看的变化,从旧样式到新样式是一瞬间的,嗖嗖嗖!!! 但是,如果我希望是慢慢的从一种状态,转变成另外一种状态,怎么办? ...
JQuery动画之滑入滑出动画
1. 滑入动画(类似于商店的卷帘门) $(selector).slideDown(speed, 回调函数); 解释: 此语句实现的功能为, 在XX时间内, 下拉动画, 显现元素. 当 slideDow ...
用HTML和CSS3做个鱼,如何使用CSS和D3实现小鱼游动的交互动画（附代码）
本篇文章给大家带来的内容是关于如何使用CSS和D3实现小鱼游动的交互动画(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 效果预览源代码下载 https://github. ...

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

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

最新文章

热门文章