<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. Encoding

    Problem Description Given a string containing only 'A' - 'Z', we could encode it using the following ...

  2. 时间工厂[XDU1013]

    Problem 1013 - 时间工厂 Time Limit: 1000MS   Memory Limit: 65536KB   Difficulty: Total Submit: 384  Acce ...

  3. C#创建桌面快捷方式 和 开机启动

              /// <summary>         /// 创建桌面快捷方式 2010-11-25         /// </summary>         p ...

  4. oracle系列--第三篇 Oracle的安装

    在安装之前,我先说说我的电脑的配置: OS : Windows 7 32bit CPU : 3GHz Memory : 2GB Desk : 320GB ======================= ...

  5. Java_BigDecimal类型比较大小

    这个类是java里精确计算的类 1 比较对象是否相等 一般的对象用equals,但是BigDecimal比较特殊,举个例子: BigDecimal a=BigDecimal.valueOf(1.0); ...

  6. Hibernate validation 注解 springmvc 验证 分组

    SpringMVC验证框架Validation特殊用法   1. 分组 有的时候,我们对一个实体类需要有多中验证方式,在不同的情况下使用不同验证方式,比如说对于一个实体类来的id来说,保存的时候是不需 ...

  7. HDU 1671 Phone List（Trie的应用与内存释放）

    Phone List Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total ...

  8. UVALive 7297 bfs

    题意 一个小偷偷到了项链 他想知道自己是否可以逃出去 地图中有一个小偷 一个警察 警察有一条狗 一开始 小偷和警察的移动速度都是1 当警察走到小偷经过过的地方时 警察会有一条狗嗅到小偷的气味并且以2的 ...

  9. python 不得不知的第三方库以及常用安装包

    mysql 驱动$ sudo pip install MySQL-python redis 数据库$ sudo pip install redis django 全文搜索$ sudo pip inst ...

  10. 【翻译】CEDEC2014跨世代多平台并行开发PS4版如龙维新开发的一年

    本篇PPT讲述的是如龙4的开发过程中,集中在PS3和PS4并行开发中所遇到和解决的一些问题.如64位指针,DX9向DX11移植API的问题,以及在PS4上使用并行渲染在1080P下让FPS达到60等. ...