详细w3c这里

http://www.cnblogs.com/happyPawpaw/archive/2012/09/12/2681348.html

Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。

Chrome 和 Safari 需要前缀 -webkit-。

注释：Internet Explorer 9，以及更早的版本，不支持 @keyframe 规则或 animation 属性。

<!DOCTYPE html>

<html>

<head>

<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

{

from {background:red;}

to {background:yellow;}

}

@-moz-keyframes myfirst /* Firefox */

{

from {background:red;}

to {background:yellow;}

}

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

{

from {background:red;}

to {background:yellow;}

}

@-o-keyframes myfirst /* Opera */

{

from {background:red;}

to {background:yellow;}

}

</style>

</head>

<body>

<div></div>

<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>

</body>

</html>

css-@keyframes动画的更多相关文章

  1. css keyframes动画属性设置

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  2. css中animation和@keyframes 动画

    Animation 使用简写属性,将动画与 div 元素绑定: div { animation:mymove 5s infinite; -webkit-animation:mymove 5s infi ...

  3. css精灵动画

    精灵动画的实现 CSS Sprites在国内很多人叫CSS精灵,其实这个技术不新鲜,原理就是:靠不断的切换图片让人感觉视觉上不断在变化,例如gif动画之类的效果 那么前端如何实现精灵效果? 传统的就是 ...

  4. 第四十二课：基于CSS的动画引擎

    由于低版本浏览器不支持css3 animation,因此我们需要根据浏览器来选择不同的动画引擎.如果浏览器支持css3 animation,那么就使用此动画引擎,如果不支持,就使用javascript ...

  5. css（动画，过渡，转换）

    css3动画 @keyframes 规定动画,必须定义动画的名称,动画时长的百分比,一个或多个css样式属性 以百分比来规定改变发生的时间,或者通过关键词"from"和" ...

  6. js如何衔接css3的多个@keyframes动画？

    css3特效动画,我们在编写页面中经常遇到,而且是在同一个div模块上有多个衔接的不同动画,css中,我们经常使用animation-delay (规定在动画开始之前的延迟)进行处理. 那么,下面分享 ...

  7. CSS波纹动画

    波纹动画 在此运用到css的动画属性,以及背景等相关属性. 值得一说的是下面代码中一直写到的这样一行代码:filter: alpha(opacity=0~100) ,这是考虑到浏览器兼容的问题. IE ...

  8. css @keyframes属性 语法

    css @keyframes属性 语法 @keyframes是什么?直线电机生产厂家 @keyframes是CSS的一种规则,可以用来定义CSS动画的一个周期的行为,创建简单的动画. 作用:通过 @k ...

  9. CSS帧动画

    CSS帧动画 基础知识 通过定义一段动画中的关键点.关键状态来创建动画.@Keyframes相比transition对动画过程和细节有更强的控制. 过渡动画是两个状态间的变化,帧动画可以处理动画过程中 ...

  10. CSS 3 动画2D

    动画分为两种,1,逐帧动画  组成动画的每一个画面就是一帧 2,关键帧动画,确定关键帧电脑会自动过度 动画中如果遇到不兼容的问题也是要加前缀 @-webkit-keyframes规则   @-webk ...

随机推荐

  1. splay总结

    以此文纪念人生首次竞赛大选 这里主要讲一讲splay的区间操作,我讲的是指针实现,程序的效率可能比较低,更偏重代码的可读可写性,语言风格不是很优美有效,不喜勿喷 零.初始化结构体 1)这里主要是初始化 ...

  2. 类集-collection接口

    类集就是一个动态的对象数组,与一般的对象数组不同,类集的对象类容可以随意扩充. 1,对象数组使用的时候会存在一个长度的限制,那么类集是专门解决这种限制的.使用类集可以向数组增加任意多的数据. 2,对象 ...

  3. Apache mod_rewrite规则重写的标志一览

    1) R[=code](force redirect) 强制外部重定向 强制在替代字符串加上http://thishost[:thisport]/前缀重定向到外部的URL.如果code不指定,将用缺省 ...

  4. HTTP 错误 500.22 - Internal Server Error

    HTTP 错误 500.22 - Internal Server Error 检测到在集成的托管管道模式下不适用的 ASP.NET 设置. 最可能的原因: 此应用程序在 system.web/http ...

  5. [py]特殊函数+文件保护

    1函数的好处 2函数的全局变量和局部变量 3,包和文件夹的区别 4,__name__ __file__ __doc__ #判断是否为主程序 if __name__=='__main__': pass ...

  6. mac 下卸载mysql的方法

    今天在mac上瞎折腾时,把mysql玩坏了,想卸载重装,却发现找不到卸载程序,百度了下,将操作步骤备份于此: cd ~/ sudo rm /usr/local/mysqlsudo rm -rf /us ...

  7. 基于ASP.NET MVC的热插拔模块式开发框架(OrchardNoCMS)--瘦身计划

    Orchard CMS是针对CMS开发的,对于很多开发需求来说,内容管理这块儿可能并不需要,而需要它的模块式开发模式.所以我这里通过对OrchardCMS进行瘦身,去除 内容管理部分的内容,保留简单的 ...

  8. Java并发编程实战（使用synchronized实现同步方法）

    本文介绍java最基本的同步方式,即使用synchronized关键字来控制一个方法的并发访问,如果一个对象已用synchronized关键字声明,那么只有一个执行线程允许去访问它,其它试图访问这个对 ...

  9. [OpenCVsharp]利用指针实现高速访问像素RGB值

    先简单介绍下什么是OpenCVsharp,内容取自百度百科 OpenCvSharp是一个OpenCV的.Net wrapper,应用最新的OpenCV库开发,使用习惯比EmguCV更接近原始的Open ...

  10. Webwork 学习之路【01】Webwork与 Struct 的前世今生

    Struts 1是全世界第一个发布的MVC框架,它由Craig McClanahan在2001年发布,该框架一经推出,就得到了世界上Java Web开发者的拥护,经过长达6年时间的锤炼,Struts ...