css动画放大延迟,css3延时动画

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

#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;}

}

数据统计及分析系统

CSS3 @keyframes 动画

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

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

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

css3 animation动画特效插件的巧用

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

CSS3简单动画

css3的动画确实非常绚丽!浏览器兼容性很重要!. 分享两个小动画

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时钟代码 演示和下载 ...

随机推荐

spider_jpg

__author__ = 'sus' #urllib模块提供了读取Web页面数据的接口import urllib#re模块主要包含了正则表达式import re#定义一个getHtml()函数def ...

MYSQL数据库无法使用IP地址访问的解决办法

1.在运行中输入CMD,确定,进入文本方式. 2.输入mysql -h localhost -u root -p 回车,使用ROOT用户登录. 3.输入use mysql; 显示Database ch ...

Linux下MySql出现#1036 – Table ‘ ‘ is read only 错误解决方法

本文为转载内容,感谢原作者.原文出自:http://zhaoxiaoru39.blog.163.com/blog/static/609552192012511104730115/ 我遇到的问题是:在n ...

phpStrom添加插件:php文档生成(phpDocumentor)

1. 依次打开:Files => Settings => External Tools => +(add) 2. 填写信息:name:phpDoc; group:PHP插件; des ...

相对路径json无法获取

在获取json文件内容时,有时会出现相对路径上的json文件无法获取的情况,Chrome上的解决方案如下: 1.右击桌面上的Chrome浏览器图标,点击属性; 2.在目标输入框的内容后头加上--arg ...

(转)MyBatis在插入的数据有空值时，可能为空的字段都要设置jdbcType

1 引言 前面的所有语句中你所见到的都是简单参数的例子,实际上参数是 MyBatis 非常强大的元素,对于简单的做法, 90% 的情况参数都很少,比如:

matlib实现logistic回归算法(序一)

数据下载:http://archive.ics.uci.edu/ml/datasets/Adult 数据描述:http://archive.ics.uci.edu/ml/machine-learnin ...