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

<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. angular $emit发送 后退时$on多次接收

    angular 并列作用域,作用域不存在上下级关系,$scope.$emit发送时 后退时$rootScope.$on会出现接收多个消息的情况 $rootScope.$on('saveDraft', ...

  2. 实现BPEL4WS演示:教程

    http://www.ibm.com/developerworks/cn/education/webservices/ws-bpelws/bpel_tutorial_cn.html 开始 什么是Bus ...

  3. mybatis的批量删除

    公司工程用的是Mybatis的example的类,自动生成了对数据库的操作,批量操作的今天用到了,两种方式,一种需要拓展它生成的类,另一种自带的. 批量删除的id是以集合List传递 id以List& ...

  4. AspectJ基础学习之一简介(转载)

    AspectJ基础学习之一简介(转载) 一.为什么写这个系列的博客   Aspectj一个易用的.功能强大的aop编程语言.其官网地址是:http://www.eclipse.org/aspectj/ ...

  5. C#实现录制屏幕

    以前写过两篇录制麦克风语音和摄像头视频的文章(实现语音视频录制.在服务器端录制语音视频),最近有朋友问,如果要实现屏幕录制这样的功能,该怎么做了?实际上原理是差不多的,如果了解了我前面两篇文章中介绍的 ...

  6. JavaWeb学习笔记——JSTL核心标签库

  7. Java排序算法——冒泡排序

    import java.util.Arrays; //================================================= // File Name : Bubble_S ...

  8. 《CSS3实战》读书笔记 第三章:选择器:样式实现的标记

    第三章:选择器:样式实现的标记 选择器的魔力在于,让你完全实现对网页样式的掌控.不同的选择器可以用在不同的情况下使用.总之把握的原则是:规范的编码,根据合理地使用选择器,比去背选择器的定义有价值的多. ...

  9. Visual Studio 2012中Visual Assist破解办法

    本工具有两种破解方式 1.破解方式一:Visual_Assist_X_DiE.exe 运行Visual_Assist_X_DiE.exe,勾选安装的VC版本,点击“Patch”按钮即可. 2.破解方式 ...

  10. 使用 Object.create 创建对象,super 关键字,class 关键字

    ECMAScript 5 中引入了一个新方法:Object.create().可以调用这个方法来创建一个新对象.新对象的原型就是调用 create 方法时传入的第一个参数: var a = {a: 1 ...