transition属性可直译为“过渡”,主要用于检索或设置对象变换的过渡。

语法:

transition:property duration [timing-function] [delay];

timing-function可以省略,其默认值为ease;

delay可以省略,其默认值为0;

transition属性是一个简写属性,用于设置四个过渡属性:

transition-property 过渡属性

transition-duration 过渡持续时间

transition-timing-function 过渡选择函数

transition-delay 过渡延迟

transiton-timing-function

检索或设置对象中过渡的动画类型

语法:

transition-timing-function:ease | linear | ease-in |ease-out |ease-in-out |step-start |step-end |steps([,[start | end]?]) |cubic-bezier(,,,);

参数说明:

——linear:线性过渡,等同于贝塞尔曲线(0.0,0.0,1.0,1.0)

——ease:平滑过渡,等同于贝塞尔曲线(0.25,0.1,0.25,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)

——step-start:等同于steps(1,start)

——step-end:等同于steps(1,end)

——steps([,[start | end]?]):接受两个参数的步进函数。

第一个参数:必需为正整数,指定函数。

第二个参数:可选,默认值是end。取值可以是start或end,指定每一步的值发生变化的时间点。

transition-delay

检索或设置对象延迟过渡的时间。

语法:

——transition-delay:time;

参数说明:

——指定秒或毫秒数之前要等待切换效果开始

CSS3之transition属性的更多相关文章

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

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

  2. CSS3 : transition 属性

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

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

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

  4. css3中transition属性详解

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

  5. css3的transition属性的使用

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

  6. css3动画属性中的transition属性

    一.语法 transition: property duration timing-function delay; 值 描述 transition-property 规定设置过渡效果的 CSS 属性的 ...

  7. CSS3之transition&transform

    参考网页: CSS3 transform 属性使用详解: http://www.renniaofei.com/code/css3-transform-shuxing-shiyong-xiangjie/ ...

  8. 跟我学习css3之transition

    HTML5和css3已经是将来的发展趋势,现在有很多移动端还有一些游戏公司已然使用它们开 发了比较成功的产品.我在2011年的时候也跟着技术潮流初浅的学习了html5+css3.毕竟那 时候我没有把学 ...

  9. css3 transition属性

    最近打算学习css3知识,觉得css3写出来的效果好炫好酷,之前一直想要学习来着.可能之前的决心,毅力,耐心不够,所以想要重整起来,放下浮躁的心态,一步一个脚印,踏踏实实的来学习. 首先学习的是css ...

随机推荐

  1. day25 Pyhton学习 MD5加密.日志

    一.MD5加密 MD5是一种不可逆的加密算法. 它是可靠的. 并且安全的. 在python中我们不需要手写这一套算法. 只需要引入一个叫hashlib的模块就能搞定MD5的加密工作 import ha ...

  2. python程序整理(1)

    ''' 用户登录验证 要求: 1. 系统⾃动⽣成4位随机数. 作为登录验证码. 直接用就好. 这里不用纠结 提示. 生成随机数的办法. from random import randint num = ...

  3. centos初步配置

    设置PS1 编辑sudo vi /etc/profile,PS1的值用于控制主提示符格式,含义如下 参数 描述 /d 代表日期,格式为weekday month date,例如:"Mon A ...

  4. 习题3-2 分子量(Molar Mass, ACM/ICPC Seoul 2007, UVa1586)

    #include<stdio.h> #include<string.h> #include<ctype.h> double getweight(char x) { ...

  5. 【Flutter 混合开发】嵌入原生View-iOS

    Flutter 混合开发系列 包含如下: 嵌入原生View-Android 嵌入原生View-iOS 与原生通信-MethodChannel 与原生通信-BasicMessageChannel 与原生 ...

  6. centos下安装mongodb 通过shell脚本

      #! /bin/bash yum -y update echo -e "开始安装mongodb\n" download_url=https://fastdl.mongodb.o ...

  7. shell脚本在后台运行以及日志重定向输出

    后台运行命令 在命令行后加上 &,表示进程到后台中执行,如:cmd & 日志输出重定向 如:cmd > out.log & Linux默认定义两个变量:1和2: 1 表示 ...

  8. 通过jQuery来获取DropDownList的Text/Value属性值

    脚本代码: <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript">& ...

  9. Linux运维学习第二周记

    1 梨花淡白柳深青, 2 柳絮飞时花满城. 3 惆怅东栏一株雪, 4 人生看得几清明. 老牛望春满地绿! 第二周直接要起飞了! 仍然是最基础最基础的东西,但也是特别多,的别重要! 第二周学记 1.Li ...

  10. CAS 算法与 Java 原子类

    乐观锁 一般而言,在并发情况下我们必须通过一定的手段来保证数据的准确性,如果没有做好并发控制,就可能导致脏读.幻读和不可重复度等一系列问题.乐观锁是人们为了应付并发问题而提出的一种思想,具体的实现则有 ...