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. 试着把.net的GC讲清楚(1)

    什么是GC? GC(garbage collection)是对内存管理中回收已经不用的内存的一种机制,我们熟知的java和.net都有自己的GC机制,是内存管理的一部分. 为什么会有GC呢?是因为动态 ...

  2. pygame写贪吃蛇

    python小白尝试写游戏.. 学了点pygame不知道那什么练手好,先拿贪吃蛇开刀吧. 一个游戏可以粗略的分为两个部分: 数据(变量) 处理数据(函数,方法) 设计变量 首先预想下,画面的那些部分需 ...

  3. Quartz动态改变任务时间

    基于quartz-2.2 的动态任务调度 Quartz是一个完全由java编写的开源作业调度框架. 调度器 Quartz框架的核心是调度器.调度器负责管理Quartz应用运行时环境.调度器不是靠自己做 ...

  4. [Python Study Notes]实现对鼠标控制

    ''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''' ...

  5. 常见HTTP状态码出现原因

    302:重定向.访问当前地址,后端重新指定一个URL,浏览器跳转到新的地址. 303:对于POST请求,它表示请求已被处理,客户端可以接着使用GET方法请求Location里的URL. 304:客户端 ...

  6. mysql 在一个实例运行情况下再搭建一个实例

    配置mysql服务 详细步骤,请参考(http://study.lishiming.net/chapter17.html#mysql), 阿铭只把简单步骤写一下. 根据阿铭提供的地址,假如你已经搭建好 ...

  7. Java中从键盘输入的三种方法

    import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader; import ...

  8. Asp.net Core 微信公众号开发系列

    参考:http://www.cnblogs.com/zskbll/p/4074855.html 一.微信公众平台操作流程 1.先到微信公众平台注册账号 2.登录成功后找到开发-->开发者工具-- ...

  9. python——Django项目模板

    views.py # -*- coding: utf-8 -*- from __future__ import unicode_literals from django.shortcuts impor ...

  10. python_crawler,批量下载文件

    这个第一个python3网络爬虫,参考书籍是<python网络数据采集>.该爬虫的主要功能是爬取某个网站,并将.rar,.doc,.docx,.zip文件批量下载. 后期将要改进的是,用后 ...