css - Different 'from' position after first animation iteration -

https://jsfiddle.net/hk9qsayn/

<div class="wrapper">     <div class="animate"></div> </div>  .wrapper {   width: 600px;   height:50px;   position: relative;   background-color: #fff;   overflow: hidden; }  .animate  {   width: 50px;   height: 50px;   position: absolute;   background-color: red;   animation: wind 2s linear infinite; }  @keyframes wind {   0% {right:30%}   100% {right:120%} } 

i want start first iteration right:30%, second , other iteration should start right:-100px. i've tried use animations didn't work.

[edit: forgot -for second start-position]

you use multiple animations:

.wrapper {    width: 600px;    height:50px;    position: relative;    background-color: #fff;    overflow: hidden;  }    .animate  {    width: 50px;    height: 50px;    position: absolute;    background-color: red;    //right:-100px;    animation: wind 2s linear, 2s blub 2s linear infinite;   }      @keyframes wind {    0% {right:30%}    100% {right: 120%;          background: yellow;    }  }    @keyframes blub{    0%{right: -100px;}    100%{      right: 120%;      background:blue;}  }

<div class="wrapper">  <div class="animate"></div>  </div>

i added change in bg-color it's better notice first animation runs 1 time, , second 1 ("blub") runs infinite. second animation start little bit later added delay of 2s