# Animation

## Animation

## 1.Transition

> (簡單版的動畫)

用途:如果有hover或click改變某元素style屬性時，可加上

```
transition: width 2s, height 2s, transform 2s,background 2s;
```

來讓元素在改變style時加上transition效果

### 如何使用:

short-cut

```
transition: width      2s           linear       1s;
           元素屬性  幾秒鐘的動畫   如何進行動畫  延遲幾秒開始
```

或是個別指定

```
  background: #2db34a;
  transition-property: background;
  transition-duration: 1s;
  transition-timing-function: linear;
```

## 2.Animation

> (複雜版的動畫)

### 1.指定keyframe

(下面這個只可指定開始與結束)

```
@keyframes mymove {
    from {left: 0px;}
    to {left: 200px;}
}
```

或是(下面的方法可指定許多關鍵影格)

```
@keyframes mymove {
    0% {left: 0px;}
    100% {left: 200px;}
}
```

### 2.設定animation

```
animation: test  1s 2s 3 alternate 
        //keyframe名稱、持續時間、delay、重複次數、動畫作用方向
```

可參考:<http://www.openfoundry.org/tw/tech-column/9233-css3-animation>