# Keyframes

### *直接是用CSS來呈現動畫效果，主要是依賴@keyframes下面我要介紹透過Sass設定*

## CSS中的keyframes

簡單的回憶一下，如果要使用`animation`創建一個動畫，當然必須要先創見一個`keyframes`

```css
@keyframes animation-name {
    ...
}
```

## SCSS中的keyframes

SCSS幫助我們解決一些前綴的事項，言外之意，就是給`keyframes`定義一個`mixins`

```css
@mixin keyframes($animationName) {
    @-webkit-keyframes #{$animationName} {
        @content;
    }
    @-moz-keyframes #{$animationName} {
        @content;
    }
    @-o-keyframes #{$animationName} {
        @content;
    }
    @keyframes #{$animationName} {
        @content;
    }
}
```

在要用的時候，可以直接這樣使用

```css
@include keyframes(move-the-object) {
    0%   {
        transform: translateX(0);
    }
    100% {
        transform: translateX(200px);
    }
}
```