---
# System prepended metadata

title: 時代雜誌(切版筆記)(transition)

---

# 時代雜誌(切版筆記)(transition)

**這次切版的過程有需要製作一些過場的簡單動畫, 所以也有使用到一些transition, 打鐵趁熱在來整理一下規則使用方式及過程。**


## transition 基本語法
  **transition 為一個四的屬性的縮寫**
```
transition: 
  transition-property | transition-duration | 
  transition-timing-function | transition-delay;
```
*  transition-property 指定某個css屬性
像是本次有使用到的transform, opacity, height, 都可以用來做過場動畫, 當然不只這些, [全屬性](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties)
* transition-duration 整個過場花多久的時間, 預設值為0, 單位為s ms
*  transition-timing-function 指的是過場時的速度曲線, 預設為ease本次大多使用到ease-in-out, 還有很多時間函式包括(linear, ease-in, ease-out)
*  transition-delay 延遲多久後開始進行過場動畫, 單位為s ms

## 範例 


![](https://i.imgur.com/jYOy5ya.gif)



**以右手邊的搜尋欄為例**
1. 搜尋欄包含一個icon與一個input, 設定好基本css後,使用transform:translate(100px); (100px為input的寬度),將input推出螢幕外
e.x.
```
.searchbar{
  ...
  transform: translate(100px);
}
```
2. 當事件觸發如:checked時, 在設定搜尋欄transform:translate(0px);
e.x. 
```
.navbar-toggle:checked ~ .searchbar{
  transform: translate(0px);
}
```
3. 再回頭設定搜尋欄的過場動畫
```
.searchbar{
  ...
  transform: translate(100px);
  transition: transform .5s ease-in-out
}
```
## 限制

**1. 必須式確切的數值轉換**
  轉換的開始及結束必須為確切的值, 否則將無法轉換
  e.x.
  height: auto; -> height: 55px;
  display: block; -> display: none;
**2. 需要事件觸發, 無法自動發生**
  e.x.
  需要:focus, :checked 等偽類
  或JavaScript控制
  
  [作品連結](https://danielgg1024.github.io/time/)
 
　　  
