Red Envelopes Animation effect

Requirement: Ribbon has some animated effect when check-in is successful

<div class= "Sign-in-s" >    <div class= "TXT" ><p> successful sign-in <span>1</span> days </p>< P> Rewards <em>100</em> coins </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%; width: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; width:100%; height:100%; top:0;}. Sign-in-s. cd{position:relative; width:100%; height:100%;}. Sign-in-s. CD div{Position:absolute;}. Sign-in-s. cd. cd_1{width: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{width: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{width: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{width: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{width: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{width: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{width:28px; height:24px; Background:url (".. /images/cd_7.png ") No-repeat; background-size:100%; animation:move7 2s forwards;-webkit-animation:move7 2s forwards; }

 fowards: Causes the animation to stop after the last frame

/*----------------Ribbon Animation */@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 (n.), */}}@-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 (+); *}} @keyframes move7{0%{top:78px;le ft: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);}}

Red Envelopes Animation effect