<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. bzoj1027 [JSOI2007]合金

    1027: [JSOI2007]合金 Time Limit: 4 Sec  Memory Limit: 162 MBSubmit: 2671  Solved: 703[Submit][Status][ ...

  2. BZOJ3217 : ALOEXT

    替罪羊树套Trie,Trie合并用线段树合并,注意常数优化. 顺便AC800题纪念~~~ #include<cstdio> #include<cmath> #include&l ...

  3. JavaScript事件流

    什么是JS事件流 早期的IE事件传播方向为由上至下,即从document逐级向下传播到目标元素:而Netscape公司的Netscape Navigator则是朝相反的方向传播, 也就是从目标元素开始 ...

  4. JS正则表达式验证数字（很全）

    1.<script type="text/javascript"> 2.     function validate(){ 3.       var reg = new ...

  5. 【POJ】3070 Fibonacci（矩阵乘法）

    http://poj.org/problem?id=3070 根据本题算矩阵,用快速幂即可. 裸题 #include <cstdio> #include <cstring> # ...

  6. 增加Activity Monitor中的作业保存数量

    在Master Server的注册表中加入如下两个键值即可: (1500的单位是小时)  

  7. Scrum会议1(Beta版本)

    组名:天天向上 组长:王森 组员:张政.张金生.林莉.胡丽娜 代码地址:HTTPS:https://git.coding.net/jx8zjs/llk.git SSH:git@git.coding.n ...

  8. HDU 5773 最长上升子序列

    题意 给出一个序列 问它的最长严格上升子序列多长 这个序列中的0可以被替代为任何数 n的范围给出了1e5 所以平常的O(n*n)lis不能用了 在kuangbin的模板里有O(nlogn)的模板 套上 ...

  9. Apache Spark技术实战之2 -- PackratParsers实例

    欢迎转载,转载请注明出处,徽沪一郎 概要 通过一个简明的Demo程序来说明如何使用scala中的PackratParsers DemoApp import scala.util.parsing.com ...

  10. NSDate 获取明天、后天的日期

    NSDate *  senddate=[NSDate date];    NSCalendar *gregorian = [[NSCalendar alloc] initWithCalendarIde ...