Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS Unused CSS Stages CSS Animations Full-Page Animation Project: Part 3

Posted by wendypeis
wendypeis
4,603 Points

Animation jumps a little at the end

I followed the video but I made it so that Mike comes out from the right side and for some reason, the boat and mike both jump a little around the 6s mark. Not sure why this is happening.

Also, is there a more efficient way to combine the top and right animations for Mike?

Thanks!

.mike {
    width: 180px;
    position: absolute;
    top: 45%;
    right: -15%;
    -webkit-transform: rotateZ(-5deg);
}

/*  Animations - WebKit only
------------------------------------------ */

body {
    -webkit-animation: bg-move 8s ease-out forwards;
}
.boat {
    -webkit-animation: rock-boat 3s ease-in-out infinite;
}
.boat::after {
    -webkit-animation: steam 4s 2s infinite;
}
.mike {
    -webkit-animation: mike-move 4s 4s ease-out forwards,
                      mike-move2 4s 4s ease-out forwards,
                      mike-float 3.2s infinite;
}


/*  Keyframes - WebKit only
------------------------------------------ */

@-webkit-keyframes rock-boat {
    50%  { -webkit-transform: rotate(-5deg) translateY(-10px); }
}

@-webkit-keyframes steam {
    40%,
    60%  { opacity: 1; }
    100% { -webkit-transform: translate(-15%, -35%) rotateZ(20deg); }
}

@-webkit-keyframes bg-move {
    0%   { background-position:  100% -560px; }
    100% { background-position: -350% -460px; }
}

@-webkit-keyframes mike-move {
    100% { right: 12%; }
}

@-webkit-keyframes mike-move2 {
    100% { top: 55%; }
}

@-webkit-keyframes mike-float {
    50% { -webkit-transform: rotateZ(5deg) translateY(-5px); }
}
huckleberry
huckleberry
14,636 Points
huckleberry
huckleberry
14,636 Points

I'm sorry there Wendy. I got an ask request from ya but I haven't gotten to animations yet. I stopped after the flexbox to really review and implement all I had learned since transitions & transforms as well as animations are just bells and whistles that I considered uncessary for me right now until I got more comfortable with the meat of CSS and layout and have since jumped over to doing the intro to programming course so I can start my JS training.

Any progress on your problem?

2 Answers

wendypeis
wendypeis
4,603 Points
wendypeis
wendypeis
4,603 Points

Hey Huckleberry - No, I haven't really gone back to see if the problem is persisting though. Thanks for checking out my question though!

Josué Rodriguez
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Josué Rodriguez
Front End Web Development Techdegree Graduate 24,118 Points
Josué Rodriguez
.a{fill-rule:evenodd;}techdegree seal-36
Josué Rodriguez
Front End Web Development Techdegree Graduate 24,118 Points

Hi Wendy I did the same thing you did as having mike appear from the right felt more natural than him catching up to the boat. Anyways I was changing code trying to solve the jump at the end and couldn't. Then I used the "Inspect Element" in chrome and saw that when you make mike come out from the right a scroll bar appears at the bottom. That's what causes the jump.

After a quick google search I came across this: 

overflow-x: hidden;

I aded it to the main.css under the body selector and that got rid of the jump at the end. In respects to your second question I also thought of that as a possible solution to define the vertical position so it wouldn't do the jump but obviously it didn't work.

For the combined syntax I did it this way:

@-webkit-keyframes mike-move {
    100% { right: 15%; top: 55%;}

I deleted the top part after finding the solution since it doesn't matter.

I hope that helps. Cheers