一、animation有哪些屬性值
animation-name 規則名稱
animation-duration 動畫時間
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
二、transition有哪些屬性:
transition-property 對哪個屬性設置過渡
transition-duration 過渡周期
transition-timing-function速度曲線
transition-delay 延遲時間
合寫
transition: property duration timing-function delay;
設置多個屬性用逗號
transition: width .2s linear .3s , height .2s linear .3s;
速度曲線有哪些
linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n)
linear：規定以相同速度開始至結束的過渡效果(等於cubic-bezier(0,0,1,1)
ease:慢速開始然后變快然后慢速結束
ease-in:慢速開始
ease-out:慢速結束
ease-in-out:慢速開始，慢速結束
cubic-bezier:自定義數值 可能的值在0到1之間 可以用瀏覽器調節速度曲線
怎么用transition實現一個hover按鈕 環繞border效果：
原理：看見的都是假象
用兩個div
其中一個設置border-bottom-color和border-left-color
另一個設置border-top-color和border-right-color
讓寬高從零開始過渡 再設置過渡的時間延遲
搗鼓一下 時間差
代碼：
/*按鈕、輸入框 環繞邊框 動畫效果*/
.test{
position: relative;
width: 100px;
height: 100px;
margin-left: 400px;
border: 1px solid red;
}
.test:before {
content: '';
display: block;
position: absolute;
box-sizing: border-box;
border: 1px solid transparent;
width: 0;
height: 0;
bottom: 0;
right: 0;
-webkit-transition: border-color 0s ease-in 0.4s,width 0.2s ease-in 0.2s,height 0.2s ease-in;
transition: border-color 0s ease-in 0.4s,width 0.2s ease-in 0.2s,height 0.2s ease-in;
}
/*hover和未hover都設置transition才能實現鼠標移出時有個原路返回的效果*/
.test:hover:before {
width: 100%;
height: 100%;
border-bottom-color: #367dff;
border-left-color: #367dff;
-webkit-transition: border-color 0s ease-out 0.4s,width 0.2s ease-out 0.4s,height 0.2s ease-out 0.6s;
transition: border-color 0s ease-out 0.4s,width 0.2s ease-out 0.4s,height 0.2s ease-out 0.6s;
}
.test:after {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
border: 1px solid transparent;
width: 0;
height: 0;
-webkit-transition: border-color 0s ease-in 0.8s,width 0.2s ease-in 0.6s,height 0.2s ease-in 0.4s;
transition: border-color 0s ease-in 0.8s,width 0.2s ease-in 0.6s,height 0.2s ease-in 0.4s;
}
.test:hover:after {
width: 100%;
height: 100%;
border-top-color: #367dff;
border-right-color: #367dff;
-webkit-transition: width 0.2s ease-out,height 0.2s ease-out 0.2s;
transition: width 0.2s ease-out,height 0.2s ease-out 0.2s;
}