CSS3动画遵循@kwyframes规则，规定了动画的名称、时长。

1、示例代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3动画示例</title>
<style>
*{margin: 0;padding: 0}
section{width:100px;height: 100px;
background-color: coral;
position: relative;
animation: anim 3s infinite alternate;
-webkit-animation:anim 3s infinite alternate;
-moz-animation: anim 3s infinite alternate;
-o-animation: anim 3s infinite alternate;
margin: 50px auto; }
@keyframes anim {
0%{background-color: red;left: 0;top: 0;}
25%{background-color: green;left: 100px;top: 0;}
50%{background-color: blue;left: 100px;top: 100px;}
75%{background-color: yellow;left: 0;top: 100px;}
100%{background-color: purple;left: 0;top: 0;}
}
@-webkit-keyframes anim {
0%{background-color: red;left: 0;top: 0;}
25%{background-color: green;left: 100px;top: 0;}
50%{background-color: blue;left: 100px;top: 100px;}
75%{background-color: yellow;left: 0;top: 100px;}
100%{background-color: purple;left: 0;top: 0;}
}
@-moz-keyframes anim {
0%{background-color: red;left: 0;top: 0;}
25%{background-color: green;left: 100px;top: 0;}
50%{background-color: blue;left: 100px;top: 100px;}
75%{background-color: yellow;left: 0;top: 100px;}
100%{background-color: purple;left: 0;top: 0;}
}
@-o-keyframes anim {
0%{background-color: red;left: 0;top: 0;}
25%{background-color: green;left: 100px;top: 0;}
50%{background-color: blue;left: 100px;top: 100px;}
75%{background-color: yellow;left: 0;top: 100px;}
100%{background-color: purple;left: 0;top: 0;}
}
</style>
</head>
<body>
<section></section>
</body>
</html>

2.示例动画效果

CSS3动画效果示例的更多相关文章

  1. CSS3动画效果——js调用css动画属性并回调处理详解

    http://www.jb51.net/css/258407.html 这篇文章主要详细介绍了CSS3动画效果回调处理,需要的朋友可以参考下 我们在做js动画的时候,很多时候都需要做回调处理,如在一个 ...

  2. Bounce.js – 快速创建漂亮的 CSS3 动画效果

    Bounce.js 是一个用于制作漂亮的 CSS3 关键帧动画的 JavaScript 库,使用其特有的方式生成的动画效果.只需添加一个组件,选择预设,然后你就可以得到一个短网址或者导出为 CSS 代 ...

  3. CSS3 动画效果带来的bug

    css3 动画效果比如transition:all 2s linear;这种用来计算及时的物体坐标的话会带来一定的问题 比如把一个DIV从A点移动到B点.JS为DIV.style.left=B; 但是 ...

  4. animate.css 一些常用的CSS3动画效果

    大家已经开始在项目中使用一些CSS3动画效果了吧,这让网站在高端浏览器上看起来很上流.animate.css是一个老外做的各种CSS3动画的合集,比较全,也很炫,大家可以参考学习一下. 项目主页:ht ...

  5. CSS Animatie是一款在线制作CSS3动画的工具，可以在线直接制作CSS3动画效果，生成代码

    CSS Animatie是一款在线制作CSS3动画的工具,可以在线直接制作CSS3动画效果,生成代码 CSS Animatie 彩蛋爆料直击现场 CSS Animatie是一款在线制作CSS3动画的工 ...

  6. 鼠标悬停css3动画效果

    下载Demo 效果预览 html: <!DOCTYPE html> <html lang="en"> <head> <meta chars ...

  7. 第八十三节，CSS3动画效果

    CSS3动画效果 学习要点: 1.动画简介 2.属性详解 3.简写和版本 本章主要探讨HTML5中CSS3的动画效果,可以通过类 Flash那样的关键帧模式控制运行. 一．动画简介     CSS3提 ...

  8. 35个让人惊讶的CSS3动画效果

    1. Pure CSS Coke Can 2. Colorful Clock 3. jQuery DJ Hero 4. Animated Pricing Column 5. Slick jQuery  ...

  9. Css3动画效果,彩色文字效果,超简单的loveHeart

    <!DOCTYPE html><html><head><meta charset="utf-8" /><title>Cs ...

随机推荐

  1. php复习整理1--位运算符

    前言    子曰:"温故而知新,可以为师矣." php复习整理系列即是对已掌握的知识的温习,对久不使用的知识点进行重新学习,从而对php基础知识的掌握更加牢固.当然因为是重新温习, ...

  2. 2个域名重定向到https域名

    配置实例: [root@iZbp17q09o7e8pgg9dybd7Z conf.d]# cat company.confserver { listen 80; server_name www.yu* ...

  3. [HNOI2009] 梦幻布丁

    [HNOI2009] 梦幻布丁 标签: 链表 题解 可以直接用链表启发式合并做. 合并的细节处理稍微有点麻烦. 假如需要变成另一种颜色的那个颜色的个数更多,那么就肯定不能直接合. 维护一个color数 ...

  4. JS实现图片''推拉门''效果

    JS实现图片''推拉门''效果   ''推拉门''动效也可以称作"手风琴"效果,大多数效果实现的思路基本是一样的,下面介绍两种方法,一种是通过改变图片的偏移位置实现移动,另一种是通 ...

  5. os模块中关于文件/目录常用的函数使用方法

    os模块中关于文件/目录常用的函数使用方法 函数名 使用方法 getcwd() 返回当前工作目录 chdir(path) 改变工作目录 listdir(path='.') 列举指定目录中的文件名('. ...

  6. 一个例子理解break和continue的区别

    结论:break用于终止整个循环,而continue用于终止某一次循环.public class Test { public static void main(String[] args) { for ...

  7. 2015年百度实习生前端笔试题上海卷a

    1.写出javascript运行结果:alert(‘5’+5); 结果:’55’ 2.写出javascript运行结果:for(var i=0; i<10; i++){} alert(i); 结 ...

  8. Activiti中的各个service的作用

    各个Service的作用: RepositoryService 管理流程定义 RuntimeService 执行管理,包括启动.推进.删除流程实例等操作 TaskService 任务管理 Histor ...

  9. java1环境与简介

    java1环境与简介   Ⅰ 个人简介 陈鹏 联系方式:15828682774 2012 年至今,从事软件开发 5 年. 1 年新加坡海外工作经历. 先后在民企.外企.创业公司做过开发. 熟悉 JAV ...

  10. Java集合框架（二）—— HashSet、LinkedHashSet、TreeSet和EnumSet

    Set接口 前面已经简绍过Set集合,它类似于一个罐子,一旦把对象'丢进'Set集合,集合里多个对象之间没有明显的顺序.Set集合与Collection基本上完全一样,它没有提供任何额外的方法. Se ...