可以使用偽CSS來簡單製作小動畫，最常見到的就是 :hover 在這個
Transform - 變換
提醒：原先的區塊大小( 寬高所定義的值 )，一樣會被保留。
translate()
某些思維和 CSS 另一個屬性 position 的感覺很像，但不同的是 position不會保留寬高。
以區塊左上角為中心
div {
transform: translate(-50%, -50%)
/* 區塊本身的寬高比 */
}
rotate()
旋轉角度
div {
transform: rotate(20deg)
}
scale()
縮放，以區塊中心為中心
div {
transform: scale(10, 10)
/* 縮放比 */
}
Transitions - 過度
transition
div {
width:10px
transition: width 2s;
/* 需要過度的東西 */
}
div:hover{
width: 100px;
}
transition-delay
過度事件觸發後的時間
div {
width:10px
transition: width 2s;
transition-delay: 2s;
}
div:hover{
width: 100px;
}
transition-duration
過度需要的時間
div {
width:10px
transition: width 2s;
}
div:hover{
width: 100px;
}
transition-timing-function
- ease
- linear
- ease-in
- ease-out
- ease-in-out
div {
width:10px
transition: width 2s;
transition-timing-function: linear;
}
div:hover{
width: 100px;
}
Animations - 動畫
@keyframes
宣告影格
@keyframes example {
0% { background-color:red; }
25% { background-color:yellow; }
50% { background-color:blue; }
75% { background-color:green; }
100% { background-color:red; }
}
animation-name
引用影格使用的名稱
@keyframes example {
0% { background-color:red; }
25% { background-color:yellow; }
50% { background-color:blue; }
75% { background-color:green; }
100% { background-color:red; }
}
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example; /* keyframe 名稱 */
animation-duration: 4s; /* 運行時間 */
}
animation-duration
影格運行時間
animation-delay
影格執行觸發時等待時間
animation-iteration-count
運行影格次數
animation-direction
- normal - 向前播放(預設)
- reverse - 相反播放
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-direction: reverse;
}
animation-timing-function
數率方程式
#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}
animation-fill-mode
影格運行完的樣子
- none - 預設運行完後變回原設定
- forwards - 運行到100%的結果