详细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. u3d_shader_surface_shader_4

    Rim Lighting  轮廓自发光 一:疑问:1.总感觉在编辑器Scene状态下,脚本计算的ViewDir是我漫游的Cam,而不是项目中的MainCam啊! 然后就会造成Scene状态下轮廓自发光 ...

  2. luogu1097统计数字[noip2007提高组Day1T1]

    题目描述 某次科研调查时得到了n个自然数,每个数均不超过1500000000(1.5*10^9).已知不相同的数不超过10000个,现在需要统计这些自然数各自出现的次数,并按照自然数从小到大的顺序输出 ...

  3. Android应用程序(APK)的编译打包过程

    (9878) (7) 现在很多人想对Android工程的编译和打包进行自动化,比如建立每日构建系统.自动生成发布文件等等.这些都需要我们对Android工程的编译和打包有一个深入的理解,至少要知道它的 ...

  4. 完整部署CentOS7.2+OpenStack+kvm 云平台环境(6)--在线调整虚拟机的大小

    前面提到过openstack环境部署及创建虚拟机的完整过程,然后有时候会发现创建的虚拟机规格太小,满足不了业务需求:亦或是虚拟机规格太大,容易造成资源浪费.于是就有了在线拉伸虚拟机规格的需求.所以,今 ...

  5. SQL Server 查询性能优化 相关文章

    来自: SQL Server 查询性能优化——堆表.碎片与索引(一) SQL Server 查询性能优化——堆表.碎片与索引(二) SQL Server 查询性能优化——覆盖索引(一) SQL Ser ...

  6. 用sql查询当天,一周,一个月的数据

    用sql查询当天,一周,一个月的数据   数据查询,不管在网站还是在系统,都很常见,下文是介绍最常见的以日期查询的语句 select * from ShopOrder where datediff(w ...

  7. mediaplayer与surfaceView,无法播放问题

    mediaplayer需要在surfaceView创建之后才能创建,不然会导致错误. surfaceholder = msurface.getHolder(); surfaceholder.setKe ...

  8. Python快速教程目录(转)

    作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 怎么能快速地掌握Python?这是和朋友闲聊时谈起的问题. Python包含的内容 ...

  9. 设置 java -jar 的进程显示名称

    有时候我们会用 nohup java -jar xxx.jar来将一些可执行的java application挂在后台,类似windows服务一样来运行.但是有一个不爽的地方,在linux终端里用jp ...

  10. C#执行Javascript代码的几种方法

    一.开源项目 Javascript .NET 地址: http://javascriptdotnet.codeplex.com/ 它是Google Chrome V8引擎在.NET上的封装,功能完善, ...