CSS Unused CSS Stages CSS Animations Full-Page Animation Project 2: WebKit Only

Devin Scheu
Devin Scheu
66,191 Points

Help With CSS animations

Question: Using the prefix for WebKit-based browsers, bind the bg-move animation to the body selector. Give it an 8 second duration, then set it so that the final keyframe continues to apply after the animation sequence has completed.

My Code:

body {

-webkit-animation: bg-move 8s;

}

.mike {


}

.boat {

    -webkit-animation: rock-boat 3s ease infinite;

}

.steam {

    -webkit-animation: steam 4s 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% -220px; }

    100% { background-position: -350% -220px; }

}

@-webkit-keyframes mike-float {

    50% { -webkit-transform: rotateZ(5deg) translateY(-5px); }

}

1 Answer

I believe you need to put forwards after -webkit-animation: bg-move 8s