# Animation jumps straight from 0% to 100% skipping everything between

**URL:** <https://forum.kirupa.com/t/animation-jumps-straight-from-0-to-100-skipping-everything-between/634093>\
**Category:** web dev\
**Created:** [December 28, 2015, 6:32pm UTC](https://forum.kirupa.com/t/animation-jumps-straight-from-0-to-100-skipping-everything-between/634093 "2015-12-28T18:32:37Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Robbe.C](https://avatars.discourse-cdn.com/v4/letter/r/a4c791/32.png) [@Robbe.C](https://forum.kirupa.com/u/Robbe.C)\
**Post date:** [December 28, 2015, 6:32pm UTC](https://forum.kirupa.com/t/animation-jumps-straight-from-0-to-100-skipping-everything-between/634093/1 "2015-12-28T18:32:37Z")

</div>

Nice tutorial!  
I only have this problem: The animation does not do what i state at 50%, it animates directly from 0% to 100% but ignores everything in-between… Would you have an idea how to solve this? Perhaps i am doing something wrong, but i can’t figure it out…

here’s the css:

.outerbox {  
height: 300px;  
width: 300px;  
background-color: lightblue;

}

.cube{  
-webkit-animation: slideAndBounce 1s 1;  
height: 100px;  
width: 100px;  
line-height: 100px;  
background-color: darkblue;  
-webkit-transition: all 2s ;  
}

@-webkit-keyframes slideAndBounce{  
0% { -webkit-transform: translate3d(0px,0px,0px);  
animation-timing-function: ease-in;}  
50% { -webkit-transform: translate3d(800px,100px);  
animation-timing-function: ease-out; }  
100% { -webkit-transform: translate3d(100px,0px,0px); }  
}

.cube:hover{  
width: 200px;  
background-color: red;  
border-radius: 10px;  
-webkit-transform: scale(0.5);  
-webkit-transform: rotate(30deg);  
-webkit-transform: skew(-30deg);  
}

.cube p {  
color: white;  
text-align: center;  
}

Thanks!

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [December 28, 2015, 6:42pm UTC](https://forum.kirupa.com/t/animation-jumps-straight-from-0-to-100-skipping-everything-between/634093/2 "2015-12-28T18:42:14Z")

</div>

Robbe - in your 50% keyframe, give your translate3d function a third argument just like you did for the 0% and 100% keyframes:

```
@-webkit-keyframes slideAndBounce {
  0% {
    -webkit-transform: translate3d(0px, 0px, 0px);
    animation-timing-function: ease-in;
  }
  50% {
    -webkit-transform: translate3d(800px, 100px, 0px);
    animation-timing-function: ease-out;
  }
  100% {
    -webkit-transform: translate3d(100px, 0px, 0px);
  }

```

That should fix it 😛

---

<div class="post-metadata">

**Author:** ![Robbe.C](https://avatars.discourse-cdn.com/v4/letter/r/a4c791/32.png) [@Robbe.C](https://forum.kirupa.com/u/Robbe.C)\
**Post date:** [December 28, 2015, 6:46pm UTC](https://forum.kirupa.com/t/animation-jumps-straight-from-0-to-100-skipping-everything-between/634093/3 "2015-12-28T18:46:19Z")

</div>

Oh okay, i should’ve seen that myself.  
Sorry to bother you with this man…

Thanks, much appreciated!

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [December 28, 2015, 6:50pm UTC](https://forum.kirupa.com/t/animation-jumps-straight-from-0-to-100-skipping-everything-between/634093/4 "2015-12-28T18:50:31Z")

</div>

No problem - it’s tough to spot these things. CSS is terrible at notifying you when something needs fixing haha.