css動畫
阿新 • • 發佈:2017-05-10
參數 black tran 正在 fin wid ani blue 翻轉
CSS動畫
1.1 2D、3D(transform)
2D轉化值:
1translate();根據給定的left(x軸)和top(y軸)參數,移動元素。
例: div{
transform:translate(50px,50px)
}
2.rotate();使元素順時針旋轉給定的角度。正數順時針,負數逆時針,單位(deg)。
3.scale();根據寬度(x軸),高度(y軸),縮放圖片尺寸(從圖片中心放大縮小)
例:transform:scale(2,4);即寬度放大2倍,高度放大4倍
4.skew();根據給定的水平線(x軸)和垂直線(y軸)參數,元素翻轉(拉扯)給定的角度
3D轉換
屬性值:rotateX();圍繞x軸根據角度旋轉多少角度
rotateY();圍繞y軸根據角度旋轉多少角度
1.2 CSS過渡(transition)(即動畫過程)
transition-property:width; 動畫執行效果作用體
transition-duration:1s; 動畫執行時間
transition-timing-function:linear; 動畫效果
transition-delay:2s; 動畫推遲時間
transition-timing-function包含的屬性值:
linear 勻速
ease 慢速開始——快速——慢速結束
ease-in 慢速開始
ease-out 慢速結束
ease-in-out 慢速開始和慢速結束
簡寫:
transition:width 1s linear 2s
1.3 CSS3動畫(@keyframes)
例:第一第二步 @keyframes myFirst{ 0%{ background:red; } 50%{ background:blue; } 100%{ background:black; } } 或: @keyframes myFirst{ from{ background:red; } to{ background:blue; } } 第三第四步: 選擇器{animation:myFirst(動畫名) 5s}
animation屬性:
1.name;2.時間;3.執行效果;4.推遲時間
5.animation-iteration-count:播放次數
①. n:次數,默認為1
②. infinite:無限循環
6.animation-direction:是否逆向播放
①. normal:正常播放(默認)
②. alternate:輪流逆向播放
7.animation-play-state:規定動畫正在播放還是暫停
①. paused:動畫已暫停
②. running:動畫正在播放
簡寫:
animation:myFirst 5s linears 2s infinite alternate
css動畫