链接：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. 汇编 gdb调试

    as -g --32 -o hello.o hello.s ld -m elf_i386 -o hello hello.o gdb hello

  2. CAS (多线程保证原子性)

    面试必问的CAS,你懂了吗? 置顶 2018年03月14日 22:29:19 程序员囧辉 阅读数:29612   版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csd ...

  3. spring cron表达式(定时器)

    转: spring cron表达式(定时器) 写定时器时用到,记录一下: Cron表达式是一个字符串,字符串以5或6个空格隔开,分开工6或7个域,每一个域代表一个含义,Cron有如下两种语法 格式:  ...

  4. C语言进阶——Day 1

    C语言提高笔记 Day 1 小数据赋给大变量,首位是1则在前面自动补充1,首位是0则在前方自动补充0. 大数据赋给小变量,低位字节对齐,truncate截断,有可能会造成数据丢失. 程序和进程的差别: ...

  5. 不通过百川打开淘宝app

    private void openTaobao(String url){ if (isAppInstalled(this, "com.taobao.taobao")) { //这行 ...

  6. springcloud实战案例苏宁和海信

    http://springcloud.cn/view/341 为什么springlcoud不选用zookeeper: http://www.infoq.com/cn/articles/why-does ...

  7. （set stringstream）单词数 hdu2072

    单词数 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Submis ...

  8. node(基础三)_模块系统基础

      一.前言                                                                                         这篇文章主 ...

  9. 跨域、curl、snoopy、file_get_contents()

    定义:可以称为”信息采集/模拟登录”技术,可以实现对某个地址做请求,同时按照要求传递get或post参数. curl本身是php的一个扩展,同时也是一个利用URL语法规定来传输文件和数据的工具,支持很 ...

  10. 递归思维判断数组a[N]是否为一个递增数组

    递归的方法:记录当前最大的,并且判断当前的是否比这个还大,大则继续,否则返回false结束: bool fun( int a[], int n ) { ) { return true; } ) { ] ...