相关属性：

@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. XPS Enable GPIO on EMIO interface 不见了

    按照 <嵌入式系统软硬件协同设计实战指南 -- 基于xilinx Zynq>第九章 zedboard 入门 我一步一步做到9.1.2 (13) 发现 没有  Enable GPOI on ...

  2. hdu2010(dfs+剪枝）

    Tempter of the Bone Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Othe ...

  3. 再看数据库——（5）Group By与Order By

    在使用sql语句时,很多人都会分不清order by与group by,其实简单的说: order by -- 排序 group by --分组 1.order by是行的排序,默认为升序. 有两种方 ...

  4. linux运维文章

    运维中关键技术点解剖:1 大量高并发网站的设计方案 :2 高可靠.高可伸缩性网络架构设计:3 网站安全问题,如何避免被黑?4 南北互联问题,动态CDN解决方案:5 海量数据存储架构 一.什么是大型网站 ...

  5. PHP高级——抽象类与接口的区别

    在学习PHP面向对象时,都会在抽象类与接口上迷惑,作用差不多为什么还那么容易混淆,何不留一去一?但是事实上两者的区别还是很大的,如果能够很好地运用PHP的两个方法,面向对象的程序设计将会更加合理.清晰 ...

  6. 2016华中农业大学预赛 E 想法题

    Problem E: Balance Time Limit: 1 Sec  Memory Limit: 128 MBSubmit: 205  Solved: 64[Submit][Status][We ...

  7. [01]关于TDD、BDD和DDD的一些看法

    在实际的项目中,我们可能随时面对各种不同的需求,它的各个方面的要素决定了我们所采用的开发模式. 比如,它的复杂度如何?所有的需求是否足够清晰?开发人员对相关的业务是否足够了解?项目的工期是否合理?种种 ...

  8. 最全面的Android Webview详解

    转自:最全面的Android Webview详解 前言 现在很多App里都内置了Web网页(Hyprid App),比如说很多电商平台,淘宝.京东.聚划算等等,如下图  那么这种该如何实现呢?其实这是 ...

  9. 2018多校第三场 hdu6331 M :Walking Plan

    题目链接 hdu6331 自我吐槽,这场多校大失败,开局签到因输入输出格式写错,wa了3发.队友C题wa了1个小时,还硬说自己写的没错,结果我随便造了个小数据,他都没跑对.然后跑对了后又进入了无限的卡 ...

  10. v4l2读取摄像头程序流程解析【转】

    转自:https://my.oschina.net/u/1024767/blog/210801 v4l2 操作实际上就是 open() 设备, close() 设备,以及中间过程的 ioctl() 操 ...