SOURCE

<div class="page">
    <div class="donghua">
        <span>动画</span>    
    <div/>

    <div class="jianbian">
        <span>渐变</span>    
    <div/>
<div/>

.donghua{
    background: red;
    width: 200px;
    height: 200px;
    display: flex;
    flex-flow: row;
    justify-content: center;
    align-content: center;
    text-align: center;
    animation: myfist 2.1s;
}

@keyframes myfist{
    0% { background: red; margin-left: 0; margin-top: 0 }
    25% { background: yellow; margin-left: 40px; margin-top: 20px }
    50% { background: blue; margin-left: 80px; margin-top: 40px; }
    100% { background: red; margin-left: 160px; margin-top: 0; }
}

.jianbian{
    background: bisque;
    width: 100px;
    height: 300px;
}