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

programming web dev
1

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!

2

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 :stuck_out_tongue:

3

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

Thanks, much appreciated!

4

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