红包彩带动画效果

需求：签到成功时，丝带有一些动画效果

<div class="sign-in-s">
    <div class="txt"><p>已成功签到<span>1</span>天</p><p>奖励<em>100</em>金币</p></div>
    <div class="cdwrap">
        <div class="cd">
            <div class="cd_1"></div>
            <div class="cd_2"></div>
            <div class="cd_3"></div>
            <div class="cd_4"></div>
            <div class="cd_5"></div>
            <div class="cd_6"></div>
            <div class="cd_7"></div>
        </div>
    </div>
</div>

.sign-in-s{ position: absolute; left: 50%; top: 50%;  265px; height: 269px; margin-left: -132px; margin-top:-134px; z-index: 9898;  background: url("../images/sign_in_s.png") no-repeat; background-size: 100%;}
.sign-in-s .txt{ margin-top: 162px;}
.sign-in-s p{ text-align: center; font-size: 15px; color: #fff431;}
.sign-in-s p em{ font-weight: 700; font-size: 24px;}
.sign-in-s .cdwrap{ position:absolute;  100%; height: 100%; top: 0;}
.sign-in-s .cd{ position: relative;  100%; height: 100%;}
.sign-in-s .cd div{ position: absolute;}
.sign-in-s .cd .cd_1{  37px; height: 37px; background: url("../images/cd_1.png") no-repeat; background-size: 100%; animation: move 1s ease forwards;-webkit-animation: move 1s forwards;}
.sign-in-s .cd .cd_2{  23px; height: 21px; background: url("../images/cd_2.png") no-repeat; background-size: 100%; animation: move2 2.5s forwards;-webkit-animation: move2 2.5s forwards; }
.sign-in-s .cd .cd_3{  23px; height: 24px; background: url("../images/cd_3.png") no-repeat; background-size: 100%; animation: move3 2s forwards;-webkit-animation: move3 2s forwards; }
.sign-in-s .cd .cd_4{  23px; height: 23px; background: url("../images/cd_4.png") no-repeat; background-size: 100%; animation: move4 1s forwards;-webkit-animation: move4 1s forwards; }
.sign-in-s .cd .cd_5{  47px; height: 33px; background: url("../images/cd_5.png") no-repeat; background-size: 100%; animation: move5 1.5s forwards;-webkit-animation: move5 1.5s forwards; }
.sign-in-s .cd .cd_6{  32px; height: 41px; background: url("../images/cd_6.png") no-repeat; background-size: 100%; animation: move6 2s forwards;-webkit-animation: move6 2s forwards; }
.sign-in-s .cd .cd_7{  28px; height: 24px; background: url("../images/cd_7.png") no-repeat; background-size: 100%; animation: move7 2s forwards;-webkit-animation: move7 2s forwards; }

 fowards：使得动画结束后停留在最后一帧

/*----------------彩带动画*/
@keyframes move
{
    0%{top:100px;left:90px;transform:rotate(-20deg);}
    100%{top:121px;left:50px;transform:rotate(0deg);}
}
@-webkit-keyframes move
{
    0%{top:100px;left:90px;transform:rotate(-20deg);}
    100%{top:121px;left:50px;transform:rotate(0deg);}
}
@keyframes move2
{
    0%{top:110px;left:150px;transform:rotate(-88deg);}
    100%{left: 175px; top: 130px;transform:rotate(0deg);}
}
@-webkit-keyframes move2
{
    0%{top:110px;left:150px;transform:rotate(-88deg);}
    100%{left: 175px; top: 130px;transform:rotate(0deg);}
}
@keyframes move3
{
    0%{top:150px;left:120px; transform:rotate(220deg);}
    100%{left: 159px; top: 210px; transform:rotate(0deg);}
}
@-webkit-keyframes move3
{
    0%{top:150px;left:120px; transform:rotate(220deg);}
    100%{left: 159px; top: 210px; transform:rotate(0deg);}
}
@keyframes move4
{
    0%{top:40px;left:75px;transform:rotate(148deg);}
    100%{left: 58px; top: 18px;transform:rotate(0deg);}
}
@-webkit-keyframes move4
{
    0%{top:40px;left:75px;transform:rotate(148deg);}
    100%{left: 58px; top: 18px;transform:rotate(0deg);}
}
@keyframes move5
{
    0%{top:56px;left:98px; transform:rotate(50deg);}
    100%{left: 13px; top: 56px; transform:rotate(0deg);}
}
@-webkit-keyframes move5
{
    0%{top:56px;left:98px; transform:rotate(50deg);}
    100%{left: 13px; top: 56px; transform:rotate(0deg);}
}
@keyframes move6
{
    0%{left: 177px; top: 83px;  transform:rotate(-50deg);/*transform:scale(0,0);*/}
    100%{left: 177px; top: 83px; transform:rotate(0deg);/*transform:scale(1,1);*/}
}
@-webkit-keyframes move6
{
    0%{left: 177px; top: 83px; transform:rotate(-50deg);/*transform:scale(0,0);*/}
    100%{left: 177px; top: 83px; transform:rotate(0deg);/*transform:scale(1,1);*/}
}
@keyframes move7
{
    0%{top:78px;left:130px; transform:rotate(-320deg);}
    100%{left: 221px; top: 58px; transform:rotate(0deg);}
}
@-webkit-keyframes move7
{
    0%{top:78px;left:130px; transform:rotate(-320deg);}
    100%{left: 221px; top: 58px; transform:rotate(0deg);}
}