容易忘記的css屬性和動畫屬性
阿新 • • 發佈:2018-10-14
dir 保持 || alternate -c -name mat sca 應該 1、animation
2、 animation 動畫過渡
3、transform 該屬性允許我們對元素進行旋轉、縮放、移動或傾斜
動畫屬性
@keyframes 關鍵幀 ——> animation 活潑 (配合使用)
transform 變換 ——> transition 過渡 (配合使用)
1、animation
animation : name,完成時間,速度曲線,延遲時間,播放次數,輪流反向播放動畫
animation : name,5s,linear,infinite
屬性作用介紹
- animation-name 規定需要綁定到選擇器的 keyframe 名稱。
- animation-duration 規定完成動畫所花費的時間,以秒或毫秒計。
- animation-timing-function 規定動畫的速度曲線。 常用值值:linear 動畫從頭到尾的速度是相同的。
- animation-delay 規定在動畫開始之前的延遲。
- animation-iteration-count 規定動畫應該播放的次數。常用值值:infinite 無限次播放 。
- animation-direction 規定是否應該輪流反向播放動畫。alternate 回來時反向
擴展
animation-fill-mode:forwards 讓動畫保持在最後一幀
animation-play-state:paused; 讓動畫在當前幀停止
2、 animation 動畫過渡
transition: 屬性名||all,完成時間,速度曲線,延遲時間;
transition: all 5s linear;
屬性作用介紹
- transition-property 規定設置過渡效果的 CSS 屬性的名稱。
- transition-duration 規定完成過渡效果需要多少秒或毫秒。
- transition-timing-function 規定速度效果的速度曲線。常用值值:linear 動畫從頭到尾的速度是相同的。
- transition-delay 定義過渡效果何時開始。
3、transform 該屬性允許我們對元素進行旋轉、縮放、移動或傾斜
rotate 旋轉,scale縮放,skew傾斜,translate移動
4、 box-shadow:水平,垂直,模糊距離,陰影的尺寸,陰影的顏色,將外部陰影 (outset) 改為內部陰影
box-shadow:5px 5px 5px 5px red outset;
實例
@keyframes 關鍵幀 + animation 活潑
.d1{
animation: mymove 5s linear 1s infinite alternate;
-webkit-animation: mymove 5s linear 1s infinite alternate;
/*執行動畫mymove 5s內完成 動畫從頭到尾的速度是相同的 無限次播放 回來時反向*/
}
@keyframes mymove
{
0% {top:0px;}
100% {top:200px;}
}
@-webkit-keyframes mymove /* Safari 和 Chrome */
{
from {top:0px;}
to {top:200px;}
}
transform 變換 + transition 過度
.d1{
width: 206px;
height: 206px;
background: pink;
}
.d1{
transform: rotate(0deg);
transition: all 3s linear;
}
.d1:hover{
transform: rotate(360deg);
}
容易忘記的css屬性和動畫屬性