详细记录一下transition
[title]Transition的属性[/title]
1. transition-property：需要参与过渡的属性，例如：width、height、background...
2.transition-duration：过渡动画的持续时间，单位秒s或毫秒ms
3.transition-delay：延迟过渡的时间，单位秒s或毫秒ms
4.transition-timing-function：动画过渡的动画类型
[title]Transition的简单例子[/title]
div{
width:100px;
height:100px;
background:blue;
transition-property: width;/* 需要参与过渡的属性 */
transition-duration: 1s;/* 过渡动画的持续时间 */
transition-delay: 1s;/* 延迟过渡的时间，单位秒s或毫秒ms */
transition-timing-function: ease-out;/* 动画过渡的动画类型 */
/*也可写为：transition:width 1s 1s ease-out ;
需过度的属性 过度持续时间 过度延迟时间 动画运动类型 */
}
div:hover{
width:300px;
}
[title]拓展使用[/title]
通常情况下，与hover（鼠标悬停）一起搭配让一些元素在变化时产生动画效果：
div{
width:100px;
height:500px;
background:teal;
/* 而且我还能多个属性逐个显示过渡动画效果哦~~*/
transition:width .5s linear,height .5s ease .5s,background 1s ease-in 1s;
/* 宽 0.5s linear
高 0.5s ease
背景 1s ease-in
*/
}
/* 鼠标悬停，改变div的样式 */
div:hover{
width:500px;
height:100px;
background:hotpink;
}
这里就是应用过渡动画实现的效果
多个属性是依次执行动画效果的，其实就是巧妙应用了过渡延迟属性，
让上一个属性执行完了再接着下面一个
[title]Transition-timing-function[/title]
transition-timing-function是动画运动的曲线，它一共有6个值。
ease- 指定一个缓慢开始，然后快速，然后慢慢结束的过渡效果(这是默认值)linear- 指定从开始到结束以相同速度的转换效果ease-in- 指定缓慢启动的过渡效果ease-out- 指定一个缓慢结束的过渡效果ease-in-out- 指定开始和结束缓慢的过渡效果cubic-bezier(n,n,n,n)- 在一个三次贝塞尔函数中定义您自己的值
#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}
[title]综合应用[/title]
<style type="text/css">
ul {
list-style: none;
width: 600px;
height: 60px;
background: skyblue;
padding: 0;
}
li {
float: left; /* 参照物 */
position: relative;
}
a {
display: block;
width: 150px;
height: 60px;
line-height: 60px;
text-align: center;
color: #333;
text-decoration: none; /* 提升层级，解决被span遮住 */
position: relative;
z-index: 1;
}
span {
position: absolute;
bottom: 0;
width: 150px;
height: 4px;
background: pink; /* 过渡 */
transition: height 0.5s linear;
}
li:hover span {
height: 60px;
}
</style>
</head>
<body>
<ul>
<li>
<a href="">首页</a>
<span></span>
</li>
<li>
<a href="">首页</a>
<span></span>
</li>
<li>
<a href="">首页</a>
<span></span>
</li>
<li>
<a href="">首页</a>
<span></span>
</li>
</ul>
</body>
