链接：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. CodeFroces--Joseph’s Problem

    题目意思:给出n k 求  k%1 + k%2 +k%3+...+k%n 的和 利用分块的思想 我们知道 k%i ==k-k/i*i 同时 一段连续的区间的 k/i 是相等的 #include< ...

  2. Go 语言和 Scala 语言对比

    我在Google写过Go(自己的业余时间),也在LinkedIn写过Scala.两者都是具有一流的并发特性的现代语言. 下面的回答是基于我编写大规模的软件的经验得出. Go是一种开发模式严格固定,并且 ...

  3. Django 创建超级用户

    Django自带的后台管理是Django明显特色之一,可以让我们快速便捷管理数据.后台管理可以在各个app的admin.py文件中进行控制 #创建超级用户 python manage.py creat ...

  4. 每添加一张图片后，GDI对象 + 3 原因: ImageList_AddIcon(hIcon) 后没调用 DestroyIcon(hIcon)

    今天无意间在[任务管理器]中发现,每添加1张图片后,应用程序的 GDI对象 + 3,添加图片后,再把所有图片删除, GDI对象数量没减少! 排查原因,发现: GDI对象 + 3 的代码是: int o ...

  5. 一文看懂npm、yarn、pnpm之间的区别

    文作者对比了当前主流的包管理工具npm.yarn.pnpm之间的区别,并提出了合适的使用建议,以下为译文: NPM npm是Node.js能够如此成功的主要原因之一.npm团队做了很多的工作,以确保n ...

  6. springmvc 学习笔记

    @Autowired,@RequestMapping,@RequestParam 使用该注解,引入对象时, 可以省略setter getter.减少代码显示. @AutowiredSimService ...

  7. Unity 摄像机跟随

    方式一:将摄像机直接拖到游戏对象的下面: 方式二:脚本实现 using System.Collections; using System.Collections.Generic; using Unit ...

  8. HTML学习笔记Day7

    一.position定位属性,检索对象的定位方式 1.语法:{position:static(无特殊定位)/absolute(绝对定位)/relative(相对定位)/fixed(固定定位):} 1) ...

  9. python测试断言

    这几天看了一下python的测试,基于函数方法和基于类的测试,主要使用的模块是unittest模块,为特定的方法和类,建立测试模块,测试函数功能是否满足预期.下面是模仿书里面的一个例子. City.p ...

  10. jmeter counter函数问题

    ${__counter(FALSE,)}此函数比较奇怪,放在jsr223前置处理器中引用时不知道为啥,第一个值是2.但是放在其他位置时第一个值是1 真是诡异啊!不知道是不是bug呢 放在标题里引用,t ...