.rotation {
-webkit-animation-name: rotation;
-webkit-animation-duration: 30s;
-moz-animation-name: rotation;
-moz-animation-duration: 30s;
} #sun {
background: url("http://img.mukewang.com/55ade004000106c202010201.png") no-repeat;
position: absolute;
z-index: 1;
top: -30px;
height: 201px;
width: 201px;
right: 40%; } @-webkit-keyframes rotation { 0% {
transform: translateX(0) translateY(0);
}
100% {
transform: translateX(-2000px) translateY(400px);
}
/*?*/
} @-moz-keyframes rotation {
/*?*/
0% {
transform: translateX(0) translateY(0);
}
100% {
transform: translateX(-2000px) translateY(400px);
}
}

  

animation-name:是动画帧的设置 通过关键字keyframes 进行设置
duration设置动画完成的时间
本例中有一个div ID sum 显示一个太阳落山的效果
实际上这个和js定时器的功能类似 在指定的时间切换样式
												

css3 使用animation实现动画效果的更多相关文章

  1. 使用 CSS3 动感的图片标题动画效果【附源码下载】

    在网站中,有很多地方会需要在图片上显示图片标题.使用 CSS3 过渡和变换可以实现动感的鼠标悬停显示效果.没有使用 JavaScript,所以只能在支持 CSS3 动画的现代浏览器中才能正常工作.您可 ...

  2. 基于jQuery CSS3鼠标点击动画效果

    分享基于jQuery CSS3鼠标点击动画效果支持图片或内容滑动,允许设置动画延迟效果.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="co ...

  3. CSS3展现精彩的动画效果 css3的动画属性

    热火朝天的css3无疑吸引了很多前端开发者的眼球,然而在css3中的动画属性则是新功能中的主打招牌,说到css3的动画属性不得不让人想起这三个属性:Transform﹑Transition﹑Anima ...

  4. 利用CSS3制作淡入淡出动画效果

    CSS3新增动画属性“@-webkit-keyframes”,从字面就可以看出其含义——关键帧,这与Flash中的含义一致. 利用CSS3制作动画效果其原理与Flash一样,我们需要定义关键帧处的状态 ...

  5. css3中outline切换动画效果

    今天刚看了篇文章<纯CSS实现的outline切换transition动画效果> 里面的效果研究了一下,下图为实现时的效果 代码如下: <!DOCTYPE html> < ...

  6. animation实现动画效果

    CSS3 animation 属性 CSS 参考手册 实例 使用简写属性,将动画与 div 元素绑定: div { animation:mymove 5s infinite; -webkit-anim ...

  7. 巧妙使用 CSS3 的褪色和动画效果制作消息提醒框

    现代Web设计技术允许开发者快速实现大多数浏览器支持的动画.我想警告消息是很常见的,因为默认的JavaScript警告框的样式往往(与你自己设计的漂亮样式)很不协调很囧.这使开发者步入找出哪种解决方案 ...

  8. CSS3知识之立方体动画效果

    效果图:

  9. 纯CSS3实现GIF图片动画效果

    在线演示 本地下载

随机推荐

  1. 【BFS】bzoj2252 [2010Beijing wc]矩阵距离

    要注意一开始将所有为'1'的点入队,然后通过一次BFS去更新所有点的距离,直到无法更新为止. #include<cstdio> #include<queue> #include ...

  2. 移动应用安全开发指南(Android)--Android组件和IPC

    概述 移动应用开发中,往往有跨进程通信的需求,方便地实现程序间的数据共享.Android提供了多种IPC通信的方式,给开发人员带来了便利,但如果选择或使用不当,就有可能发生各种各样的风险. 安全准则 ...

  3. HDU 4662 MU Puzzle (2013多校6 1008 水题)

    MU Puzzle Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total S ...

  4. Postgres间隔大量写IO的解决办法

    概述 为了保证数据可靠性,同时还要保证好的读写性能,以及读写的一致性,经过多年的积累,REDO日志,shared buffer等基本成为关系型数据库的标配.postgres也不例外. 为了保证数据的可 ...

  5. CFR Java Decompiler 反编译

    java反编译,JAD & CFR 目前我们开发中大都使用JAD进行java反编译.这个工具已经过于陈旧,最突出的问题就是经常反编译出错. 使用CFR反编译工具能够很好的解决这个问题,并且支持 ...

  6. jQuery选择器的灵活用法

    // 摘自: http://hi.baidu.com/274084093/item/47a4ce696e89e534ad3e836b jQuery中选择器很强大,可以根据元素名称.ID.class等多 ...

  7. matplotlib绘制常用统计图

    常见统计图:单条折线图.多条折线图.直方图.柱状图.饼状图 #!/usr/bin/python # -*- coding: utf-8 -*- import numpy as np import ma ...

  8. Media-媒介(媒体、介质)【译】

    Media-媒介(媒体.介质) 转载请注明来源:http://blog.csdn.net/lifeshow           Android支持定制的媒介解码器,需要将定制的解码器接口暴露给框架. ...

  9. Node.js abaike图片批量下载Node.js爬虫1.01版

    //====================================================== // abaike图片批量下载Node.js爬虫1.01 // 1.01 修正了输出目 ...

  10. qt linux软件打包等

    我的脚本: #!/bin/sh appname=`basename $0 | sed s,\.sh$,,` dirname=`dirname $0` tmp="${dirname#?}&qu ...