之前一直還覺得很自信,感覺自己css部分掌握 的很不錯,但是知識確實是需要經常回顧的,這半年很少寫原生的東西,結果前兩天看見一道題目,看見這四個單詞我當場石化,完全分不清楚了…爲了加深自己的記憶,我寫這篇博客稍微總結一下:
- transition 觸發式動畫
- animation 主動動畫
- transfrom 讓…變形,是一個複合屬性
- translate transfrom的一個屬性.
1.觸發式動畫transition
所謂觸發式動畫就是需要用戶有一個交互行爲,動畫才能發生.
先看一個簡單的例子,後面再逐個介紹他的屬性:
#box {
width: 100px;
height: 100px;
background-color: tomato;
transition:width 2s;
}
#box:hover{
width: 500px;
}
看下效果:
當我鼠標移到盒子上的時候就會觸發動畫.
transiton的常用屬性:
| 屬性 | 說明 |
|---|---|
| transition-duration | 一個動畫持續的時間 |
| transition-delay | 動畫延遲多少秒開始運行,不能設置負數或0,否則會失去動畫效果 |
| transition-timg-fucntion | 動畫運行時的速度變化曲線 |
| transition-property | 設置元素的哪個屬性發生變化 |
transition-timg-fucntion的常用屬性:
- ease 慢-快-很慢
- linear 勻速
- ease-in 先慢後快
- ease-out 先快後慢
- ease-in-out 慢-快-慢
transition的複合寫法:
transition:property duration dealy timing-function
//如
transition:width 3s 1s ease
2.主動動畫animation
如果要給元素添加動畫,我們需要了解animation 屬性以及 @keyframes 規則.animation屬性用於控制動畫的外觀,@keyframes 規則控制動畫中各個階段的變化.總共有8個animation 屬性.
| 屬性 | 意義 |
|---|---|
| animation-name | 設置動畫名稱 |
| animation-duration | 動畫執行所花費的時間(可以是小數,但必須是正數),例animation-duration:1s; |
| animation-delay | 在頁面打開之後,動畫延遲多長時間開始執行,例,animation-delay : 3s; |
| animation-timing-mode(運行結束的狀態) | forwards 動畫結束後停在最後一幀backforwards 動畫結束後返回第一幀 |
| animation-iterator-count num(1,2,3…) 動畫運行的次數 | infinite 動畫一直循環往復運動 |
| animation-direction(運行方向) | alternate 正反交替運行 reverse 反向運行 lternate-revers 先倒着播放再順着播放 |
| animation-play-state(播放狀態) | running 當前動畫正在運行pause 當前動畫可以被停止 |
| animation-timing-function(畫在每一動畫週期中執行的節奏) | ease 慢-快-很慢linear 勻速ease-in 先慢後快ease-out 先快後慢ease-in-out 慢-快-慢 |
@keyframes 能夠創建動畫。 創建動畫的原理是將一套 CSS 樣式逐漸變化爲另一套樣式。具體是通過設置動畫期間對應的“frames”的 CSS 的屬性，以百分比來規定改變的時間，或者通過關鍵詞“from”和“to”，等價於 0% 和 100%。打個比方，CSS 裏面的 0% 屬性就像是電影裏面的開場鏡頭。CSS 裏面的 100% 屬性就是元素最後的樣子，相當於電影裏的演職員表或者鳴謝鏡頭。CSS 在對應的時間內給元素過渡添加效果。
下面舉例說明 @keyframes 和動畫屬性的用法：
#anim {
animation-name: colorful;
animation-duration: 3s;
}
@keyframes colorful {
0% {
background-color: blue;
}
100% {
background-color: yellow;
}
}
id 爲 anim 的元素，代碼設置 animation-name 爲 colorful，設置 animation-duration 爲 3 秒。然後把 @keyframes 引用到名爲 colorful 的動畫屬性上。 colorful 在動畫開始時（0%）設置顏色爲藍色，在動畫結束時（100%）設置顏色爲黃色。注意不是隻有開始和結束的過渡可以設置，0% 到 100% 間的任意百分比你都可以設置。
animation的複合寫法
animation: name duration timing-function delay iteration-count direction fill-mode;
示例如下:
#box {
width: 100px;
height: 100px;
background-color: tomato;
animation: demo 3s linear infinite alternate forwards;
}
@keyframes demo {
0%{
width: 100px;
height: 100px;
background-color: tomato;
}
100%{
width: 500px;
height: 500px;
background-color: teal;
}
}
3.變形transfrom
transfrom的常用屬性如下:
| 屬性 | 說明 |
|---|---|
| ratate() 旋轉 | 角度值爲deg 正值順時針旋轉 負值逆時針旋轉 |
| scale(x) 縮放 | 0元素小消失 x>1放大元素 0<x<1 縮小 x< 0 放大且旋轉180度 |
| skew(x,y) | 扭曲 傾斜 穿一個角度值 |
| translalte(x,y) | 移動 |
我只進行了簡單的列舉,具體可戳鏈接
https://www.runoob.com/cssref/css3-pr-transform.html
https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform
示例如下:
#box {
width: 100px;
height: 100px;
background-color: tomato;
animation: demo 3s linear alternate forwards;
}
@keyframes demo {
0%{
}
50%{
transform: translate(200px,200px) scale(0.5);
}
100%{
transform: translate(0px,0px) scale(1.2);
}
}
效果如下:
