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. 从一个实例学习----FLASK-WTF

    本案例通过实现一个注册页面的编写,来带你了解FLASK-WTF的运用. 主要功能为表单基础的功能--手机号码必须为11位数,且通过数据库查找不能有已经注册的了,密码要求输入两遍且必须一样,且所有内容不 ...

  2. AI 学习新的开始

    推荐入门学习 http://www.cnblogs.com/subconscious/p/6240151.html

  3. github上fork了别人的项目后，再同步更新别人的提交

    我从github网站和用Git命令两种方式说一下. github网站上操作 打开自己的仓库,进入code下面. 点击new pull request创建.  选择base fork 选择head fo ...

  4. FlashSocke 通过flash进行socket通信(as代码)

    在早期的项目中, 因为需要用IE上连接socket进行通信, 所以不得不借助于flash的socket功能,于是有了下面这个`FlashSocke`,供JavaScript调用 和 回调JavaScr ...

  5. POJ 1023 The Fun Number System

    Description In a k bit 2's complement number, where the bits are indexed from 0 to k-1, the weight o ...

  6. bzoj 2120 带修改莫队

    2120: 数颜色 Time Limit: 6 Sec  Memory Limit: 259 MBSubmit: 7340  Solved: 2982[Submit][Status][Discuss] ...

  7. Android浏览器访问java web的方法

    以前自己也做过Android程序,可以和服务器通信,通过json来存取数据,当时是在APP中直接存取数据的,而这次我打算在手机浏览器中获得服务器传过来的Json参数,后来才发现其实很简单的,首先需要手 ...

  8. windows转mac-开发环境搭建（一）：需要搭建的环境及安装的工具

    作为一个java后端开发者来说,随着项目的增加,前段时间用windows真是受尽折磨,电脑卡到不行,在我们开发部技术大佬的一再安利之下,狠下心选了个17年13寸带touch bar的MacBook P ...

  9. (转载)SVM-基础(二)

    支持向量机: Support Vector  by pluskid, on 2010-09-10, in Machine Learning     52 comments 本文是"支持向量机 ...

  10. 暴力破解MD5的实现（MapReduce编程）

    本文主要介绍MapReduce编程模型的原理和基于Hadoop的MD5暴力破解思路. 一.MapReduce的基本原理 Hadoop作为一个分布式架构的实现方案,它的核心思想包括以下几个方面:HDFS ...