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

Joseph Miller
Joseph Miller
4,982 Points

Code challenge error

<p> This is code</p>
/*  Animations - WebKit only
------------------------------------------ */

.boat {
    -webkit-animation: rock-boat 3s ease-in-out infinite;
}
.boat::after {
    -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); }
}

3 Answers

Hi Joseph,

The steam animation is supposed to be bound to the .steam selector, not .boat::after

.boat {
-webkit-animation: rock-boat 3s ease-in-out infinite;
}

.steam {
-webkit-animation: steam 4s 2s infinite;
}
Shawn McGrory
Shawn McGrory
546 Points

<p> This is code</p>

<style>
/*  Animations - WebKit only
------------------------------------------ */
.boat {
-webkit-animation: rock-boat 3s ease-in-out infinite;
}
.boat::after {
-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); }
}

</style>

Could that be it?