用@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. PCL 编程多个点云合成

    博客转载自:https://blog.csdn.net/sunboyiris/article/details/72636809 pcl::PointCloud<pcl::PointXYZRGBA ...

  2. hibernate mapping文件中 xmlns会导致linq to xml 查询不到对应的节点

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  3. 【原创】boost::recursive_mutex请小心使用

    recursive_mutex会减少死锁几率?恩看上去的确如此,但是事实上呢?我们从BOOST的官方逻辑去理解: recursive_mutex类可多次进入锁,这样在递归时可以避免一次死锁的几率,这是 ...

  4. markdown的图片外链

    markdown的图片用本地的很不方便,今天试用了一下七牛的服务,感觉很好用.推荐一下,免费的服务够用并且比较友好.

  5. 一步到位带你入门Selenium

    其实,关于这篇文章发布前还是有很多思考的,我是不想发布的,因为关于selenium的文章博客园里面有很多的介绍,写的详细的,也有写的不详细的,那么我的这篇文章的定位是基于selnium从开始到最后的框 ...

  6. javascript总结17:javascript 函数简介

    1 释义:函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块. 2 格式:通过 function  关键字. function test(){ alert("您好"); } ...

  7. txt文本怎么去除重复项

    txt文本怎么去除重复项?做网络推广的朋友经常会遇到这样的问题,txt文本文件里面有许多人名或者电话号码用来发送邮件或者短信,通常有许多是重复的,下面我来介绍两个方法来去除重复项,以人名为范本讲解. ...

  8. tomcat启动startup.bat一闪而过

    编辑startup.bat,在文本最后添加PAUSE,保存后打开startup.bat,此时窗口会暂停,并出现错误信息,然后按照错误提示纠正即可!

  9. Spring注解:Enable相关注解

    @EnableXXX:可以用于取代xml配置中的一些配置,被该注解所标注的类,其中被@Bean标注的方法,一般就用于返回和EnableXXX的XXX相关的Bean,Bean中一般有XXX相关的注解 同 ...

  10. window phone 8资源管理器打开文件

    一.打开安装包里面文件: StorageFolder sf = Package.Current.InstalledLocation;//ApplicationData.Current.LocalFol ...