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. 一个巨low的“2048”

    代码就是这样,做的不是4*4而是一个2*2 #include<stdio.h>#include<stdlib.h>#include<time.h>int main( ...

  2. Language Modeling with Gated Convolutional Networks

    语言模型 所谓的语言模型,即是指在得知前面的若干个单词的时候,下一个位置上出现的某个单词的概率. 最朴素的方法是N-gram语言模型,即当前位置只和前面N个位置的单词相关.如此,问题便是,N小了,语言 ...

  3. javamail+ical4j发送会议提醒

    本篇讲述小编在使用ical4j时对其的理解与使用,留作笔记的同时希望能帮助到大家! 初学者可以先了解下ical4j的基本信息: iCalender编程基础,了解与使用ical4j:https://ww ...

  4. Spring Task定时任务Scheduled

    Spring的任务调度,采用注解的形式 Spring中@Scheduled的用法. spring的配置文件如下,先扫描到任务的类,打开spirng任务的标签 <beans xmlns=" ...

  5. OpenVPN的那些坑

    遇到的情形 最近遇到一种情况,当需要同时使用到多个VPN连接时,默认的openVPN连接是不支持的,但是可以通过手动配置虚拟网络适配器进行相关的设置. 具体解决方法 基本思路是:在本地的网络连接中添加 ...

  6. PHPUnit简介及使用

    一.PHPUnit是什么? 1.它是一款轻量级的PHP测试框架,地址:http://www.phpunit.cn 2.手册:http://www.phpunit.cn/manual/5.7/zh_cn ...

  7. 前端回答从输入URL到页面展示都经历了些什么

    浏览器和服务器涉及大量网络通信内容,此处做了弱化介绍,作为前端主要关注第四部分.一. 网络环境保障我们先假定我们访问的URL为www.abc.com并且地址不在局域网内:首先我们所处的局域网的总路由应 ...

  8. 排序算法(Java实现)

    这几天一直在看严蔚敏老师的那本<数据结构>那本书.之前第一次学懵懵逼逼,当再次看的时候,发觉写的是非常详细,非常的好. 那就把相关的排序算法用我熟悉的Java语言记录下来了.以下排序算法是 ...

  9. solr6.6教程-基础环境搭建(二)

    在上一篇文章中已经简单介绍了solr在windows的部署,今天我们来下如何新建一个自己core. 1,core理解 如果把solr理解为个数据库的话,那么core可以理解为数据库中的一张表,其实就是 ...

  10. 【转】磁盘I/O那些事

    背景 计算机硬件性能在过去十年间的发展普遍遵循摩尔定律,通用计算机的CPU主频早已超过3GHz,内存也进入了普及DDR4的时代.然而传统硬盘虽然在存储容量上增长迅速,但是在读写性能上并无明显提升,同时 ...