原文地址：https://segmentfault.com/a/1190000015221260

練習地址：https://scrimba.com/c/c3GEWmTb

感想： 原來animation 中可以有多個動畫，用 , 分開即可！

HTML code：

<div class="loader"></div>

CSS code：

html, body {
    margin: 0;
    padding: 0;
}
body{
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items
 
: center;
    background-color: black;
}
/* 定義.loader容器尺寸*/
.loader{
    position: relative;
    font-size: 20px;
    width: 10em;
    height: 3em;
    /* silver : 銀色 */
    border: 0.3em solid silver;
    border-radius: 3em;
    /* 給容器左右兩側塗上不同顏色 */
    border-left-color: hotpink;
    border-right-color
 
: blue;
    /* 讓容器.loader不停旋轉 */
    animation: spin 3s linear infinite;
}
@keyframes spin{
    to{
        transform: rotate(360deg);
    }
}
/* 畫個小球 */
.loader::before{
    content: ‘‘;
    position: absolute;
    top: 0;
    left: 0;
    width: 3em;
    height: 3em;
    border-radius: 50%
 
;
    background-color: blue;
    /* shift ： 轉移 */
    animation: 
        /* 這裏居然可以放兩個動畫在一起，666 */
        shift 3s linear infinite,
        change-color 3s linear infinite;
}
@keyframes shift{
    50%{
        left: 7em;
    }
}
@keyframes change-color{
    0%, 55%{
        background-color: blue;
    }
    5%, 50%{
        background-color: hotpink;
    }
}

46.純 CSS 創作一個在容器中反彈的小球