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。值越小，越透明。
css3——transition属性和opacity属性的更多相关文章
- CSS3中和动画有关的属性transform、transition 和 animation
CSS3中和动画有关的属性有三个 transform. transition 和 animation.下面来一一说明: transform 从字面来看transform的释义为 ...
- CSS3 transition 属性过渡效果 详解
CSS3 transition 允许 CSS 元素的属性值在一定的时间区间内平滑地过渡.我们可以在不使用 Flash 动画或 JavaScript 的情况下,在元素从一种样式变换为另一种样式时为元素添 ...
- css3 transition属性
最近打算学习css3知识,觉得css3写出来的效果好炫好酷,之前一直想要学习来着.可能之前的决心,毅力,耐心不够,所以想要重整起来,放下浮躁的心态,一步一个脚印,踏踏实实的来学习. 首先学习的是css ...
- CSS3 transition 属性
transition是css3中新添加的特性,在W3C标准中是这样描述的:“css的transition允许css的属性值在一定的时间内从一个状态平滑的过渡到另一个状态.这种状态可以在鼠标单击.获得焦 ...
- CSS3与动画有关的属性transition、animation、transform对比
最近应公司需求,需要用css3做动画,终于把以前一直傻傻分不清楚的三个属性理解了. 索性在这里进行一个简单的对比,加深自己的记忆. 浏览器兼容性 CSS3 transform 属性 Internet ...
- CSS3新增的选择器和属性
<!doctype html>无标题文档 一.新增的选择器 CSS3新增的属性选择器 {除ie6外的大部分浏览器支持) 序号 选择器 含义 实例 1 E[att^="val&qu ...
- CSS3中transform几个属性值的注意点
transform(变形)是CSS3中的元素的属性,transform的属性值主要包括旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix 基本用法可以参考文 ...
- CSS3 animation（动画） 属性
一.animation 1.CSS3 animation(动画) 属性 语法: animation: name duration timing-function delay iteration-cou ...
- css3新增属性有哪些？css3中常用的新增属性总结
css3新增属性有哪些?来提问这个问题的人都应该知道css3是css的升级版本,那么,css3既然是升级版本,自然是会新增一些属性,接下来本篇文章将给大家介绍关于css3中常用的新增属性. 一.css ...
随机推荐
- win8内置管理员账号既能使用metro应用又能使用默认共享
一.内置管理员账号打开METRO应用 1.按WIN+R 弹出运行框. 2.输入gpedit.msc点确定,打开本地组策略编辑器. 3.逐级选择“计算机配置”,“Windows 设置”,“安全设置”,“ ...
- [转】[tip] localhost vs. (local) in SQL Server connection strings
主要区别在于连接协议不同,前者(localhost)使用TCP协议,后者("(local)")使用NamedPipe协议. Sample code with SQL Server ...
- python基础知识回顾[1]
1.声明变量 # 声明一个变量name用来存储一个字符串'apollo' name = 'apollo' # 声明一个变量age用来存储一个数字20 age = 20 # 在控制台打印变量name中存 ...
- Jetty VS Tomcat
Tomcat 经过长时间的发展,它已经广泛的被市场接受和认可,尤其在企业级应用方面,Tomcat 仍然是第一选择.但是随着 Jetty 的发展,Jetty 的市场份 额也在不断提高. 1.架构 Jet ...
- ABAP锁，数据库锁
原文出自 江正军 技术博客,博客链接:www.cnblogs.com/jiangzhengjun ABAP数据锁定 SM12锁查看与维护 通用加锁与解锁函数 ABAP程序锁定 数据库锁 锁的分类和兼容 ...
- Linux 使用pppd和ppp程序进行3G/4G拨号
试验环境:Linux marsboard 3.4.90 #9 SMP PREEMPT Thu Mar 3 18:28:43 CST 2016 armv7l armv7l armv7l GNU/Linu ...
- 阿里云centos+java环境搭建
目录 .准备 .安装jdk .安装tomcat .安装mysql 1.准备 购买阿里云服务器,我买的是Centos 6.5. 因为是linux,在window下管理我使用XManager,这个软件可以 ...
- notepad++运行python代码
notepad++运行代码 在菜单栏中点击运行或按F5,在弹出的对话框中输入下面命令 cmd /k E:\py3.6\python.exe "$(FULL_CURRENT_PATH)&quo ...
- Hexo 使用中搭建博客过程中遇到的坑
本地执行hexo s 时报错: WARN No layout: index.html 原因:theme 没有下载下来,经查,theme文件夹下为空. 新建文章后,执行 hexo g 时报如下错误: ( ...
- mysql case的语法
测试表:team 第一种语法: CASE case_value WHEN when_value THEN statement_list [WHEN when_value THEN statement_ ...