用@keyframes(动画),实现页面加载时的div动画(不要用js控制,因为当页面加载的时候,js还不一定可以使用)

可以在https://daneden.github.io/animate.css/参考所需要的动画效果

       div{
opacity:;
}
@keyframes fadeInLeft {
from {
opacity:;
transform: translate3d(-100%, 0, 0);
} to {
opacity:;
transform: translate3d(0, 0, 0);
}
}
@-webkit-keyframes fadeInLeft {
from {
opacity:;
transform: translate3d(-10%, 0, 0);
} to {
opacity:;
transform: translate3d(0, 0, 0);
}
} .fadeInLeft {
animation: fadeInLeft .3s forwards;
}
<div class="fadeInLeft">kkdkkdkdkkdkdkkdk</div>

页面加载时的div动画的更多相关文章

  1. 页面加载时,页面中DIV随之滑动出来;去掉页面滚动条

    <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&quo ...

  2. 解决JS文件页面加载时的阻塞

    关于页面加载时的时间消费,许多书中都做出了介绍,也提出了很多种方法.本文章就详细介绍XHR注入. 概述:JS分拆的方法 1.XHR注入:就是用ajax异步请求同域包含脚本的文件,然后将返回的字符串转化 ...

  3. jquery--blur()事件,在页面加载时自动获取焦点

    jquery--blur()事件会在页面加载时自动获取焦点,应将onblur写到html标签中 <div class="inputbox"> <input typ ...

  4. 页面加载时loading效果

    页面加载时loading效果: <!DOCTYPE html> <html lang="en"> <head> <meta charset ...

  5. 使用 v-cloak 防止页面加载时出现 vuejs 的变量名

    使用 vuejs 做了一个简单的功能页面,逻辑是,页面加载后获取当前的经纬度,然后通过 ajax 从后台拉取附近的小区列表.但是 bug 出现了,在显示小区列表之前,会闪现小区名对应的 vuejs 变 ...

  6. Javascript在页面加载时的执行顺序【转】

    一.在HTML中嵌入Javasript的方法 直接在Javascript代码放在标记对<script>和</script>之间 由<script />标记的src属 ...

  7. ASP.NET中页面加载时文本框(texbox控件)内有文字获得焦点时文字消失

    代码如下: <asp:TextBox ID="TextBox1" runat="server" Height="26px" MaxLe ...

  8. 使用 v-cloak 防止页面加载时出现 vue.js 的变量名

    知识点:使用 v-cloak 防止页面加载时出现 vue.js 的变量名 场景:在使用vue语法,实现下拉框功能时,展示数据列表之前,出现对应的 vuejs 变量名 代码: var vm = new ...

  9. JSFF或JSF页面加载时触发JavaScript之方法

    现象一 最近在项目中遇到这么一个问题,有些页面元素是在页面加载时通过JavaScript动态渲染而成.当生成这些元素的JavaScript脚本被放置于JSPX文件中时,界面渲染没有问题.但是当我们把生 ...

随机推荐

  1. 在CenOS7.5里安装Redis

    一.系统环境 操作系统:CentOS 7.5 Redis版本:redis3.2.8 登录账号:Frank 二.安装过程 A.预安装,安装gcc 1.进入终端,切换到root账号 2.输入指令: yum ...

  2. Apache apxs命令

    一.简介 apxs是一个为Apache HTTP服务器编译和安装扩展模块的工具,用于编译一个或多个源程序或目标代码文件为动态共享对象,使之可以用由mod_so提供的LoadModule指令在运行时加载 ...

  3. Luogu 3242 [HNOI2015]接水果

    BZOJ4009 权限题 真的不想再写一遍了 大佬blog 假设有果实$(x, y)$,询问$(a, b)$,用$st_i$表示$i$的$dfs$序,用$ed_i$表示所有$i$的子树搜完的$dfs$ ...

  4. 单元测试NUnit 的文章

    请参考 https://www.cnblogs.com/ranh941/p/7629279.htmlhttps://blog.csdn.net/qincode/article/details/1831 ...

  5. React官方网站学习

    React官方网站  英文版 https://reactjs.org/tutorial/tutorial.html React官方网站  中文版 https://react.docschina.org ...

  6. 平方十位数——第八届蓝桥杯JavaB组(国赛)第一题

    原创 标题:平方十位数 由0~9这10个数字不重复.不遗漏,可以组成很多10位数字.这其中也有很多恰好是平方数(是某个数的平方). 比如:1026753849,就是其中最小的一个平方数. 请你找出其中 ...

  7. java多线程的操作

    上篇博客简单了介绍了Java的多线程的概念,与进程的区别,两种创建方式,状态及获取线程名称等内容.这篇文章接着介绍Java的多线程.主要从一下几方面介绍. 1 线程类的常用方法 1.1 start() ...

  8. Arduino I2C + 数字式环境光传感器BH1750FVI

    BH1750FVI是日本罗姆(ROHM)半导体生产的数字式环境光传感IC.其主要特性有: I2C数字接口,支持速率最大400Kbps 输出量为光照度(Illuminance) 测量范围1~65535 ...

  9. .Net高级面试宝典

    1.in/exists/join 执行效率? 答:用法 select * from HK_UsersBasic where  Users_ID in (select AccEmail from dbo ...

  10. CentOS目录与文件操作

    pwd:查看当前目录 touch:创建文件 touch a.c ls:查看当前目录下文件,也可以ls /tmp查看tmp下的文件 rm:删除文件 rm a.c,也可以rm a.c -rf 强制删除 c ...