css3延时动画
不太理解属性都是什么意思,但是有动画效果,我也是惊呆了
<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延时动画的更多相关文章
- CSS3 @keyframes 动画
CSS3的@keyframes,它可以取代许多网页动画图像,Flash动画,和JAVAScripts. CSS3的动画属性 下面的表格列出了 @keyframes 规则和所有动画属性: 浏览器支持 表 ...
- 使用css3的动画模拟太阳系行星公转
本文介绍使用css3的animation画一个太阳系行星公转的动画,再加以改进,讨论如何画椭圆的运行轨迹.然后分析京东和人人网使用animation的实际案例,最后结合css3的clip-path做一 ...
- css3中动画(transition)和过渡(animation)详析
css3中动画(transition)和过渡(animation)详析
- css3 animation动画特效插件的巧用
这一个是css3 animation动画特效在线演示的网站 https://daneden.github.io/animate.css/ 下载 animate.css文件,文件的代码很多,不过要明白 ...
- CSS3简单动画
css3的动画确实非常绚丽!浏览器兼容性很重要!. 分享两个小动画 <!doctype html> <html lang="en"> <head> ...
- css3常用动画+动画库
一.animates.css animate.css是来自dropbox的工程师Daniel Eden开发的一款CSS3的动画效果小类库.包含了60多款不同类型的CSS3动画,包括:晃动,闪动,各种淡 ...
- css3 animation动画技巧
一,css3 animation动画前言 随着现在浏览器对css3的兼容性越来越好,使用css3动画来制作动画的例子也越来越广泛,也随着而来带来了许多的问题值得我们能思考.css3动画如何让物体运动更 ...
- 8款超酷而实用的CSS3按钮动画
1.CSS3分享按钮动画特效 这是一款基于CSS3的社会化分享按钮,按钮非常简单,提供了分享到twitter.facebook.youtube等大型社交网站.每一个分享按钮都有个大社交网站的Logo图 ...
- 9种jQuery和css3图片动画特效代码演示
1.自由旋转的jQuery图片 演示和下载地址 2.css3阴影动画效果 演示和下载地址 3.拉窗帘特效图片 演示和下载地址 4.css3文字特效动画 演示和下载地址 5.css3时钟代码 演示和下载 ...
随机推荐
- angular $emit发送 后退时$on多次接收
angular 并列作用域,作用域不存在上下级关系,$scope.$emit发送时 后退时$rootScope.$on会出现接收多个消息的情况 $rootScope.$on('saveDraft', ...
- 实现BPEL4WS演示:教程
http://www.ibm.com/developerworks/cn/education/webservices/ws-bpelws/bpel_tutorial_cn.html 开始 什么是Bus ...
- mybatis的批量删除
公司工程用的是Mybatis的example的类,自动生成了对数据库的操作,批量操作的今天用到了,两种方式,一种需要拓展它生成的类,另一种自带的. 批量删除的id是以集合List传递 id以List& ...
- AspectJ基础学习之一简介(转载)
AspectJ基础学习之一简介(转载) 一.为什么写这个系列的博客 Aspectj一个易用的.功能强大的aop编程语言.其官网地址是:http://www.eclipse.org/aspectj/ ...
- C#实现录制屏幕
以前写过两篇录制麦克风语音和摄像头视频的文章(实现语音视频录制.在服务器端录制语音视频),最近有朋友问,如果要实现屏幕录制这样的功能,该怎么做了?实际上原理是差不多的,如果了解了我前面两篇文章中介绍的 ...
- JavaWeb学习笔记——JSTL核心标签库
- Java排序算法——冒泡排序
import java.util.Arrays; //================================================= // File Name : Bubble_S ...
- 《CSS3实战》读书笔记 第三章:选择器:样式实现的标记
第三章:选择器:样式实现的标记 选择器的魔力在于,让你完全实现对网页样式的掌控.不同的选择器可以用在不同的情况下使用.总之把握的原则是:规范的编码,根据合理地使用选择器,比去背选择器的定义有价值的多. ...
- Visual Studio 2012中Visual Assist破解办法
本工具有两种破解方式 1.破解方式一:Visual_Assist_X_DiE.exe 运行Visual_Assist_X_DiE.exe,勾选安装的VC版本,点击“Patch”按钮即可. 2.破解方式 ...
- 使用 Object.create 创建对象,super 关键字,class 关键字
ECMAScript 5 中引入了一个新方法:Object.create().可以调用这个方法来创建一个新对象.新对象的原型就是调用 create 方法时传入的第一个参数: var a = {a: 1 ...