CSS3 动画

通过 CSS3,我们能够创建动画,这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。

@keyframes 定义动画关键帧:

@keyframes animateName {
0% {
状态
}
100% {
状态
}
}
@keyframes animateName {
from {
状态
}
to {
状态
}
}

动画是使元素从一种样式逐渐变化为另一种样式的效果,可以改变任意多的样式任意多的次数。

from和to等同于0%和100%;0%表示动画的开始;100%表示动画的结束;

@keyframes+动画的名字构建。chrome和Safari 要在之前加前缀-webkit-变成了@-webkit-keyframes;

当在 @keyframes 中创建动画时,请把它捆绑到某个选择器,否则不会产生动画效果。

通过规定至少以下两项 CSS3 动画属性,即可将动画绑定到选择器:

  • 规定动画的名称
  • 规定动画的时长(默认为0)

例如:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
@keyframes tabList {
0% {
width: 50px;
height: 50px;
}
50% {
width: 100px;
height: 100px;
} 100% {
width: 150px;
height: 150px;
}
} @-webkit-keyframes tabList{
0% {
width: 50px;
height: 50px;
}
50% {
width: 100px;
height: 100px;
}
100% {
width: 150px;
height: 150px;
}
}
.tablist{
animation: tabList 3s;
-webkit-animation: tabList 3s;
background: red;
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<div class="tablist"></div>
</body>
</html>

当然对于状态的定义不局限于开始和结束两个时间点,我们可以指定一个动画过程中任何时间点元素的状态。50%就是开始与结束的时间点,也可以写入10%,20%,30%...根据需求挑时间点动画。

CSS3 动画属性:

当我们使用@keyframes定义好了一个动画,它并不会执行产生任何效果,直到我们通过animation属性将动画应用到相应元素上。

对于 CSS3 animation 属性其完整的语法如下:

animation: name duration timing-function delay iteration-count direction;

  • name是使用@keyframes定义好的关键帧名称
  • duration从字面意思可知是指定动画持续时间
  • timing-function 指定动画以何种方式播放,具体指的是从元素的一个状态过渡到另一个状态所使用的方式,可用的值有linear,ease, ease-in, ease-out, ease-in-out, cubic-bezier(n,n,n,n)。
  • delay指定动画何时开始,默认为0;
  • iteration-count 指定动画重复次数,可以指定一个数字,也可以使用'infinite'表示一直播放。默认为1.
  • direction指定动画是否反向播放或者交替着播放,可用的值有normal, reverse, alternate, alternate-reverse

另外还有一个属性非常有用,一般在js中控制其属性。animation-play-state:paused/running;具体参考:http://www.w3school.com.cn/tiy/c.asp?f=css_animation-play-state

其中name和duration 是必需的,如果不指定duration默认为0,也就是动画持续0秒,所以就无法看到动画效果。

以上的例子.tablist使用@keyframes定义好的动画。

参考:

  http://www.cnblogs.com/Wayou/p/first_glance_at_the_css3_animation.html

  http://www.w3school.com.cn/css3/css3_animation.asp

  http://www.w3schools.com/css/css3_animations.asp

css3动画animate的更多相关文章

  1. css3动画简介以及动画库animate.css的使用

    在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城尸...呵呵,作为一个攻城尸,没有点高端大气上档次的东西怎么能行呢,那么css3 ...

  2. animate.css 一些常用的CSS3动画效果

    大家已经开始在项目中使用一些CSS3动画效果了吧,这让网站在高端浏览器上看起来很上流.animate.css是一个老外做的各种CSS3动画的合集,比较全,也很炫,大家可以参考学习一下. 项目主页:ht ...

  3. css3动画之animate

    CSS3 动画属性 下面的表格列出了 @keyframes 规则和所有动画属性: 语法:div{animation: 动画名称 一个周期播放时间 速度曲线 延迟时间 下个周期是否逆向} @keyfra ...

  4. 转: css3动画简介以及动画库animate.css的使用

    ~~~ transition  animation 和 animate.css 在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城 ...

  5. css3动画和animate.css动画库使用

    CSS3动画 css3动画可以分为两种.transition过渡动画和keyframes关键帧动画 过渡动画 第一种叫过渡(transition)动画,就是从初始状态过渡到结束状态这个过程中所产生的动 ...

  6. 【转载】css3动画简介以及动画库animate.css的使用

    原文地址:http://www.cnblogs.com/2050/p/3409129.html 在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好. ...

  7. CSS3动画animation认识,animate.css的使用

    CSS动画 可以取代js动画 在移动端会更加流畅! 下面是一个的绘制太阳系各大行星运行轨迹笔记,可以自学参考! -------------------------------------------- ...

  8. CSS3动画制作

    CSS3动画制作 rotate 绕中心旋转 fadeInPendingFadeOutUp 先渐现,停留2s,再向上滑动并逐渐消失 fadeInUp2D 向上滑动并渐现, 因Animate.css的fa ...

  9. 用CSS3动画,让页面动起来

    以前就听说过有个库,叫animate.css,但是自己并没有在实际项目中使用过,这次正好要做个招聘页面,得以利用一下这个库,在经常会卡顿的UC浏览器中也能流畅执行. 扫描下面的二维码,可以看到在线的d ...

随机推荐

  1. JS数字金额大写转换

    /** 数字金额大写转换(可以处理整数,小数,负数) */ var digitUppercase = function(n) { var fraction = ['角', '分']; var digi ...

  2. WebService 使用wsdl.exe生成代理类

    利用wsdl.exe生成webservice代理类: 根据提供的wsdl生成webservice代理类 1.开始->程序->Visual Studio 2005 命令提示 2.输入如下红色 ...

  3. Built-in functions

    转自::http://blog.csdn.net/luyuncheng/article/details/11674123   — Built-in Function: int __builtin_ff ...

  4. SQLite高级:一库建多表,封装类

    package eoe.database; import android.content.Context; import android.database.sqlite.SQLiteDatabase; ...

  5. Struts2的那些小细节

    1.result中传多个参数,&不允许使用需要转义&即多个参数之间用&隔开 <result type="redirectAction">show ...

  6. UVa 10400 - Game Show Math

    题目大意:给出n(n<100)个正整数和一个目标数,按照给出数的顺序,运用+.-.*./四则运算(不考虑优先级),判断能否得出所要的结果. 首先考虑的就是暴力枚举,不过时间复杂度为O(4n),会 ...

  7. 【蓝牙数据采集模块】-02-Sensor Controller 编写CC2650STK外设驱动

    上次说到把所有的传感器模块在Sensor Controller中实现读写,并封装驱动. 先来看一下CC2650STK的原理图 用红色方框标记的DIO_0~DIO_7, DIO_23~DIO_30是可以 ...

  8. iOS 开发新版 动态库framework

    0. 参考 http://www.cocoachina.com/industry/20140613/8810.html framework+xib参考 : http://blog.csdn.net/x ...

  9. BZOJ2733 永无乡【splay启发式合并】

    本文版权归ljh2000和博客园共有,欢迎转载,但须保留此声明,并给出原文链接,谢谢合作. 本文作者:ljh2000 作者博客:http://www.cnblogs.com/ljh2000-jump/ ...

  10. spring mvc 注解示例

    springmvc.xml <?xml version="1.0" encoding="UTF-8"?> <beans xmlns=" ...