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. fatal error C1083:无法打开包括文件:“stdint.h”: No such file or directory解决方案

    stdint.h文件是C99的标准头文件,默认情况下VC是不支持的,所以在使用过程中肯定会碰到 "No such file or directory"的问题. 解决办法 1.从网盘 ...

  2. gitlab wiki 500

    记录一次使用gitlab各种报500的问题,并怎么解决的描述下 一.问题背景 描述我第一次使用wiki的步骤: 二.问题描述 之后我进行任何合法的操作(创建页面使用全英文名称:页面不做任何修改,只是点 ...

  3. php分布式redis实现session共享

    方法一:找到配置文件php.ini,修改为下面内容,保存并重启服务 session.save_handler = redis session.save_path = "tcp://127.0 ...

  4. 关于DOM与BOM的总结

    1.什么是BOM,什么是DOM(基本概念) BOM: Browers Object MOdel           浏览器对象模型 DOM: Document Object MOdel         ...

  5. 换行符\r \n LF

    前言:在对照PSR-2规范时,看到文件结尾必须要以Unix LF(linefeed)结尾,不懂查~ 来源于:http://www.cppblog.com/prayer/archive/2009/08/ ...

  6. 对于JDBC数据库的初始化操作

    package com.bluesky.connection; import java.sql.Connection; import java.sql.DriverManager; import ja ...

  7. hdu1800 贪心+hash+真的有毒

    这道题用map<string,int>TLE到死.这题又是一道毒题,看了评论,居然可以用int读入,而且网上还有用排序的....用int的连前导0都不需要处理了 说下贪心吧,每把扫帚一定要 ...

  8. nginx80端口被占用，启动失败。

    mac自带的apache占用了80端口,导致nginx服务器不能启动.这个问题是怎么解决的,目前还是不清楚. apache占用端口,使用命令进行关闭: apachectl  -k  stop,然后重启 ...

  9. Redis--配置密码

    可以通过以下方法进行密码的配置: ① 修改配置文件设置密码 ② 通过命令修改密码(重启redis后,新设置的密码会失效) 此处介绍第一种 1. 找到redis的配置文件,一般在/etc/redis.c ...

  10. MAC地址表配置与绑定

    MAC地址表分类 ---静态MAC地址表项由用户手工配置,表项不老化: ---黑洞MAC地址表项包括源黑洞MAC地址表项和目的黑洞MAC地址表项,用于丢弃含有特定源MAC地址或目的MAC地址的报文(例 ...