Ful page animation

I have the same problem. The steam doesn't work, but the rock-boat works. Even the final doc in project folder doesn't work. I'm on Safari. When I try it in Firefox with -moz- vender prefix, the steam works but the rock-boat doesn't work!

It is only for WebKit. But here's a new version using "Prefix Free." Now it should work in the the browsers: http://codepen.io/Guilh/pen/KiqkF

I am having the same issue with the steam (its not animating), however I am using chromium in ubuntu... could that be causing any conflict?

/* 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);}
}

/* 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);}
}

/* 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);}
}

Edit: code now there! ;)

Can you get the code in a codepen?

/* 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); } }

for the boat after class I've tried both .boat:: after then .boat: after. neither are working.

Can you put the code in a codepen? Go to codepen.io and make a pen.

i copied the codepen into my sublime text and then saved it. works well. now trying to see what went wrong between the two codes

found it! for keyframe I put @webkit forgot the @-webkit

okay so still not working from mine. I've checked both from video and codepen. Its verbatim but no smoke coming out. though when copy and paste it works magically

http://codepen.io/anon/pen/czxrq

Thank you Guil! This works perfect in Firefox, but Safari needs the prefix; still steam is not coming out. I kind of figured it out. It's the background image that doesn't work in Safari. When I put the stream image in index.html, it works! Thank you both, James and Guil!

I'm having trouble getting JUST the static images to load in the brower ANY browser. I load every project in with NO trouble. The paths are all correct so this ones a head scratcher...I'll reboot just in case..Still problematic...CORRECTION...The images wont load...Can't play with it without the images @(-1-)@

IT WORKS ON MY WINDOWS LAPTOP When time..read the below comments and inject a fix for Mac if possible...Thanks All !!

The code is the exact project files...This is not a question of code so much as the images aren't loading..I'm now at Project #2 with project files #2 and the steam.png is loading but i have little "thumbnails' where the mike and island.png shoud be. I It's the same on FF Chrome and Safari....WEIRD !! Not an issue I imagine anyone can resolve on your end but maybe :=) I'm putting the files into my htdocs folder like I do every project...ALL the other ones work...I AM doing this module on my Mac and will check now my Windows machine :-)

Can't get mike to "float"..i'd like him to bob up and down and I've been over this code till blurry...Here it is...Thanks in advance...

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

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

@-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% {left: 12%;}       
}
@webkit-keyframes mike-float {
            50% { -webkit-transform: rotateZ(5deg) translateY(-5px); }
}```