不太理解属性都是什么意思,但是有动画效果,我也是惊呆了

<style>
#animated_div{animation:animated_div 4s 1;
-moz-animation:animated_div 4s 1;
-webkit-animation:animated_div 4s 1;
-o-animation:animated_div 4s 1; width:800px; height:500px; position:relative; } @keyframes animated_div
{
0% {transform: rotate(0deg); top:-600px;}
25% {transform: rotate(0deg);top:-600px;}
50% {transform: rotate(0deg);top:50px;}
55% {transform: rotate(0deg);top:50px;}
70% {transform: rotate(0deg);top:-50px;}
100% {transform: rotate(0deg);top:0px;}
} @-webkit-keyframes animated_div
{
0% {-webkit-transform: rotate(0deg);top:-600px;}
25% {-webkit-transform: rotate(0deg);top:-600px;}
50% {-webkit-transform: rotate(0deg);top:50px;}
55% {-webkit-transform: rotate(0deg);top:50px;}
70% {-webkit-transform: rotate(0deg);top:-50px;}
100% {-webkit-transform: rotate(0deg);top:0px;}
} @-moz-keyframes animated_div
{
0% {-moz-transform: rotate(0deg);top:-600px;}
25% {-moz-transform: rotate(0deg);top:-600px;}
50% {-moz-transform: rotate(0deg);top:50px;}
55% {-moz-transform: rotate(0deg);top:50px;}
70% {-moz-transform: rotate(0deg);top:-50px;}
100% {-moz-transform: rotate(0deg);top:0px;}
} @-o-keyframes animated_div
{
0% {transform: rotate(0deg);top:-600px;}
25% {transform: rotate(0deg);top:-600px;}
50% {transform: rotate(0deg);top:50px;}
55% {transform: rotate(0deg);top:50px;}
70% {transform: rotate(0deg);top:-50px;}
100% {transform: rotate(0deg);top:0px;}
} </style>
<div id="animated_div">数据统计及分析系统</div>

css3延时动画的更多相关文章

  1. CSS3 @keyframes 动画

    CSS3的@keyframes,它可以取代许多网页动画图像,Flash动画,和JAVAScripts. CSS3的动画属性 下面的表格列出了 @keyframes 规则和所有动画属性: 浏览器支持 表 ...

  2. 使用css3的动画模拟太阳系行星公转

    本文介绍使用css3的animation画一个太阳系行星公转的动画,再加以改进,讨论如何画椭圆的运行轨迹.然后分析京东和人人网使用animation的实际案例,最后结合css3的clip-path做一 ...

  3. css3中动画(transition)和过渡(animation)详析

    css3中动画(transition)和过渡(animation)详析

  4. css3 animation动画特效插件的巧用

    这一个是css3  animation动画特效在线演示的网站 https://daneden.github.io/animate.css/ 下载 animate.css文件,文件的代码很多,不过要明白 ...

  5. CSS3简单动画

    css3的动画确实非常绚丽!浏览器兼容性很重要!. 分享两个小动画 <!doctype html> <html lang="en"> <head> ...

  6. css3常用动画+动画库

    一.animates.css animate.css是来自dropbox的工程师Daniel Eden开发的一款CSS3的动画效果小类库.包含了60多款不同类型的CSS3动画,包括:晃动,闪动,各种淡 ...

  7. css3 animation动画技巧

    一,css3 animation动画前言 随着现在浏览器对css3的兼容性越来越好,使用css3动画来制作动画的例子也越来越广泛,也随着而来带来了许多的问题值得我们能思考.css3动画如何让物体运动更 ...

  8. 8款超酷而实用的CSS3按钮动画

    1.CSS3分享按钮动画特效 这是一款基于CSS3的社会化分享按钮,按钮非常简单,提供了分享到twitter.facebook.youtube等大型社交网站.每一个分享按钮都有个大社交网站的Logo图 ...

  9. 9种jQuery和css3图片动画特效代码演示

    1.自由旋转的jQuery图片 演示和下载地址 2.css3阴影动画效果 演示和下载地址 3.拉窗帘特效图片 演示和下载地址 4.css3文字特效动画 演示和下载地址 5.css3时钟代码 演示和下载 ...

随机推荐

  1. 如何排查APP服务端和客户端是否支持ATS

    服务端排查 取得客户端直接连接的服务端域名及端口,例如mob.com.cn,端口443,即HTTPS默认端口.针对公网可访问的生产环境地址,建议使用的在线监测工具.https://wosign.ssl ...

  2. 第二章 存储,2.2 AliCloudDB--双11商家后台数据库的基石(作者:玄惭)

    2.2 AliCloudDB--双11商家后台数据库的基石 前言 2016年天猫双11购物狂欢节已经完美落下帷幕,千亿成交的背后,作为整个天猫商家后台数据库的基石,AliCloudDB是如何保障在零点 ...

  3. ecshop网站搬家缓存无法更新

    问题描述: 1.后台产品列表能改,数据也能看到,前端就是不显示 2.缓存无法删除 3.网上其他方法都试过,还是不行 症状:是因为缓存无法删除,无法更新,只需要能重新更新缓存文件即可.网站搬家丢失tem ...

  4. 单点登录(SSO)系统的总结

    前些天一位其他开发部门的同事找到我们了解一些关于SSO单点登录的事,他们要做单点登录,同时也需要和我们这边的系统做集成,要我帮忙做一单点登录,了解关于单点登录的解决方案和资料,虽然做单点登录已经很久了 ...

  5. php Hash Table(四) Hash Table添加和更新元素

    HashTable添加和更新的函数: 有4个主要的函数用于插入和更新HashTable的数据: int zend_hash_add(HashTable *ht, char *arKey, uint n ...

  6. How to get http response.

    public class HttpWebResponseUtility { public static string CreateGetHttpResponse(string url) { var r ...

  7. 对AccessViolationException的一些总结

    引言 开发Winform程序时,应用程序出现了异常,整个应用程序崩溃自动退出了.在断点调试后,发现异常是AccessViolationException.所以对周围的语句加上了异常的处理机制.但是接下 ...

  8. Struts2源码浅析-ConfigurationProvider

    ConfigurationProvider接口 主要完成struts配置文件 加载 注册过程 ConfigurationProvider接口定义 public interface Configurat ...

  9. vim配色方案设置(更换vim配色方案)

    vim配色后,我的 设定底色为黑色,字体为绿色,然后将文件夹设为洋红,默认的注释换为淡黄:其实有一种简单的方法,就是设定为系统配置好的配色方案:转载文章如下:   ---------------- ( ...

  10. 软件安装失败,导致ubuntu软件中心软件消失

    感谢百度上各位IT界朋友的帮助,由于某个软件安装失败,导致ubuntu软件中心软件消失的解决办法: 找百度,有人说, 使用命令:sudo apt-get install software-center ...