一.過渡和動畫
1.過渡效果語法
1>transition-property：all | none | property,property
檢索或設置對象中的參與過渡的屬性
property： 指定要進行過渡的css屬性
2>transition-duration：time[ ,time ]... 默認值：0
time： 指定對象過渡的持續(xù)時間
3>transition-timing-function：linear | ease | ease-in | ease-out | ease-in-out |
cubic-bezier(number, number, number, number) ?
設置對象中過渡的動畫類型
4>transition-delay：time[ ,time ]. 默認值：0
或設置對象延遲過渡的時間
time： 指定對象過渡的延遲時間
5>使用順序：1，2，3，4
2.動畫
1>animation屬性
動畫屬性名:-webkit-animation-name:move;
動畫持續(xù)時間:-webkit-animation-duration: 10s;
動畫幀頻:webkit-animation-timing-function: ease-in-out
動畫延遲時間:-webkit-animation-delay: 2s;
動畫循環(huán)次數(shù):-webkit-animation-iteration-count:10; infinite為無限次
動畫播放方式:-webkit-animation-direction: normal
默認normal，動畫正常播放； alternate，動畫輪流反向播放
例：.all { -webkit-animation:move(動畫名) 5s(時長) linear(幀頻) infinite(循環(huán)次數(shù)); }
2>關鍵幀語法
@-webkit-keyframes move{
0%{background-color: green}
40%{background-color: orange}
60%{background-color: blue}
100%{background-color: red;}
}
遠近互聯(lián)前端小華整理發(fā)布，希望能對學習技術的你有所幫助
遠近互聯(lián)專業(yè)提供網(wǎng)站建設、APP開發(fā)、網(wǎng)站優(yōu)化、外貿(mào)網(wǎng)站SEO、微信運營的品牌整合營銷服務，讓客戶通過網(wǎng)絡品牌建立與網(wǎng)絡傳播提高業(yè)績。
