過渡 當(dāng)觸發(fā)的時(shí)候會(huì)有過渡的效果
1.transition-property:none|all|某一個(gè)屬性值
2.transition-duration：多少秒 也就是說過渡效果執(zhí)行多長(zhǎng)時(shí)間 默認(rèn)的是0s
3.transition-timing-function:ease|linear|ease-out|ease-in|ease-in-out|貝塞爾曲線的參數(shù)值cubic-bezier(number，number讥巡，number紧帕，number)|steps（走幾步摘悴，start|end）
ease：兩頭慢衰伯，中間快
Linear：勻速
Ease-in：開始慢
Ease-out：結(jié)束慢
Ease-in-out：開始結(jié)束慢
Ease和ease-in-out的區(qū)別就是ease-in-out的幅度更大一點(diǎn)
4.transition-delay:延遲多少秒; 默認(rèn)的是0s
5.transition合寫
例如：transition:left 2s ease 1s
動(dòng)畫 不用觸發(fā)自己執(zhí)行瞧剖，而且可以做多貞的動(dòng)畫
1.animation-name：none|自己命名
2.animation-duration：動(dòng)畫多長(zhǎng)時(shí)間
3.animation-timing-function 運(yùn)動(dòng)軌跡和過渡的參數(shù)是一模一樣的肖揣，同上
4.animation-iteration-count：infinite|動(dòng)畫執(zhí)行的次數(shù) 默認(rèn)是1次
5.animation-direction：normal|reverse|alternate|alternate-reverse 方向
alternate往返
alternate-reverse相反的往返
6.animation-play-state：running|paused 讓動(dòng)畫暫兔窦伲或者是繼續(xù)播放
7.animation-delay延遲
8.animation-fill-mode：none|backwards|forwards|both
動(dòng)畫在開始的時(shí)候是否要保持第一針的設(shè)置，動(dòng)畫在結(jié)束的時(shí)候是否保持結(jié)束時(shí)的狀態(tài)
None：不做設(shè)置
Backwards動(dòng)畫開始在第一貞的狀態(tài)
forwards結(jié)束的時(shí)候保持動(dòng)畫最后那貞的狀態(tài)
Both開始的時(shí)候保持第一貞的狀態(tài)龙优，結(jié)束的時(shí)候保持結(jié)束時(shí)候的狀態(tài)
9.合寫 animation
animation：abc 2s ease 0s 1 normal none running
1 播放次數(shù)
Normal 方向 direction
None fill-mode
Running 播放狀態(tài)
動(dòng)畫貞兩種書寫方式
@-webkit-keyframes abc{
0%{left:0;top:0;}
50%{left:250px;top:100px;}
100%{left:500px;top:0;}
}
@-webkit-keyframes abcd{
0%{color:#fff;}
100%{color:#000;}
}
@-webkit-keyframes abcde {
from{
opacity: 0;
}
to{
opacity: 1;
}
}
