链接：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. git init github

    Command line instructions 执行这些命令是在windows 右菜单里面的git bash运行. Git global setup git config --global use ...

  2. js jquery css 选择器总结

    js jquery css 选择器总结 一.原始JS(Document 对象)选择器. id选择器:document.getElementById("test"); name选择器 ...

  3. 第六篇 - bs4爬取校花网

    环境:python3  pycharm 模块:requests  bs4  urlretrieve  os  time 第一步:获取网页源代码 import requests from bs4 imp ...

  4. 【非专业前端】Vue UI 之 建立Vuetify工程

    先建立一个工程[Webpack] .. ..建立好之后,进入目录,添加vuetify插件 cd vuetify-demo vue add vuetify[会出错] npm install vuetif ...

  5. poj 3273"Monthly Expense"(二分搜索+最小化最大值)

    传送门 https://www.cnblogs.com/violet-acmer/p/9793209.html 题意: 有 N 天,第 i 天会有 a[ i ] 的花费: 将这 N 天分成 M 份,每 ...

  6. Codeforces Round #518 (Div. 2) B LCM

    传送门 https://www.cnblogs.com/violet-acmer/p/10163375.html 题解: 这道题有点意思,有点数学的味道. 根据定义“[a,b] / a”可得这求得是l ...

  7. UI自动化学习路线

    1.web自动化 1.前端技术介绍 参考网址:http://www.w3school.com.cn/xml/xml_xsl.asp html /html5 js/jquery xml/xpath 参考 ...

  8. PHP-FIG - PHP 标准规范

    转自:https://psr.phphub.org/ PHP 标准规范 PSR 是 PHP Standard Recommendations 的简写,由 PHP FIG 组织制定的 PHP 规范,是 ...

  9. Elastic Stack之Logstash进阶

    Elastic Stack之Logstash进阶 作者:尹正杰  版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.使用GeoLite2和logstash 过滤插件的geoip案例 1>. ...

  10. Java Web之验证码

    今天来模拟一下验证码,我们需要三个文件,两个Servlet,一个jsp 直接贴代码吧 RandomCodeServlet:主要负责生产验证码 package com.vae.RandomCode; i ...