CSS3 动画（@keyframes，animation）

CSS3 @keyframes 规则

要创建CSS3动画，你将不得不了解@keyframes规则。

@keyframes规则是创建动画。 @keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。

@keyframes myfirst

{

    from {background: red;}

    to {background: yellow;}

}

@-webkit-keyframes myfirst /* Safari 与 Chrome */

{

    from {background: red;}

    to {background: yellow;}

}

CSS3 动画

当在 @keyframes 创建动画，把它绑定到一个选择器，否则动画不会有任何效果。

指定至少这两个CSS3的动画属性绑定向一个选择器：

  • 规定动画的名称
  • 规定动画的时长

把 "myfirst" 动画捆绑到 div 元素，时长：5 秒：

<style>

div

{

    width:100px;

    height:100px;

    background:red;

    animation:myfirst 5s;

    -webkit-animation:myfirst 5s; /* Safari and Chrome */

}

@keyframes myfirst

{

    from {background:red;}

    to {background:yellow;}

}

@-webkit-keyframes myfirst /* Safari and Chrome */

{

    from {background:red;}

    to {background:yellow;}

}

</style>

</head>

<body>

<p><b>注意:</b> 该实例在 Internet Explorer 9 及更早 IE 版本是无效的。</p>

<div></div>

</body>

注意: 您必须定义动画的名称和动画的持续时间。如果省略的持续时间，动画将无法运行，因为默认值是0。

请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。

0% 是动画的开始，100% 是动画的完成。

为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。

实例：

当动画为 25% 及 50% 时改变背景色，然后当动画 100% 完成时再次改变：

<style>

div

{

    width:100px;

    height:100px;

    background:red;

    animation:myfirst 5s;

    -moz-animation:myfirst 5s; /* Firefox */

    -webkit-animation:myfirst 5s; /* Safari and Chrome */

    -o-animation:myfirst 5s; /* Opera */

}

@keyframes myfirst

{

    0%   {background:red;}

    25%  {background:yellow;}

    50%  {background:blue;}

    100% {background:green;}

}

@-moz-keyframes myfirst /* Firefox */

{

    0%   {background:red;}

    25%  {background:yellow;}

    50%  {background:blue;}

    100% {background:green;}

}

@-webkit-keyframes myfirst /* Safari and Chrome */

{

    0%   {background:red;}

    25%  {background:yellow;}

    50%  {background:blue;}

    100% {background:green;}

}

@-o-keyframes myfirst /* Opera */

{

    0%   {background:red;}

    25%  {background:yellow;}

    50%  {background:blue;}

    100% {background:green;}

}

</style>

</head>

<body>

<div></div>

<p><b>注释：</b>当动画完成时，会变回初始的样式。</p>

<p><b>注意:</b> 该实例在 Internet Explorer 9 及更早 IE 版本是无效的。</p>

</body>

实例：改变背景色和位置：

<style>

div

{

    width:100px;

    height:100px;

    background:red;

    position:relative;

    animation:myfirst 5s;

    -webkit-animation:myfirst 5s; /* Safari and Chrome */

}

@keyframes myfirst

{

    0%   {background:red; left:0px; top:0px;}

    25%  {background:yellow; left:200px; top:0px;}

    50%  {background:blue; left:200px; top:200px;}

    75%  {background:green; left:0px; top:200px;}

    100% {background:red; left:0px; top:0px;}

}

@-webkit-keyframes myfirst /* Safari and Chrome */

{

    0%   {background:red; left:0px; top:0px;}

    25%  {background:yellow; left:200px; top:0px;}

    50%  {background:blue; left:200px; top:200px;}

    75%  {background:green; left:0px; top:200px;}

    100% {background:red; left:0px; top:0px;}

}

</style>

</head>

<body>

<p><b>注意:</b> 该实例在 Internet Explorer 9 及更早 IE 版本是无效的。</p>

<div></div>

</body>

CSS3的动画属性

下面的表格列出了 @keyframes 规则和所有动画属性：

下面两个例子设置所有动画属性：

实例

运行myfirst动画，设置所有的属性：

div

{

    animation-name: myfirst;

    animation-duration: 5s;

    animation-timing-function: linear;

    animation-delay: 2s;

    animation-iteration-count: infinite;

    animation-direction: alternate;

    animation-play-state: running;

    /* Safari 与 Chrome: */

    -webkit-animation-name: myfirst;

    -webkit-animation-duration: 5s;

    -webkit-animation-timing-function: linear;

    -webkit-animation-delay: 2s;

    -webkit-animation-iteration-count: infinite;

    -webkit-animation-direction: alternate;

    -webkit-animation-play-state: running;

}

实例

与上面的动画相同，但是使用了简写的动画 animation 属性：

div

{

    animation: myfirst 5s linear 2s infinite alternate;

    /* Safari 与 Chrome: */

    -webkit-animation: myfirst 5s linear 2s infinite alternate;

}

【Demo】CSS3 动画的更多相关文章

  1. 代码：css3动画效果demo

    四行文字会逐次掉落:  如果要停留在最后一帧的动画,注意要用forwards,不要用both. <style type="text/css"> @-webkit-key ...

  2. demo: 全页面CSS3动画的一个参考例子

    全页面CSS3动画的一个参考例子: http://wow.blizzard.cn/wow/wod-achievement/ 魔兽的一个活动页 第二页.第三页,文字进入页面 <script src ...

  3. 学习CSS3动画（animation）

    CSS3就是出了不少高大上的功能,3D效果.动画.多列等等.今天写篇文章记录怎么一下怎么用CSS3写一个动画. 丑话还得说前头,IE9以及以下版本不支持CSS3动画(如真要实现可以考虑用js,不过估计 ...

  4. 用CSS3动画，让页面动起来

    以前就听说过有个库,叫animate.css,但是自己并没有在实际项目中使用过,这次正好要做个招聘页面,得以利用一下这个库,在经常会卡顿的UC浏览器中也能流畅执行. 扫描下面的二维码,可以看到在线的d ...

  5. CSS3动画几个平时没注意的属性

    一.timing-function: steps() 一开始在使用CSS3的时候并没有太注意这个timing-function,只是注意到自定义贝塞尔曲线. 1)一个项目中的实例 先来看看左边加了st ...

  6. JavaScript - 基于CSS3动画的实现

    在痛苦的IE8时代,所有的动画都只能基于自己计算相关动画属性,开定时器setTimeout/setInterval轮询动画任务. 而肩负重任的HTML5,早已注意到了日益增强的动画,随着HTML5的降 ...

  7. css3动画简介以及动画库animate.css的使用

    在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城尸...呵呵,作为一个攻城尸,没有点高端大气上档次的东西怎么能行呢,那么css3 ...

  8. jquery实现css3动画

    jquery animate改变元素样式时,只支持数字值的变化,比如width,height等,但是css3属性状态值很多都不是数字值,而是字符串和数字混合在一起,比如translate(), rot ...

  9. CSS3 动画一瞥

    伴随HTML5而来的CSS3让前端大湿们可以用简单的CSS样式即可写出动画效果来,而在这之前,一提到动画我们可能会想到JavaScript,Flash,Java插件等.如果是用JavaScript那倒 ...

随机推荐

  1. MBR和GPT(分区)

    MBR:Master Boot Record GPT:Guid Partition Table (全局唯一标识符分区表) GPT is the new standard and is graduall ...

  2. http协议中客户端8种请求方法

    http请求中的8种请求方法 1.opions   返回服务器针对特定资源所支持的HTML请求方法   或web服务器发送*测试服务器功能(允许客户端查看服务器性能) 2.Get   向特定资源发出请 ...

  3. PKU 1129 Channel Allocation(染色问题||搜索+剪枝)

    题目大意建模: 一个有N个节点的无向图,要求对每个节点进行染色,使得相邻两个节点颜色都不同,问最少需要多少种颜色? 那么题目就变成了一个经典的图的染色问题 例如:N=7 A:BCDEFG B:ACDE ...

  4. ubuntu 16.4安装卸载apache+php+mysql

    1.安装apache sudo apt-get update sudo apt-get install apache2 2.安装php5.6 添加PPA源:add-apt-repository ppa ...

  5. 一道仅有7人通过的超5星微软比赛题目-------解题思路&优秀代码分享，邀你来“找茬儿”

    6月23日英雄会平台发布了一道难度为超5星的微软比赛题目,截止活动结束共有300多名编程爱好者参与线上答题,而最终通过者仅有7人,通过率仅为2%.为什么成绩如此出人意料?是因为题目的英文描述难以理解? ...

  6. motan rpc

    git :  帮助 文档 基本介绍 Motan是一套基于java开发的RPC框架,除了常规的点对点调用外,Motan还提供服务治理功能,包括服务节点的自动发现.摘除.高可用和负载均衡等.Motan具有 ...

  7. mysql中sql语句中常见的group_concat()函数意思以及用法，oracle中与其一样的功能函数是wmsys.wm_concat()

    1.group_concat(),手册上说明:该函数返回带有来自一个组的连接的非NULL值的字符串结果.比较抽象,难以理解. 通俗点理解,其实是这样的:group_concat()会计算哪些行属于同一 ...

  8. Spring Tomcat启动过程

    入口,配置再web.xml中, 初始化applicationContext 创建webApplicationContext,这里可加载web.xml文件中定义了contextClass 获取conte ...

  9. 仔细讨论 C/C++ 字节对齐问题⭐⭐

    原文:https://www.cnblogs.com/AlexMiller/p/5509609.html 字节对齐的原因 为了提高 CPU 的存储速度,编译器会对 struct 和 union的存储进 ...

  10. Jquery2 基础核心

    学习要点: 1.代码风格 2.加载模式 3.对象互换 4.多个库之间的冲突 本节简单的介绍一下jQuery 一些核心的问题. 一．代码风格 在jQuery程序中,不管是页面元素的选择.内置的功能函数, ...