前端复习Day12 过渡transition

二、过渡transition

CSS3中，我们为了添加某种效果可以从一种样式转变到另一个的时候，无需使用Flash动画或JavaScript，即：过渡；
过渡属性：transition：四个属性值； 需要加前缀：-webkit-, -ms- 或 -moz- 支持；
transition-property 规定应用过渡的 CSS 属性的名称。
transition-duration 定义过渡效果花费的时间。默认是 0。
transition-timing-function 规定过渡效果的时间曲线。默认是 “ease”。

transition-delay 规定过渡效果何时开始（延时时间）。默认是 0。

属性值解析：

transition-property ：

none / all / property
none 没有要过渡的效果
all 所有效果都过渡
property 要过渡的效果名称

transition-duration：

time值 ; 过渡效果花费的时间

transition-timing-function ：

linear 匀速过渡
ease 先慢速开始然后变快，再慢速结束
ease-in 以慢速开始
ease-out 以慢速结束
ease-in-out 以慢速开始和结束的过渡

简写：

transition:all/css属性名称 运动时间s/ms 延迟时间s/ms 动画类型

注释：CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。要实现这一点，必须规定两项内容：

1.规定把效果添加到哪个 CSS 属性上
2.规定效果的时长
Internet Explorer 10、Firefox、Chrome 以及 Opera 支持 transition 属性。
Safari 需要前缀 -webkit-。
Internet Explorer 9 以及更早的版本，不支持 transition 属性。 Chrome 25 以及更早的版本，需要前缀 -webkit-。

当鼠标光标移动到该元素时，它逐渐改变它原有样式

宽度的过渡案例：（当鼠标划上时宽度由小逐渐变大）

div{
				width:100px;
				height:100px;
				background:red;
				transition:width 2s;
				-webkit-transition:width 2s; 
			}
			
			div:hover{
				width:300px;
			}
<div></div>

多属性过渡

div{
			    width: 300px;
			    height: 300px;
			    background: #fdff1f;
			    border: #ffae28 solid 3px;
			    margin: 100px auto;
			    transition: all 0.5s;
			}
			div:hover{
			    width: 500px;
			    height: 400px;
			    border-radius: 15px;
			    background: #ff67c2;
			}
<div></div>