相关属性：

@keyframes规则：定义动画

语法：@keyframes animationname{keyframes-selector {CSS-style;}}

animationname:动画名称

keyframes-selector:动画持续百分比（0%~100%)  from(表示0%）  to(表示100%)

CSS-style:要设置的样式；

如定义一个名称为myanimation的动画:

@keyframes myanimation{

0% {font-size:10px;}

50% {font-size:30px;}

100% {font-size:100px;}}

animation属性：是以下属性的复合

animation-name:动画的名称

animation-duration:动画完成时间

aniamtion-timing-function:动画速度设置（linar/ease/ease-in/ease-out/ease-in-out)

animation-delay:动画在启动前的延迟间隔

animation-iteration-count:播放次数(n/infinite)

animation-direction:动画播放方向（normal/reverse

<!doctype html>

<html>

<head>

<meta charset="utf-8" />

<style>

div{

width:400px;

height:400px;

background-color:grey;

}

p{

color:red;

animation:myanimation 10s infinite;

}

@keyframes myanimation{

0% {font-size:10px;}

50% {font-size:30px;}

100% {font-size:100px;}

}

</style>

</head>

<body>

<div>

    <p>this is an animation</p>

</div>

</body>

</html>

用CSS3产生动画效果的更多相关文章

  1. 测试css3的动画效果在display:none的时候不耗费性能

    也许你也有这个疑惑,动画一直在播放,那它不显示出来的时候也一直在播放的话,那是否一直占用资源呢? <!doctype html> <html> <head> < ...

  2. css3 transform动画效果与公司框架简易动画的差异

    先看一下该网站的效果 http://2014guangzhouchezhan.dongfeng-citroen.com.cn/mobile/ 该站里面的动画效果由简易动画与css3动画2种方式混合达到 ...

  3. css3实现动画效果

    一.动画效果的常用属性 实现动画效果需要借助css3的下列属性:transform,transion,animation(具体可以参见教材) 二.动画效果实例 1)文字闪烁的动画效果 /*文字的闪烁效 ...

  4. 纯CSS3带动画效果导航菜单

    随着互联网的发展,网页能表现的东西越来越多.由最开始单纯的文字和链接构成的网页,到后来的表格布局,再到div+css模式,现在发展到了html+css3.网页能表达的东西越来越多,css3兴起已经很多 ...

  5. CSS3新动画效果

    CSS3添加了几个动画效果的属性,通过设置这些属性,可以做出一些简单的动画效果而不需要再去借助JavaScript.CSS3动画的属性主要分为三类:transform.transition以及anim ...

  6. css3的动画效果

    全新的css3加入的动画效果: [ animation-name ]:检索或设置对象所应用的动画名称 [ animation-duration ]: 检索或设置对象动画的持续时间 [ animatio ...

  7. CSS3悬浮动画效果

    利用CSS3的伪类元素hover以及transform,transition等动画属性,可以做出一些炫酷的动画效果.下面将一些项目中使用到的示例发布出来,供大家一起学习研究.演示地址:runjs. 浏 ...

  8. 初识css3 3d动画效果

    (先看我博客右上角的3d盒子动画效果,目前没做兼容处理,最好最新的chrome看)无意间看到网上css3写的3d动画效果,实在炫酷,以前理解为需要js去计算去写,没想到css直接可以实现.于是开始研究 ...

  9. tween.js是一款可生成平滑动画效果的js动画库。tween.js允许你以平滑的方式修改元素的属性值。它可以通过设置生成各种类似CSS3的动画效果。

    简要教程 tween.js是一款可生成平滑动画效果的js动画库.相关的动画库插件还有:snabbt.js 强大的jQuery动画库插件和Tweene-超级强大的jQuery动画代理插件. tween. ...

  10. 纯css3云彩动画效果

      效果描述: 纯CSS3实现的云彩动画飘动效果 非常逼真实用 使用方法: 1.将body中的代码部分拷贝到你的页面中 2.引入对应的CSS文件即可

随机推荐

  1. JavaScript里面的基本函数

    1.主要有三类基本函数 <script type="text/javascript"> // 普通函数 function func1(arg){ return true ...

  2. error MSB6006: “aapt.exe”已退出，代码为-1073741819

    今天升级了Xamarin和Android SDK之后连模板程序生成都报这个错误,真是想剁手啊,最后在google同学的帮助下搜索到了Xamarin官方论坛上的回答 这个问题是生成工具版本选择的问题,似 ...

  3. MYSQL 简单的建库操作代码

    一.查询所有数据库 代码:show databases; 成功后如下图: 二.建立一个数据库 代码:create database test3: 成功后如下图: 三.连接数据库 代码:use test ...

  4. [codevs1746][NOI2002]贪吃的九头龙

    [codevs1746][NOI2002]贪吃的九头龙 试题描述 传说中的九头龙是一种特别贪吃的动物.虽然名字叫"九头龙",但这只是说它出生的时候有九个头,而在成长的过程中,它有时 ...

  5. [洛谷P1792][国家集训队]种树

    题目大意:给出由$n$个数组成的环,取某个数就可以得到它的分数,相邻的两个数不能同时取.问取$m$个数可以得到的最大分数. 题解:建一个大根堆,贪心取,每个点记录前驱后继,取一个点就把前驱后继设成不能 ...

  6. BZOJ2957 楼房重建 【线段树】

    题目 小A的楼房外有一大片施工工地,工地上有N栋待建的楼房.每天,这片工地上的房子拆了又建.建了又拆.他经常无聊地看着窗外发呆,数自己能够看到多少栋房子. 为了简化问题,我们考虑这些事件发生在一个二维 ...

  7. Installing patches on an ESXi 5.x by the command

    Purpose This article outlines the procedure for installing patches on an ESXi 5.x host from the comm ...

  8. shell-总结【摘录】

    阅读目录 1. Shell简介 2. 几种常见的Shell 3. 编译型语言和解释型语言的区别 4. 什么时候使用Shell? 5. 第一个Shell脚本 6. Shell变量 7.Shell特殊变量 ...

  9. log4net日志分割，按大小分割

    最近写了一个socket通信的手表在线服务端,在日志方面,记录下Log4net日志分割 1.引入log4net.dll 2.web.config添加configsection handler 映射: ...

  10. .net yield return

    yield在迭代器块中用于向枚举数对象提供值或发出迭代结束信号.它的形式为下列之一: yield return <expression>; yield break; 计算表达式并以枚举数对 ...