Keyframes

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

CSS中的keyframes

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

@keyframes animation-name {
    ...
}

SCSS中的keyframes

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

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

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

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