在webapp引用开发中经常会用到css3动画效果,下面我们就一起探讨一下这个属性的使用。

在哪里定义动画效果? 
css3动画一般通过鼠标事件或者说状态定义动画,通常我们可以用CSS中伪类和js中的鼠标事件来定义。js的事件也可以,比如click,focus,mousemove,mouseover,mouseout等等

transition的基本语法: 
css3动画通过transition属性和其他css属性(颜色,宽高,变形,位置等等)配合来实现。 
transition的语法:

  1. transition:[ transition-property ] || [ transition-duration ] || [ transition-timing-function ] || [ transition-delay ]

当然这是简写,我们也可以完整的写:

  1. transition-property : none | all | [ <IDENT> ] [ ',' <IDENT> ]*;
  2. transition-duration : <time> [, <time>]*
  3. transition-timing-function : ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)]*
  4. transition-delay : <time> [, <time>]*

1.要变化的属性 
transition-property:要变化的属性,比如元素变宽则是width,文字颜色要变色这是color;W3C给出了一个可变换属性的列表:

CSS属性 改变的对象 
background-color 色彩 
background-image 只是渐变 
background-position 百分比,长度 
border-bottom-color 色彩 
border-bottom-width 长度 
border-color 色彩 
border-left-color 色彩 
border-left-width 长度 
border-right-color 色彩 
border-right-width 长度 
border-spacing 长度 
border-top-color 色彩 
border-top-width 长度 
border-width 长度 
bottom 百分比,长度 
color 色彩 
crop 百分比 
font-size 百分比,长度 
font-weight 数字 
grid-* 数量 
height 百分比,长度 
left 百分比,长度 
letter-spacing 长度 
line-height 百分比,长度,数字 
margin-bottom 长度 
margin-left 长度 
margin-right 长度 
margin-top 长度 
max-height 百分比,长度 
max-width 百分比,长度 
min-height 百分比,长度 
min-width 百分比,长度 
opacity 数字 
outline-color 色彩 
outline-offset 整数 
outline-width 长度 
padding-bottom 长度 
padding-left 长度 
padding-right 长度 
padding-top 长度 
right 百分比,长度 
text-indent 百分比,长度 
text-shadow 阴影 
top 百分比,长度 
vertical-align 百分比,长度,关键词 
visibility 可见性 
width 百分比,长度 
word-spacing 百分比,长度 
z-index 正整数 
zoom 数字 
该取值还有个强大的“all”取值,表示上表所有属性; 
除了以上属性外,当然还有css3中大放异彩的css3变形,比如放大缩小,旋转斜切,渐变等等。

2.动画时间 
transition-duration :动画执行的时间,以秒为单位,比如0.1秒可以写成”0.1s”或者”.1s”,注意后面有个“s”单位。

3.动画执行的计算方式 
transition-timing-function :动画执行的计算方式,这里时间函数是令人崩溃的贝塞尔曲线,幸好css3提过了几个取值: 
ease:逐渐慢下来,函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0). 
linear:线性过度,函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0). 
ease-in:由慢到快,函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0). 
ease-out:由快到慢, 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0). 
ease-in-out:由慢到快在到慢, 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0) 
cubic-bezier:特定的cubic-bezier曲线。 (x1, y1, x2, y2)四个值特定于曲线上点P1和点P2。所有值需在[0, 1]区域内,否则无效。

4.动画延迟 
transition-delay:在动作和变换开始之间等待多久,通常用秒来表示(比如, .1s)。如果你不想延迟,该值可省略。 
讲了这么多 我们看一个简单例子:

  1. <ul class="test">
  2. <li>背景色过渡</li>
  3. <li>背景色过渡</li>
  4. <li>背景色过渡</li>
  5. <li>背景色过渡</li>
  6. <li>背景色过渡</li>
  7. </ul>
  8. <style>
  9. .test{}
  10. .test li{background-color:#eee;
  11. -moz-transition:background-color .5s ease-in;
  12. -webkit-transition:background-color .5s ease-in;
  13. -o-transition:background-color .5s ease-in;
  14. -ms-transition:background-color .5s ease-in;
  15. transition:background-color .5s ease-in;}
  16. .test li:nth-child(1):hover{background-color:#bbb;}  //鼠标滑过背景从#eee变#bbb
  17. .test li:nth-child(2):hover{background-color:#999;}  //鼠标滑过背景从#eee变#999
  18. .test li:nth-child(3):hover{background-color:#630;}  //鼠标滑过背景从#eee变#630
  19. .test li:nth-child(4):hover{background-color:#090;}  //鼠标滑过背景从#eee变#090
  20. .test li:nth-child(5):hover{background-color:#f00;}  //鼠标滑过背景从#eee变#f00
  21. </style>

css3动画(transition)属性探讨的更多相关文章

  1. CSS3 : transition 属性

    CSS3的 transition 属性用于状态过度效果! 1.语法: transition: property duration timing-function delay; -moz-transit ...

  2. 使用CSS3的“transition ”属性控制长宽度的缓慢变化

    有时候我们可能会想要改变某个资源信息的长宽度,比如改变某个div的宽度,而且需要让这个宽度缓慢改变,而不是突然就改变了.这时候你可能会想到使用jquery的animate()函数,不过这个方法既得引用 ...

  3. CSS3使用transition属性实现过渡效果

    transition属性目的是让css的一些属性(如background)的以平滑过渡的效果出现.它是一个合并属性,是由以下四个属性组合而成: transition-property:设置应用过渡的C ...

  4. css3动画transition animation

    CSS动画简介  transition   animation transition过渡:css3通过transitions属性引入时间概念,通过开始.结束状态自动计算中间状态,实现状态改变的过渡效果 ...

  5. css3中transition属性详解

    css3中通过transition属性可以实现一些简单的动画过渡效果~ 1.语法 transition: property duration timing-function delay; transi ...

  6. CSS3之transition属性

    transition属性可直译为"过渡",主要用于检索或设置对象变换的过渡. 语法: transition:property duration [timing-function] ...

  7. CSS3动画 transition和animation的用法和区别

    transition和animation都是CSS3新增的特性,使用时需要加内核 浏览器 内核名称 W3C   IE  -ms-  Chrome/Safari -webkit-   Firefoc - ...

  8. 大厂前端带来css3动画transition的使用和介绍全新认识动画

    CSS3中可以使用transition来做最简单动画效果,transition表示到一个元素的属性值发生变化时,我们可以看到页面元素从旧的属性慢慢变化为新的属性值的过程,这种效果不是立即变化的,而是体 ...

  9. css3动画transition详解2

    transition主要包含四个属性值:执行变换的属性:transition-property,变换延续的时间:transition-duration,在延续时间段,变换的速率变化transition ...

  10. css3的transition属性的使用

    transition是将某个属性从一个属性值在指定的时间内平滑过渡到另一个属性值来实现动画效果.这个属性一般搭配:hover来使 下面看一个例子:鼠标放在div上,0.2s后将div元素的背景色用一秒 ...

随机推荐

  1. MySQL二进制文件规范安装

    演示环境介绍 操作系统:CentOS 6.7  (64位) 二进制包:mysql-5.6.30-linux-glibc2.5-x86_64.tar.gz MySQL 下载地址:http://dev.m ...

  2. ubuntu12.10可用更新源

    ubutnu12.10自带的更新源已经失效,国内各大服务器的更新源,无论是网易.搜狐还是教育网的因此也失效了.附件是ubuntu12.10目前的可用更新源. 将地址中的“us.archive”换成“o ...

  3. 解决 IE 不支持 document.getElementsByClassName() 的方法

    //create method getElementsByClassName for document if(!document.getElementsByClassName){ document.g ...

  4. jquery鼠标样式

    浏览器是有自带的鼠标样式的,如果某些时候为了保持鼠标样式的统一,或者想指定特定的鼠标样式该怎么办呢?那就要使用自定义了,下面有个不错的示例,喜欢的朋友可以参考下   1.浏览器自带的鼠标样式:  2. ...

  5. linux 定时执行 cron指令

    linux 中的 cron 定时执行命令,先上例子:每间隙两分钟把 "Hello world"写到 /tmp/hello.txt crontab -e */2 * * * * ec ...

  6. IE专用CSS,最全的CSS hack方式一览

    http://blog.csdn.net/freshlover/article/details/12132801

  7. HTML5-原声拖放

    最早在网页中引入js拖放功能的是IE4,并且只可以拖放图像和某些文本.IE5.5以后网页中的任何元素都可以进行拖放.HTML5以IE为实例制定了拖放规范.FireFox3.5.Safari3+和Chr ...

  8. 一个空格也可以让html格式显示大不相同

    今天在编写html时出现了bug,有两个标签一直贴近显示,但是两段代码完全一样前一段就没有问题. 错误代码如下 <div id="tool1" style="wid ...

  9. 【加密】RSA加密之实现

    private void btn_RSA_Click(object sender, EventArgs e) { //第一种方法调用 this.textBox1.Text = RSAEncrypt(& ...

  10. 2014年度辛星html教程夏季版第六节

    不知道这样大家会不会感觉枯燥,总之不管大家怎么样,辛星始终会陪伴大家的,期待您的关注和支持,也衷心的希望我的博客能让您少走弯路,获得更系统的知识. ***************表格********* ...