transition
簡介
transition: property duration timing-function delay-
transition是一個復(fù)合屬性伺帘，包含了四個過渡屬性
transition-property: css屬性名
transition-duration: 過度時間
transition-timing-function: 漸變函數(shù)值
transition-delay: 延遲時間
寫法
- 默認(rèn)值分別為：all 0 ease 0
transition-property: none |all |property;
值為none時，沒有屬性會獲得過渡效果蓄坏，值為all時企巢，所有屬性都將獲得過渡效果枫慷，值為指定的css屬性應(yīng)用過渡效果，多個屬性用逗號隔開
transition-timing-function：linear| ease| ease-in| ease-out| ease-in-out| cubic-bezier(n,n,n,n);
ease漸快浪规，勻速或听，減慢cubic-bezier(0.25,0.1,0.25,1)
ease-in漸快，勻速cubic-bezier(0.42,0,1,1)
ease-out勻速笋婿，減慢cubic-bezier(0,0,0.58,1)
ease-in-out和ease類似誉裆，但比ease的加速度大（幅度大）cubic-bezier(0.42,0,0.58,1)
linear全程勻速cubic-bezier(0,0,1,1)
例子
- 有一個按鈕,鼠標(biāo)效果為上移50px
<div class="wc-btn">
<button class="dh-btn">動畫效果</button>
</div>
<style>
.dh-btn {
width: 200px;
height: 100px;
background-color: royalblue;
border-radius: 10px;
cursor: pointer;
/* 再原狀態(tài)寫也寫上,可以使鼠標(biāo)離開也有相應(yīng)的過渡效果 */
transition: all 3s linear 0;
-moz-transition:all 3s linear 0; /* Firefox 4 */
-webkit-transition: all 3s linear 0; /* Safari 和 Chrome */
-o-transition: all 3s linear 0; /* Opera */
}
.dh-btn:hover {
transform: translate(0px, -50px);
transition: all 3s linear;
-moz-transition:all 3s linear 0; /* Firefox 4 */
-webkit-transition: all 3s linear 0; /* Safari 和 Chrome */
-o-transition: all 3s linear 0; /* Opera */
}
</style>
https://www.w3school.com.cn/cssref/pr_transition.asp
animation
https://www.w3school.com.cn/cssref/pr_animation.asp
例子
- forwards是使動畫停再最后的的那個畫面
<style>
.dh-btn {
width: 200px;
height: 100px;
background-color: royalblue;
border-radius: 10px;
cursor: pointer;
/* 鼠標(biāo)離開效果*/
animation: codenot 1s linear forwards;
}
.dh-btn:hover {
animation: code 1s linear forwards;
}
/* 創(chuàng)建動畫*/
@keyframes code {
0% {
transform: translate(0px, 0px);
}
33% {
transform: translate(0px, -5px);
}
66% {
transform: translate(0px, -10px);
}
100% {
transform: translate(0px, -15px);
}
}
@keyframes codenot {
0% {
transform: translate(0px, -15px);
}
33% {
transform: translate(0px, -10px);
}
66% {
transform: translate(0px, -5px);
}
100% {
transform: translate(0px, 0px);
}
}
</style>
