> For the complete documentation index, see [llms.txt](https://tobyisme.gitbook.io/sass/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://tobyisme.gitbook.io/sass/keyframes.md).

# 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);
    }
}
```