【transition-duration】

是一个css3属性，规定完成过度效果需要花费的时间（一秒或毫秒计）。
语法：transition-duration: time;
time ：    规定完成过渡效果需要花费的时间（以秒或毫秒计）。 默认值是 0，意味着不会有效果。

该属性其实是transition属性的一个子属性，下面总结一下css3中的transition属性：
【transition】

用于在一定的时间内平滑的过度，这种效果可以在鼠标单击，获取焦点，被点击或对元素任何改变中触发，并圆滑的以动画效果改变CSS属性的属性值。

从定义可以知道transition是一个用于动画过度的属性，然而transiton属性只不过是一个简写属性，用于设置四个过度属性，这

四个过度属性分别是:

transition-property (执行变换的属性 )

transition-duration (变换延续时间)

transition-timing-function  (延续时间内，变换速率的变化)

transition-delay  (变换延迟时间)

下面来分别介绍一下各个属性

transition-property 即用来指定当元素其中一个属性改变是执行transition效果

值:none(没有属性改变)，all(所有属性都改变)或指定某一元素(比如color，background等属性)。

transition-duration 是动画执行的时间，单位(s)比如"0.1s"也可以写成".1s"，它可以作用于任何元素，包括before和after伪元素。

transition-timing-function 动画的执行方式

值:ease(逐渐慢下来)，linear(匀速)，ease-in(由慢到快)，ease-out(由快到慢)，ease-in-out(先慢到快再到慢)，cubic-bezier(该值允许你去自定义一个时间曲线)。

transition-delay 动画延时时间基本用法与duration相同。

语法:

transition: <transition> [, <transition>]*

<transition> = <transition-property> <transition-duration> <transition-timing-function> <transition-delay>

这种写法是比较简单的写法，我们也可以同时写多个Transition效果，每个效果按照固定属性的顺序书写如图。

实例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-

transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style>

.fk{

position:absolute;

left:0;

background:#00F;

width:50px;

height:50px;

}

.fk:hover{

position:absolute;

left:500px;

background:#F00;

}

.fk,fk:hover{

transition:background-color 3s ease,left 3s ease-in-out;

}

</style>

</head>

<body>

<div class="fk">

<div>

</body>

</html>

该效果将以一个方块从左向右移动并改变颜色

【opacity属性】

也是一个css3属性，该属性用于设置元素的不透明度级别，所有的浏览器都支持这个属性。
语法：opacity: value|inherit;
参数说明：
value ：规定不透明度。从 0.0 （完全透明）到 1.0（完全不透明）。
inherit：应该从父元素继承 opacity 属性的值。
例如设置一个图像的透明度：

img

{

opacity:0.4;

filter:alpha(opacity=40); /* 针对 IE8 以及更早的版本 */

}

img:hover

{

opacity:1.0;

filter:alpha(opacity=100); /* 针对 IE8 以及更早的版本 */

}

IE9, Firefox, Chrome, Opera 和 Safari 使用属性 opacity 来设定透明度。opacity 属性能够设置的值从 0.0 到 1.0。值越小

，越透明。

IE8 以及更早的版本使用滤镜 filter:alpha(opacity=x)。x 能够取的值从 0 到 100。值越小，越透明。

css3——transition属性和opacity属性的更多相关文章

  1. CSS3中和动画有关的属性transform、transition 和 animation

    CSS3中和动画有关的属性有三个  transform. transition 和 animation.下面来一一说明:        transform     从字面来看transform的释义为 ...

  2. CSS3 transition 属性过渡效果 详解

    CSS3 transition 允许 CSS 元素的属性值在一定的时间区间内平滑地过渡.我们可以在不使用 Flash 动画或 JavaScript 的情况下,在元素从一种样式变换为另一种样式时为元素添 ...

  3. css3 transition属性

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

  4. CSS3 transition 属性

    transition是css3中新添加的特性,在W3C标准中是这样描述的:“css的transition允许css的属性值在一定的时间内从一个状态平滑的过渡到另一个状态.这种状态可以在鼠标单击.获得焦 ...

  5. CSS3与动画有关的属性transition、animation、transform对比

    最近应公司需求,需要用css3做动画,终于把以前一直傻傻分不清楚的三个属性理解了. 索性在这里进行一个简单的对比,加深自己的记忆. 浏览器兼容性 CSS3 transform 属性 Internet ...

  6. CSS3新增的选择器和属性

    <!doctype html>无标题文档 一.新增的选择器 CSS3新增的属性选择器 {除ie6外的大部分浏览器支持) 序号 选择器 含义 实例 1 E[att^="val&qu ...

  7. CSS3中transform几个属性值的注意点

    transform(变形)是CSS3中的元素的属性,transform的属性值主要包括旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix 基本用法可以参考文 ...

  8. CSS3 animation（动画） 属性

    一.animation 1.CSS3 animation(动画) 属性 语法: animation: name duration timing-function delay iteration-cou ...

  9. css3新增属性有哪些？css3中常用的新增属性总结

    css3新增属性有哪些?来提问这个问题的人都应该知道css3是css的升级版本,那么,css3既然是升级版本,自然是会新增一些属性,接下来本篇文章将给大家介绍关于css3中常用的新增属性. 一.css ...

随机推荐

  1. 搭建Spring所需的各类jar包汇总详解

    Spring jar包官网下载地址:http://repo.spring.io/release/org/springframework/spring/ Spring jar包的描述:针对3.2.2以上 ...

  2. 阿里云免费SSL证书申请及配置过程centos7,Nginx

    1:进入购买,等待审核,审核通过后下在一个压缩包 ,里面包含两个文件一个 214979907780888.key 一个214979907780888.pem (如果不在阿里买,也可以在其它平台买,或者 ...

  3. Oracle 11g Enhancements in AWR Baselines

    Enhancements in AWR Baselines A baseline is any set of snapshots taken over a period of time. The sn ...

  4. 判断数A和数B中有多少个位不相同

    1. A & B,得到的结果C中的1的位表明了A和B中相同的位都是1的位:2. A | B, 得到的结果D中的1的位表明了A和B在该位至少有一个为1的位,包含了A 与 B 都是1的位数,经过前 ...

  5. 鸟哥的Linux私房菜-第一部分-第2章Linux如何学习

    第2章 Linux如何学习 Linux可以干什么 企业级:网络服务器.金融数据库.大型企业网管环境.高性能计算.集群 个人:桌面计算机.手机.PDA(掌上电脑,这个电脑的意义十分广泛,在不同的场景下有 ...

  6. 面向对象编程——super进阶（十）

    一.入门使用 在python中,使用super最常见的让子类继承父类.在这种情况下,当前类和对象可以作为super函数的参数使用,调用函数返回的任何方法都是调用超类的方法,而不是当前类的方法. cla ...

  7. Loadrunder之脚本篇——参数化同行取值

    select next row 记录选择方式 Same line as,这个选项只有当参数多余一个时才会出现,其作用是根据某一个参数的行号取同一行. 例中的做法如下: 将多个参数存放在一个参数文件中: ...

  8. SqlHelper简单实现（通过Expression和反射）3.实体，数据传输对象（DTO）Helper类设计

    EntityHelper的主要功能有: 1.通过反射获取DTO的字段,主要提供给在需要从Entity获取数据后,填充给DTO并返回的作用: 通过反射获取PropertyInfo[]对象,然后取出Nam ...

  9. P4501 [ZJOI2018]胖

    题目 P4501 [ZJOI2018]胖 官方口中的送分题 做法 我们通过手玩(脑补),\(a_i\)所作的贡献(能更新的点)为:在\(a_i\)更新\(\forall x\)更新前前没有其他点能把\ ...

  10. bowtie2用法

    bowtie2的功能:短序列的比对 用法:bowtie2 [options]* -x <bt2-idx> {-1 <m1> -2 <m2> | -U <r&g ...