<html>

<head>

    <title>animation</title>

    <style>

        div{

            width: 100px;

            height: 100px;

            background-color: #00b3ee;

        }

        /*动画过程控制器*/

        @-webkit-keyframes firstDiv{

            10%{

                background-color: #a94442;

                width: 200px;

                height: 200px;

            }

            30%{

                background-color: #398439;

                width: 200px;

                height: 200px;

            }

            50%{

                background-color: #afd9ee;

                width: 300px;

                height: 300px;

            }

            80%{

                background-color: #ffff00;

                width: 370px;

                height: 370px;

                transform:rotate(30deg);

            }

            100%{

                background-color: #ffff00;

                width: 500px;

                height: 500px;

                transform:rotate(60deg);

            }

        }

        div:hover{

            -webkit-animation-name: firstDiv;

            -webkit-animation-duration: 5s;

            -webkit-animation-timing-function:linear;

            -webkit-animation-iteration-count:infinite;

        }

    </style>

</head>

<body>

<div>动画div</div>

</body>

</html>

　　

CSS动画控制器的更多相关文章

  1. 梅须逊雪三分白，雪却输梅一段香——CSS动画与JavaScript动画

    CSS动画并不是绝对比JavaScript动画性能更优越,开源动画库Velocity.js等就展现了强劲的性能. 一.两者的主要区别 先开门见山的说说两者之间的区别. 1)CSS动画: 基于CSS的动 ...

  2. Css 动画的回调

    在做项目中经常会遇到使用动画的情况.以前的情况是用js写动画,利用setTimeout函数或者window.requestAnimationFrame()实现目标元素的动画效果.虽然后者解决了刷新频率 ...

  3. 【译】css动画里的steps()用法详解

    原文地址:http://designmodo.com/steps-c... 原文作者:Joni Trythall 我想你在css 动画里使用steps()会和我一样有很多困惑.一开始我不清楚怎样使用它 ...

  4. css动画属性性能

    性能主要表现:流量.功耗与流畅度 在现有的前端动画体系中,通常有两种模式:JS动画与CSS3动画. JS动画是通过JS动态改写样式实现动画能力的一种方案,在PC端兼容低端浏览器中不失为一种推荐方案. ...

  5. Css动画形式弹出遮罩层，内容区上下左右居中于不定宽高的容器中

    <!DOCTYPE html> <html> <head> </head> <body id="body"> <! ...

  6. css动画与js动画的区别

    CSS动画 优点: (1)浏览器可以对动画进行优化.   1. 浏览器使用与 requestAnimationFrame 类似的机制,requestAnimationFrame比起setTimeout ...

  7. CSS动画与GPU

    写在前面 满世界的动画性能优化技巧,例如: 只允许改变transform.opacity,其它属性不要动,避免重新计算布局(reflow) 对动画元素应用transform: translate3d( ...

  8. 15个来自 CodePen 的酷炫 CSS 动画效果【下篇】

    CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文 ...

  9. 赞！15个来自 CodePen 的酷炫 CSS 动画效果

    CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文 ...

随机推荐

  1. jQuery Select操作大集合

    jQuery获取Select选择的Text和Value: 语法解释:  $("#select_id").change(function(){//code...});    //为S ...

  2. 【BZOJ】2321: [BeiJing2011集训]星器（数学+特殊的技巧）

    http://www.lydsy.com/JudgeOnline/problem.php?id=2321 完全想不到.. 第一眼以为是爆搜,看到数据范围果断放弃:第二眼以为是网络流(因为只有行列操作, ...

  3. ueditor使用总结——前端篇.md

    首先吐槽下,百度的API太坑,谁让人家都是大牛呢. 说明:本文所涉猎代码均依托于seajs,本文所用ueditor版本为1.4.3.3 JSP UTF-8版 编辑器前端部署: 1.把ueditor引入 ...

  4. 二分查找算法java实现

    今天看了一下JDK里面的二分法是实现,觉得有点小问题.二分法的实现有多种今天就给大家分享两种.一种是递归方式的,一种是非递归方式的.先来看看一些基础的东西. 1.算法概念. 二分查找算法也称为折半搜索 ...

  5. state配置语言实战

    修改配置文件:(base用来放初始化环境.prod用来放生产配置环境) [root@super65 ~]# vim /etc/salt/master [root@super65 ~]# mkdir - ...

  6. 不用逗号进行UNION

    ./download.php ...if($link){    //加密后ID$link = base64_decode(urldecode($link));$link_array = explode ...

  7. [转]asp.net mvc 从数据库中读取图片

    本文转自:http://www.cnblogs.com/mayt/archive/2010/05/20/1740358.html 首先是创建一个类,继承于ActionResult,记住要引用Syste ...

  8. [转]Web Service Authentication

    本文转自:http://www.codeproject.com/Articles/9348/Web-Service-Authentication Download source files - 45. ...

  9. 【iCore3 双核心板】例程二十八：FSMC实验——读写FPGA

    实验指导书及代码包下载: http://pan.baidu.com/s/1gerjjxh iCore3 购买链接: https://item.taobao.com/item.htm?id=524229 ...

  10. DNS：www.flickr.com

    203.84.197.9 203.84.197.25 203.84.197.26 203.84.197.27