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伪元素。
js控制css3动画触发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" "/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html xmlns="/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。值越⼩，越透明。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。