在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. SpringInAction读书笔记--第2章装配Bean

    实现一个业务需要多个组件相互协作,创建组件之间关联关系的传统方法通常会导致结构复杂的代码,这些代码很难被复用和单元测试.在Spring中,对象不需要自己寻找或创建与其所关联的其它对象,Spring容器 ...

  2. bzoj1002:[FJOI2007]轮状病毒

    思路:一道很裸的生成树计数问题,然而要高精度,而且听说直接行列式求值会被卡精度,所以可以模拟行列式求值的过程得到递推公式:f[i]=3*f[i-1]-f[i-2]+2,证明详见vfk博客: http: ...

  3. nodejs的cs模式聊天客户端和服务器实现

    学习完nodejs的基础后,自然要写点东西练练手,以下是一个基于nodejs的cs模式的聊天软件代码: net模块是nodejs的网络编程必定用到的一个模块,对socket通信进行了封装 实现的功能: ...

  4. json,serialze之格式

    <?php echo 'array-json:' . "\n"; $arr = array('key1'=>'value1', 'key2' => 'value2 ...

  5. ASP.NET输入文本框自动提示功能

    在ASP.NET Web开发中会经常用到自动提示功能,比如百度搜索.我们只要输入相应的关键字,就可以自动得到相似搜索关键字的提示,方便我们快速的输入关键字进行查询. 那么在ASP.NET中,如果我们需 ...

  6. Centos7源码安装mysql及读写分离,互为主从

       Linux服务器 -源码安装mysql 及读写分离,互为主从   一.环境介绍: Linux版本: CentOS 7 64位 mysq版本: mysql-5.6.26 这是我安装时所使用的版本, ...

  7. 【InstallShield】 为什么卸载后有的文件没有删掉

    1.Component的属性Permanent设置为Yes. 2.Component的ID为空. 3.Component被其他应用程序或者Feature使用. 4.设置了一个Condition,在安装 ...

  8. 测试MySQL事务管理

    1.MySQL 版本 mysql> select version(); +------------+ | version() | +------------+ -log | +--------- ...

  9. Grails默认首页的修改

    有些人使用IDEA开发Grails,开发阶段使用Grails自带的默认首页可以方便我们开发,但是开发结束后想要修改默认的首页,如何修改呢? 1.打开grails-app 文件下conf下的UrlMap ...

  10. 【深度学习系列3】 Mariana CNN并行框架与图像识别

    [深度学习系列3] Mariana CNN并行框架与图像识别 本文是腾讯深度学习系列文章的第三篇,聚焦于腾讯深度学习平台Mariana中深度卷积神经网络Deep CNNs的多GPU模型并行和数据并行框 ...