通過百分比確定動畫所處的過程

<style>
@keyframes myfirst
{
    0% {
        transform: rotate(0deg);
        left: 0px;
    }
    25% {
        transform: rotate(20deg);
        left: 0px;
    }
    50% {
        transform: rotate(0deg);
        left: 500px;
    }
    55% {
        transform: rotate(0deg);
        left: 500px;
    }
    70% {
        transform: rotate(0deg);
        left: 500px;
        background: #1ec7e6;
    }
    100% {
        transform: rotate(-360deg);
        left: 0px;
    }
}

@-moz-keyframes myfirst /* Firefox */
{
    0% {
        transform: rotate(0deg);
        left: 0px;
    }
    25% {
        transform: rotate(20deg);
        left: 0px;
    }
    50% {
        transform: rotate(0deg);
        left: 500px;
    }
    55% {
        transform: rotate(0deg);
        left: 500px;
    }
    70% {
        transform: rotate(0deg);
        left: 500px;
        background: #1ec7e6;
    }
    100% {
        transform: rotate(-360deg);
        left: 0px;
    }
}

@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
    0% {
        transform: rotate(0deg);
        left: 0px;
    }
    25% {
        transform: rotate(20deg);
        left: 0px;
    }
    50% {
        transform: rotate(0deg);
        left: 500px;
    }
    55% {
        transform: rotate(0deg);
        left: 500px;
    }
    70% {
        transform: rotate(0deg);
        left: 500px;
        background: #1ec7e6;
    }
    100% {
        transform: rotate(-360deg);
        left: 0px;
    }
}

@-o-keyframes myfirst /* Opera */
{
    0% {
        transform: rotate(0deg);
        left: 0px;
    }
    25% {
        transform: rotate(20deg);
        left: 0px;
    }
    50% {
        transform: rotate(0deg);
        left: 500px;
    }
    55% {
        transform: rotate(0deg);
        left: 500px;
    }
    70% {
        transform: rotate(0deg);
        left: 500px;
        background: #1ec7e6;
    }
    100% {
        transform: rotate(-360deg);
        left: 0px;
    }
}

#animated_div {
    width: 100px;
    height: 100px;
    background: #92B901;
    color: #ffffff;
    position: relative;
    font-weight: bold;
    font: bold 12px '微軟雅黑', Verdana, Arial, Helvetica, sans-serif;
        line-height: normal;
    padding: 20px 10px 0px 10px;
    animation: myfirst 5s 1;                /*綁定keyframes名 + 持續(xù)時間 + 重復次數(shù)*/
    -moz-animation: myfirst 5s 1;
    -webkit-animation: myfirst 5s 1;
    -o-animation: myfirst 5s 1;
    border-radius: 5px;
    -webkit-border-radius: 5px;
}
</style>

<p id="animated_div">
</p>