<!DOCTYPE html>

<html>

<head>

<style>

/*

@-webkit-keyframes anim1 { // 规定动画。

0% {

Opacity: 0;

font-size: 12px;

}

100% {

Opacity: 1;

font-size: 34px;

}

}

.anim1Div {

-webkit-animation-name: anim1 ; 规定 @keyframes 动画的名称

-webkit-animation-duration: 1.5s; 规定动画完成一个周期所花费的秒或毫秒。默认是 0

-webkit-animation-iteration-count: 400; 规定动画被播放的次数。默认是 1。

-webkit-animation-direction: alternate; 规定动画是否在下一周期逆向地播放。默认是 "normal"。

-webkit-animation-timing-function: ease-in-out; 规定动画的速度曲线。默认是 "ease"。

} */

div

{

width:100px;

height:100px;

background:red;

position:relative;

animation:myfirst 5s linear 2s infinite alternate;

/* Firefox: */

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

/* Safari and Chrome: */

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

/* Opera: */

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

}

@keyframes myfirst /* 需要用@keyframes来申明动画的名称*/

{/*从0%一直到100%的渐变过程*/

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

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

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

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

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

}

@-moz-keyframes myfirst /* Firefox */

{

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

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

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

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

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

}

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

{

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

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

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

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

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

}

@-o-keyframes myfirst /* Opera */

{

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

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

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

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

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

}

</style>

</head>

<body>

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

<div></div>

</body>

</html>

css3中动画animation的应用的更多相关文章

  1. css3中动画(transition)和过渡(animation)详析

    css3中动画(transition)和过渡(animation)详析

  2. CSS3中动画属性transform、transition和animation

    Transform:变形 在网页设计中,CSS被习惯性的理解为擅长表现静态样式,动态的元素必须借助于javascript才可以实现,而CSS3的出现改变了这一思维方式.CSS3除了增加革命性的创新功能 ...

  3. CSS3中动画属性transform、transition 和 animation

    CSS3中和动画有关的属性有三个 transform.transition 和 animation.下面来一一说明:        transform   从字面来看transform的释义为改变,使 ...

  4. CSS3(4)---动画(animation)

    CSS3(4)---动画(animation) 之前有写过过渡:CSS3(2)--- 过渡(transition) 个人理解两者不同点在于 过渡 只能指定属性的 开始值 与 结束值,然后在这两个属性值 ...

  5. 怎样使CSS3中的animation动画当每滑到一屏时每次都运行

    这个得结合js来做的.比如这里有3个层,js判断滚动到当前层位置的时候给其加上一个class即可,而加的这个class就是带css3执行动画的 class <div id="a1&qu ...

  6. CSS3中动画transform必须要了解的Skew变化原理

    transform是CSS3中比较安全的动画(对于性能来说),其中有一些动画属性,来执行不同的变化.今天我们来了解skew的变化原理. skew,其实使用的频率不是很高,当然也没有最低.但是往往,一直 ...

  7. CSS3中的animation动画

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  8. 如何使CSS3中的animation动画当每滑到一屏时每次都运行

    这个我还没用过,但感觉以后会用到,就随手摘抄一下啦<div id="a1"></div> <div id="a2">< ...

  9. css3中的animation

    不使用js或jquery,用css3实现一张图片的滑动.我用的是animation来设置所要应用的动画效果,首先在html中写好一个<div></div>,并放置一张图片在di ...

随机推荐

  1. ViewState存储到服务器

    把viewstate保存在服务器上 将ViewState持久化保持在服务器端的代码,这样ViewState不占用网络带宽,因此其存取只是服务器的磁盘读取时间.并且它很小,可以说是磁盘随便转一圈就能同时 ...

  2. 使用XmlReader读取xml文件之二

    在.net开发中经常需要读写xml形式的文件(app.config和web.config分别是WinForm和WebForm中使用到的 xml文件的一个特列,并且微软提供了通用的方法,在此就不赘述了) ...

  3. jquery1.11 操作checkbox：全选、取消全选、获取选择元素、获取取消选择元素（总结）

    jquery1.11.1版本完成对checkbox的操作 1. 使用属性prop设置选中状态 2.使用:checked和:not(:checked)获取选中的元素 源码: <!DOCTYPE h ...

  4. 利用js制作异步验证ajax方法（）

    如何利用js写ajax异步验证.代码如下: window.onload = function(){ var name = document.getElementById('register-name- ...

  5. SQL Server IO系统问题解决

    方法 1. 查询是不是真的要返回这么多的数据. 方法 2. 查询是不是系统的内存不足. 方法 3. 检查查询要访问的数据是不是不常用.如果这个数据不常用,它没有在内存中也就不奇怪了. 方法 4. 是不 ...

  6. rdlc部署zt

    原文:rdlc部署zt 偶然间遇到“ 未能加载文件或程序集microsoft.reportviewer.winforms ……”的一个错误,以前web是遇到过,没想到winform部署也会遇到.找了半 ...

  7. 杭电oj1326 Box of Bricks

    Tips:先求出平均数再分别计算各数与平均数的差相加,注意两个测试结果之间要空一行 #include<iostream> using namespace std; int main() { ...

  8. paip.QQ音乐导出歌单总结

    paip.QQ音乐导出歌单总结 作者Attilax ,  EMAIL:1466519819@qq.com  来源:attilax的专栏 地址:http://blog.csdn.net/attilax ...

  9. html表格单元格设置背景颜色

  10. php 获取汉字拼音首字母的函数

    function getFirstChar($string){ if($string{0}>="A" and $string{0}<="z" )re ...