<!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. Inno setup complier将文件添加注册表

    [Registry] Root: HKCR; Subkey:.; ValueType: string; ValueName: ; ValueData:"264file" Root: ...

  2. Nodejs随笔（三）：全局对象之global

    首先,进入node REPL: mesogene@mesogene-team:~$ node > 查看global对象,发现其他全局对象(包括Buffer.require对象)以及全局方法都包含 ...

  3. 13个mysql数据库的实用SQL小技巧

    此文章为转载 使用CASE来重新定义数值类型 SELECT id,title, (CASE date WHEN '0000-00-00' THEN '' ELSE date END) AS date ...

  4. OpenProcess() 函数

    方法名称:OpenProcess 位置:Kernel32.dll OpenProcess 函数用来打开一个已存在的进程对象,并返回进程的句柄. 使用外部函数首先需导入命名空间: System.Runt ...

  5. C++ vector 实现二维数组时, 在类的头文件中定义时遇到"应输入类型符"的问题?

    见下,当我在类的声明文件中定义二维vector时,提示我应输入类型说明符; 但是相同的格式定义,在类中将二维vector修改为在源文件中定义就可以顺利通过,并顺利执行打印 打印结果如下: 望大神来解惑 ...

  6. 用SQL将查询出来的多列的值拼接成一个字符串【转载】

    MySQL中: [sql] view plaincopyprint? -- 单列拼接,先查出一行,再加上逗号,接着拼接 查出的下一行 select group_concat(E.SUPPORT) fr ...

  7. 关于jQuery中的ajax的方法介绍

           jQuery提供一系列Ajax函数方便我们调用Ajax, 其中最核心也是最复杂的是jQuery.ajax(),所有的其他Ajax函数都是它的一个简化调用.当我们想要完全控制Ajax时可以 ...

  8. Android动画之硬件加速

    你的动画写出来卡嘛?流畅嘛 如果你想提升动画的性能,那就是用它-hardware layers. During animations your views may be redrawn each fr ...

  9. [Python]从豆瓣电影批量获取看过这部电影的用户列表

    前言 由于之后要做一个实验,需要用到大量豆瓣用户的电影数据,因此想到了从豆瓣电影的“看过这部电影 的豆瓣成员”页面上来获取较为活跃的豆瓣电影用户. 链接分析 这是看过"模仿游戏"的 ...

  10. PCL学习笔记（一）

    由于项目需要,开始学习一下HP公司的PCL打印语言,发现这方面的中文资料非常少,我做下记录也为后人提供便利. 关于PCL的介绍可以参考wiki百科 http://zh.wikipedia.org/zh ...