链接：https://www.cnblogs.com/yehui-mmd/p/5934157.html

css3——transition属性和opacity属性

 

【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。值越小，越透明。

transition的属性变化的更多相关文章

  1. css3 transition属性变化与animation动画的相似性以及不同点

    下面列子中的2个图片的效果. http://zqtest.e-horse.cn/DongXueImportedCar/assets/mouseOverAnimate.html 第一个为transiti ...

  2. CSS Transform / Transition / Animation 属性的区别

    back21 Jun 2011 Category: tech Tags: css 最近想UI的动画转到css3能吃进3d加速的属性上面来以加强动画的连贯性.只是对于css几个新加的属性不太熟悉,常常容 ...

  3. bootstrap-select js jQuery控制select属性变化

    bootstrap-select我想大家都不陌生是一个前端下拉框的插件非常好用,在select的标签中设置属性可以做很多功能控制,不过初始化之后怎么去修改网上找遍中文英文也没有一个交代自己研究好久研究 ...

  4. disconf-自动注入属性变化

    disconf-自动注入属性变化 disconf官网:http://disconf.readthedocs.io/zh_CN/latest/ 自动注入属性:http://disconf.readthe ...

  5. Listener 监听对象的属性变化

    Listener用于监听Session.context.Request的属性变化,接口名称格式为xxxAttributeListener,包括HttpSessionAttributeListener. ...

  6. Object.defineProperty 监听对象属性变化

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

  7. 009——VUE中watch监听属性变化实现类百度搜索栏功能

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. 在TreeView 控件上，如果双击任何一个节点的checkbox 只会收到一次After_Check事件 但是check属性变化两次（从false到true 再从true到false)，请问该如何解决，谢谢！

    在TreeView 控件上,如果双击任何一个节点的checkbox 只会收到一次After_Check事件 但是check属性变化两次(从false到true 再从true到false),请问该如何解 ...

  9. WPF Label控件在数据绑定Content属性变化触发TargetUpdated事件简单实现类似TextChanged 事件效果

    原文:WPF Label控件在数据绑定Content属性变化触发TargetUpdated事件简单实现类似TextChanged 事件效果   本以为Label也有TextChanged 事件,但在使 ...

随机推荐

  1. 用go语言实现线程池

    代码放在 https://github.com/bigben0123/workerPool 安装完go软件后.执行目录中的install.cmd即可.

  2. HTML5新特性：FileReader 和 FormData

    连接在这里: HTML5新特性:FileReader 和 FormData

  3. 使用T4模板动态生成邮件内容并储存到任意位置

    一.基础概念介绍 T4模板是扩展名为 .tt 的文本文件. 他分为设计时模板 和运行时模板.主要区别在于在vs中右键点击文件,打开“属性”,在“自定义工具”一栏中的值分别如下: 设计时模板: Text ...

  4. github在网页编写readme之后的操作

    study from : https://jingyan.baidu.com/article/f3e34a12a25bc8f5ea65354a.html

  5. Html的简单学习笔记

    1.Html简介 1)什么是html: HyperText Markup Language:超文本标记语言,网页语言. >超文本:超出文本范围. >标记: html中所有的操作都是使用标记 ...

  6. ElasticSearch6.3.2------查询

    进入Kibana的控制台:http://localhost:5601/app/kibana#/dev_tools/ 先放一些测试数据进去,不想一条一条,就用bulk 注意格式 正确格式: 解释:ES期 ...

  7. collections和collection 还有集合

    概述 一个集合,即collection,有时也被称为一个容器,是将多个元素聚集成一个单元的对象.Collections常被用来存储.检索.操纵聚集数据以及聚集数据间的通信.一般来说,Collectio ...

  8. gulp入门指南

    1. 全局安装 gulp: $ npm install --global gulp 2. 作为项目的开发依赖(devDependencies)安装: $ npm install --save-dev ...

  9. django模版之过滤器

    过滤器,变量的显示形式的改变 一.形式:小写 {{ name | lower }} 二.串联:先转义文本到HTML,再转换每行到 <p> 标签 {{ my_text|escape|line ...

  10. 利用jieba,word2vec,LR进行搜狐新闻文本分类

    一.简介 1)jieba 中文叫做结巴,是一款中文分词工具,https://github.com/fxsjy/jieba 2)word2vec 单词向量化工具,https://radimrehurek ...