CodePen Embed - Image Animations

<header>
    <a class="back left" href="http://www.pencilscoop.com/2014/04/animating-images-with-css-keyframes/"> Back to Pencil Scoop Article</a>
    <h1>Animating Images With CSS</h1>
    <a class="back right" href="http://www.pencilscoop.com/"> Back To Home Page</a>
</header>

<div class="image-wrap">
    <div class="windmill-background"></div>
    <div class="mill1"></div>
    <div class="mill2"></div>
</div>
  
  <div class="container">

    <div class="page">

    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam nibh. Nunc varius facilisis eros. Sed erat. In in velit quis arcu ornare laoreet. Curabitur adipiscing luctus massa. Integer ut purus ac augue commodo commodo. Nunc nec mi eu justo tempor consectetuer. Etiam vitae nisl. In dignissim lacus ut ante. Cras elit lectus, bibendum a, adipiscing vitae, commodo et, dui. Ut tincidunt tortor. Donec nonummy, enim in lacinia pulvinar, velit tellus scelerisque augue, ac posuere libero urna eget neque. Cras ipsum. Vestibulum pretium, lectus nec venenatis volutpat, purus lectus ultrices risus, a condimentum risus mi et quam. Pellentesque auctor fringilla neque. Duis eu massa ut lorem iaculis vestibulum. Maecenas facilisis elit sed justo. Quisque volutpat malesuada velit.</p>

    <p>Nunc at velit quis lectus nonummy eleifend. Curabitur eros. Aenean ligula dolor, gravida auctor, auctor et, suscipit in, erat. Sed malesuada, enim ut congue pharetra, massa elit convallis pede, ornare scelerisque libero neque ut neque. In at libero. Curabitur molestie. Sed vel neque. Proin et dolor ac ipsum elementum malesuada. Praesent id orci. Donec hendrerit. In hac habitasse platea dictumst. Aenean sit amet arcu a turpis posuere pretium.</p>

    <div class="image-wrap small">
      <div class="bird-bg"></div>
      <div class="bird-base"></div>
      <div class="bird-wing"></div>
      <div class="bird-beak"></div>
    </div>

    <p>Nulla mauris odio, vehicula in, condimentum sit amet, tempus id, metus. Donec at nisi sit amet felis blandit posuere. Aliquam erat volutpat. Cras lobortis orci in quam porttitor cursus. Aenean dignissim. Curabitur facilisis sem at nisi laoreet placerat. Duis sed ipsum ac nibh mattis feugiat. Proin sed purus. Vivamus lectus ipsum, rhoncus sed, scelerisque sit amet, ultrices in, dolor. Aliquam vel magna non nunc ornare bibendum. Sed libero. Maecenas at est. Vivamus ornare, felis et luctus dapibus, lacus leo convallis diam, eget dapibus augue arcu eget arcu.</p>

    <div class="image-wrap small">
      <div class="skate-background"></div>
      <div class="skateboarder"></div>
      <div class="skateboard"></div>
    </div>

     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam nibh. Nunc varius facilisis eros. Sed erat. In in velit quis arcu ornare laoreet. Curabitur adipiscing luctus massa. Integer ut purus ac augue commodo commodo. Nunc nec mi eu justo tempor consectetuer. Etiam vitae nisl. In dignissim lacus ut ante. Cras elit lectus, bibendum a, adipiscing vitae, commodo et, dui. Ut tincidunt tortor. Donec nonummy, enim in lacinia pulvinar, velit tellus scelerisque augue, ac posuere libero urna eget neque.</p>

    <p>Nunc at velit quis lectus nonummy eleifend. Curabitur eros. Aenean ligula dolor, gravida auctor, auctor et, suscipit in, erat. Sed malesuada, enim ut congue pharetra, massa elit convallis pede, ornare scelerisque libero neque ut neque. In at libero. Curabitur molestie. Sed vel neque. Proin et dolor ac ipsum elementum malesuada. Praesent id orci. Donec hendrerit. In hac habitasse platea dictumst. Aenean sit amet arcu a turpis posuere pretium.</p>

    <div class="image-wrap small">
      <div class="tea-bg"></div>
      <div class="steam1"></div>
      <div class="steam2"></div>
      <div class="steam3"></div>
      <div class="steam4"></div>
      <div class="tea-mask"></div>
    </div>

    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam nibh. Nunc varius facilisis eros. Sed erat. In in velit quis arcu ornare laoreet. Curabitur adipiscing luctus massa. Integer ut purus ac augue commodo commodo. Nunc nec mi eu justo tempor consectetuer. Etiam vitae nisl. In dignissim lacus ut ante. Cras elit lectus, bibendum a, adipiscing vitae, commodo et, dui. Ut tincidunt tortor. Donec nonummy, enim in lacinia pulvinar, velit tellus scelerisque augue, ac posuere libero urna eget neque.</p>

    <p>Nunc at velit quis lectus nonummy eleifend. Curabitur eros. Aenean ligula dolor, gravida auctor, auctor et, suscipit in, erat. Sed malesuada, enim ut congue pharetra, massa elit convallis pede, ornare scelerisque libero neque ut neque. In at libero. Curabitur molestie. Sed vel neque. Proin et dolor ac ipsum elementum malesuada. Praesent id orci. Donec hendrerit. In hac habitasse platea dictumst. Aenean sit amet arcu a turpis posuere pretium.</p>

    <div class="image-wrap small">
      <div class="car-bg"></div>
      <div class="car1"></div>
      <div class="car2"></div>
    </div>

    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam nibh. Nunc varius facilisis eros. Sed erat. In in velit quis arcu ornare laoreet. Curabitur adipiscing luctus massa. Integer ut purus ac augue commodo commodo. Nunc nec mi eu justo tempor consectetuer. Etiam vitae nisl. In dignissim lacus ut ante. Cras elit lectus, bibendum a, adipiscing vitae, commodo et, dui. Ut tincidunt tortor. Donec nonummy, enim in lacinia pulvinar, velit tellus scelerisque augue, ac posuere libero urna eget neque.</p>

    <p>Nunc at velit quis lectus nonummy eleifend. Curabitur eros. Aenean ligula dolor, gravida auctor, auctor et, suscipit in, erat. Sed malesuada, enim ut congue pharetra, massa elit convallis pede, ornare scelerisque libero neque ut neque. In at libero. Curabitur molestie. Sed vel neque. Proin et dolor ac ipsum elementum malesuada. Praesent id orci. Donec hendrerit. In hac habitasse platea dictumst. Aenean sit amet arcu a turpis posuere pretium.</p>

    <div class="image-wrap small">
      <div class="windmill-background"></div>
      <div class="mill1"></div>
      <div class="mill2"></div>
    </div>

    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam nibh. Nunc varius facilisis eros. Sed erat. In in velit quis arcu ornare laoreet. Curabitur adipiscing luctus massa. Integer ut purus ac augue commodo commodo. Nunc nec mi eu justo tempor consectetuer. Etiam vitae nisl. In dignissim lacus ut ante. Cras elit lectus, bibendum a, adipiscing vitae, commodo et, dui. Ut tincidunt tortor. Donec nonummy, enim in lacinia pulvinar, velit tellus scelerisque augue, ac posuere libero urna eget neque.</p>

    <p>Nunc at velit quis lectus nonummy eleifend. Curabitur eros. Aenean ligula dolor, gravida auctor, auctor et, suscipit in, erat. Sed malesuada, enim ut congue pharetra, massa elit convallis pede, ornare scelerisque libero neque ut neque. In at libero. Curabitur molestie. Sed vel neque. Proin et dolor ac ipsum elementum malesuada. Praesent id orci. Donec hendrerit. In hac habitasse platea dictumst. Aenean sit amet arcu a turpis posuere pretium.</p>

    </div>
  
  </div>


/* Google Fonts */
@import url(https://fonts.googleapis.com/css?family=Roboto:100);
@import url(https://fonts.googleapis.com/css?family=Antic+Didone);

/* CSS Reset */
/*
Copyright (c) 2010, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.com/yui/license.html
version: 3.3.0
build: 3167
*/
html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:text-top;}sub{vertical-align:text-bottom;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}input,textarea,select{*font-size:100%;}legend{color:#000;}

/* Page Setup */
*{
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
a{
text-decoration:none;
}
.container{
z-index:1;
background:#fff;
}
.page p{
font:22px/33px 'Antic Didone', serif;
width:960px;
padding:50px 0px;
margin:0 auto;
}
/* Header */
header{
width:100%;
height:50px;
position:absolute;
text-align:center;
background:rgba(255, 255, 255, 0.05);
z-index:99;
font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
}
header .back{
color:#CCC;
font-size:13px;
text-decoration:none;
}
header a:hover{
color:#ea5c35;
}
header .right{
margin:10px 20px 0 0px;
float:right;
}
header .left{
margin:10px 0px 0 20px;
float:left;
}
header h1{
color:#999;
font-size:18px;
padding:10px 0 0 0;
color:#fff;
font-weight:bold;
display:inline-block;
opacity:0.7;
}
/* Image Effects */
.image-wrap{
position:relative;
height:650px;
overflow:hidden;
}
.image-wrap.small{
width:960px;
margin:0 auto;
}
.image-wrap div{
/*transform*/
-webkit-transform:translate3d(0,0,0);
   -moz-transform:translate3d(0,0,0);
    -ms-transform:translate3d(0,0,0);
     -o-transform:translate3d(0,0,0);
        transform:translate3d(0,0,0);
}


/* Windmill */
.image-wrap .windmill-background{
background:url(http://pencilscoop.com/public/uploads/demos/animated-image-effect/demo/images/wind-bg.jpg) no-repeat;
/*background-size*/
-webkit-background-size:cover;
   -moz-background-size:cover;
     -o-background-size:cover;
        background-size:cover;
width:1600px;
height:150%;
position:absolute;
top:-100px;
}
.image-wrap .mill1{
background:url(http://pencilscoop.com/public/uploads/demos/animated-image-effect/demo/images/mill1.png) no-repeat center center;
/*background-size*/
-webkit-background-size:contain;
   -moz-background-size:contain;
     -o-background-size:contain;
        background-size:contain;
position:absolute;
width:216px;
height:209px;
left:376px;
top:159px;
/*animation*/
-webkit-animation:spin 90s infinite linear;
   -moz-animation:spin 90s infinite linear;
    -ms-animation:spin 90s infinite linear;
     -o-animation:spin 90s infinite linear;
        animation:spin 90s infinite linear;
/*transform-origin*/
-webkit-transform-origin:127px 89px;
   -moz-transform-origin:127px 89px;
    -ms-transform-origin:127px 89px;
     -o-transform-origin:127px 89px;
        transform-origin:127px 89px;
}
.image-wrap .mill2{
background:url(http://pencilscoop.com/public/uploads/demos/animated-image-effect/demo/images/mill2.png) no-repeat center center;
/*background-size*/
-webkit-background-size:contain;
   -moz-background-size:contain;
     -o-background-size:contain;
        background-size:contain;
position:absolute;
width:216px;
height:209px;
left:867px;
top:209px;
/*animation*/
-webkit-animation:spin 60s infinite linear;
   -moz-animation:spin 60s infinite linear;
    -ms-animation:spin 60s infinite linear;
     -o-animation:spin 60s infinite linear;
        animation:spin 60s infinite linear;
/*transform-origin*/
-webkit-transform-origin:85px 110px;
   -moz-transform-origin:85px 110px;
    -ms-transform-origin:85px 110px;
     -o-transform-origin:85px 110px;
        transform-origin:85px 110px;
}


/* bird */
.image-wrap .bird-bg{
background:url(http://pencilscoop.com/public/uploads/demos/animated-image-effect/demo/images/bird-bg.jpg) no-repeat center center;
/*background-size*/
-webkit-background-size:contain;
   -moz-background-size:contain;
     -o-background-size:contain;
        background-size:contain;
width:100%;
height:650px;
}
.image-wrap .bird-base{
background:url(http://pencilscoop.com/public/uploads/demos/animated-image-effect/demo/images/bird-base.png) no-repeat center center;
/*background-size*/
-webkit-background-size:contain;
   -moz-background-size:contain;
     -o-background-size:contain;
        background-size:contain;
position:absolute;
width:258px;
height:323px;
left:570px;
top:96px;
}
.image-wrap .bird-wing{
background:url(http://pencilscoop.com/public/uploads/demos/animated-image-effect/demo/images/wing.png) no-repeat center center;
/*background-size*/
-webkit-background-size:contain;
   -moz-background-size:contain;
     -o-background-size:contain;
        background-size:contain;
position:absolute;
width:204px;
height:204px;
left:569px;
top:208px;
/*animation*/
-webkit-animation:wing 90s infinite ease;
   -moz-animation:wing 90s infinite ease;
    -ms-animation:wing 90s infinite ease;
     -o-animation:wing 90s infinite ease;
        animation:wing 90s infinite ease;
/*transform-origin*/
-webkit-transform-origin:173px 55px;
   -moz-transform-origin:173px 55px;
    -ms-transform-origin:173px 55px;
     -o-transform-origin:173px 55px;
        transform-origin:173px 55px;
}
.image-wrap .bird-beak{
background:url(http://pencilscoop.com/public/uploads/demos/animated-image-effect/demo/images/beak.png) no-repeat center center;
/*background-size*/
-webkit-background-size:contain;
   -moz-background-size:contain;
     -o-background-size:contain;
        background-size:contain;
position:absolute;
width:85px;
height:300px;
left:741px;
top:56px;
/*animation*/
-webkit-animation:beak 90s infinite ease;
   -moz-animation:beak 90s infinite ease;
    -ms-animation:beak 90s infinite ease;
     -o-animation:beak 90s infinite ease;
        animation:beak 90s infinite ease;
/*transform-origin*/
-webkit-transform-origin:24px 88px;
   -moz-transform-origin:24px 88px;
    -ms-transform-origin:24px 88px;
     -o-transform-origin:24px 88px;
        transform-origin:24px 88px;
}


/* SkateBoard */
.image-wrap .skate-background{
background:url(http://pencilscoop.com/public/uploads/demos/animated-image-effect/demo/images/background.jpg) no-repeat center center;
width:100%;
height:650px;
/*background-size*/
-webkit-background-size:contain;
   -moz-background-size:contain;
     -o-background-size:contain;
        background-size:contain;
/*animation*/
-webkit-animation:camera 160s infinite linear;
   -moz-animation:camera 160s infinite linear;
    -ms-animation:camera 160s infinite linear;
     -o-animation:camera 160s infinite linear;
        animation:camera 160s infinite linear;
}
.image-wrap .skateboarder{
background:url(http://pencilscoop.com/public/uploads/demos/animated-image-effect/demo/images/skateboarder.png) no-repeat center center;
/*background-size*/
-webkit-background-size:contain;
   -moz-background-size:contain;
     -o-background-size:contain;
        background-size:contain;
position:absolute;
width:183px;
height:314px;
left:250px;
top:75px;
/*animation*/
-webkit-animation:boarder 160s infinite linear;
   -moz-animation:boarder 160s infinite linear;
    -ms-animation:boarder 160s infinite linear;
     -o-animation:boarder 160s infinite linear;
        animation:boarder 160s infinite linear;
}
.image-wrap .skateboard{
background:url(http://pencilscoop.com/public/uploads/demos/animated-image-effect/demo/images/skateboard.png) no-repeat center center;
/*background-size*/
-webkit-background-size:contain;
   -moz-background-size:contain;
     -o-background-size:contain;
        background-size:contain;
position:absolute;
width:99px;
height:77px;
left:262px;
top:315px;
/*animation*/
-webkit-animation:board 160s infinite linear;
   -moz-animation:board 160s infinite linear;
    -ms-animation:board 160s infinite linear;
     -o-animation:board 160s infinite linear;
        animation:board 160s infinite linear;
}


/* tea */
.image-wrap .tea-bg{
background:url(http://pencilscoop.com/public/uploads/demos/animated-image-effect/demo/images/tea-bg.jpg) no-repeat center center;
/*background-size*/
-webkit-background-size:/*@@prefixmycss->No equivalent*/;
   -moz-background-size:contain;
     -o-background-size:/*@@prefixmycss->No equivalent*/;
        background-size:contain;
width:100%;
height:650px;
}
.image-wrap .steam1{
background:url(http://pencilscoop.com/public/uploads/demos/animated-image-effect/demo/images/steam1.png) no-repeat center center;
/*background-size*/
-webkit-background-size:/*@@prefixmycss->No equivalent*/;
   -moz-background-size:contain;
     -o-background-size:/*@@prefixmycss->No equivalent*/;
        background-size:contain;
position:absolute;
width:118px;
height:251px;
left:227px;
bottom:-37px;
/*animation*/
-webkit-animation:steam 20s infinite linear;
   -moz-animation:steam 20s infinite linear;
    -ms-animation:steam 20s infinite linear;
     -o-animation:steam 20s infinite linear;
        animation:steam 20s infinite linear;
}
.image-wrap .steam2{
background:url(http://pencilscoop.com/public/uploads/demos/animated-image-effect/demo/images/steam2.png) no-repeat center center;
/*background-size*/
-webkit-background-size:/*@@prefixmycss->No equivalent*/;
   -moz-background-size:contain;
     -o-background-size:/*@@prefixmycss->No equivalent*/;
        background-size:contain;
position:absolute;
width:174px;
height:352px;
left:184px;
bottom:-130px;
/*animation*/
-webkit-animation:steam 10s infinite linear 5s;
   -moz-animation:steam 10s infinite linear 5s;
    -ms-animation:steam 10s infinite linear 5s;
     -o-animation:steam 10s infinite linear 5s;
        animation:steam 10s infinite linear 5s;
}
.image-wrap .steam3{
background:url(http://pencilscoop.com/public/uploads/demos/animated-image-effect/demo/images/steam3.png) no-repeat center center;
/*background-size*/
-webkit-background-size:/*@@prefixmycss->No equivalent*/;
   -moz-background-size:contain;
     -o-background-size:/*@@prefixmycss->No equivalent*/;
        background-size:contain;
position:absolute;
width:165px;
height:328px;
left:428px;
top:259px;
/*animation*/
-webkit-animation:steam2 20s infinite linear;
   -moz-animation:steam2 20s infinite linear;
    -ms-animation:steam2 20s infinite linear;
     -o-animation:steam2 20s infinite linear;
        animation:steam2 20s infinite linear;
}
.image-wrap .steam4{
background:url(http://pencilscoop.com/public/uploads/demos/animated-image-effect/demo/images/steam2.png) no-repeat center center;
/*background-size*/
-webkit-background-size:/*@@prefixmycss->No equivalent*/;
   -moz-background-size:contain;
     -o-background-size:/*@@prefixmycss->No equivalent*/;
        background-size:contain;
position:absolute;
width:174px;
height:352px;
left:388px;
top:259px;
/*animation*/
-webkit-animation:steam 10s infinite linear 5s;
   -moz-animation:steam 10s infinite linear 5s;
    -ms-animation:steam 10s infinite linear 5s;
     -o-animation:steam 10s infinite linear 5s;
        animation:steam 10s infinite linear 5s;
}
.image-wrap .tea-mask{
background:url(http://pencilscoop.com/public/uploads/demos/animated-image-effect/demo/images/tea-mask.png) no-repeat center center;
/*background-size*/
-webkit-background-size:/*@@prefixmycss->No equivalent*/;
   -moz-background-size:cover;
     -o-background-size:/*@@prefixmycss->No equivalent*/;
        background-size:cover;
position:absolute;
width:960px;
height:650px;
left:0;
bottom:4px;
}


/* Car */
.image-wrap .car-bg{
background:url(http://pencilscoop.com/public/uploads/demos/animated-image-effect/demo/images/car-bg.jpg) no-repeat center center;
width:100%;
height:650px;
/*background-size*/
-webkit-background-size:cover;
   -moz-background-size:cover;
     -o-background-size:cover;
        background-size:cover;
/*animation*/
-webkit-animation:camera-pan 90s infinite linear;
   -moz-animation:camera-pan 90s infinite linear;
    -ms-animation:camera-pan 90s infinite linear;
     -o-animation:camera-pan 90s infinite linear;
        animation:camera-pan 90s infinite linear;
}
.image-wrap .car1{
background:url(http://pencilscoop.com/public/uploads/demos/animated-image-effect/demo/images/car1.png) no-repeat center center;
/*background-size*/
-webkit-background-size:contain;
   -moz-background-size:contain;
     -o-background-size:contain;
        background-size:contain;
position:absolute;
width:155px;
height:75px;
left:52px;
top:273px;
/*animation*/
-webkit-animation:car1 180s infinite linear;
   -moz-animation:car1 180s infinite linear;
    -ms-animation:car1 180s infinite linear;
     -o-animation:car1 180s infinite linear;
        animation:car1 180s infinite linear;
}
.image-wrap .car2{
background:url(http://pencilscoop.com/public/uploads/demos/animated-image-effect/demo/images/car2.png) no-repeat center center;
/*background-size*/
-webkit-background-size:contain;
   -moz-background-size:contain;
     -o-background-size:contain;
        background-size:contain;
position:absolute;
width:235px;
height:75px;
left:129px;
top:275px;
/*animation*/
-webkit-animation:car 180s infinite linear;
   -moz-animation:car 180s infinite linear;
    -ms-animation:car 180s infinite linear;
     -o-animation:car 180s infinite linear;
        animation:car 180s infinite linear;
}


/* Windmill Small */
.image-wrap.small .windmill-background{
background:url(http://pencilscoop.com/public/uploads/demos/animated-image-effect/demo/images/wind-bg.jpg) no-repeat;
/*background-size*/
-webkit-background-size:cover;
   -moz-background-size:cover;
     -o-background-size:cover;
        background-size:cover;
width:100%;
height:650px;
position:relative;
top:0;
}
.image-wrap.small .mill1{
background:url(http://pencilscoop.com/public/uploads/demos/animated-image-effect/demo/images/mill1.png) no-repeat center center;
/*background-size*/
-webkit-background-size:contain;
   -moz-background-size:contain;
     -o-background-size:contain;
        background-size:contain;
position:absolute;
width:136px;
height:209px;
left:224px;
top:116px;
/*animation*/
-webkit-animation:spin 90s infinite linear;
   -moz-animation:spin 90s infinite linear;
    -ms-animation:spin 90s infinite linear;
     -o-animation:spin 90s infinite linear;
        animation:spin 90s infinite linear;
/*transform-origin*/
-webkit-transform-origin:81px 94px;
   -moz-transform-origin:81px 94px;
    -ms-transform-origin:81px 94px;
     -o-transform-origin:81px 94px;
        transform-origin:81px 94px;
}
.image-wrap.small .mill2{
background:url(http://pencilscoop.com/public/uploads/demos/animated-image-effect/demo/images/mill2.png) no-repeat center center;
/*background-size*/
-webkit-background-size:contain;
   -moz-background-size:contain;
     -o-background-size:contain;
        background-size:contain;
position:absolute;
width:72px;
height:209px;
left:553px;
top:146px;
/*animation*/
-webkit-animation:spin 60s infinite linear;
   -moz-animation:spin 60s infinite linear;
    -ms-animation:spin 60s infinite linear;
     -o-animation:spin 60s infinite linear;
        animation:spin 60s infinite linear;
/*transform-origin*/
-webkit-transform-origin:25px 107px;
   -moz-transform-origin:25px 107px;
    -ms-transform-origin:25px 107px;
     -o-transform-origin:25px 107px;
        transform-origin:25px 107px;
}


@-webkit-keyframes steam {
      0% {opacity:0;-webkit-transform:translateY(0) }
     70% {opacity:1;-webkit-transform:translateY(-200px)}
    100% {opacity:0;-webkit-transform:translateY(-250px)}
}
@-webkit-keyframes steam2 {
      0% {opacity:0;-webkit-transform:translateY(0) translateX(0) }
     70% {opacity:1;-webkit-transform:translateY(-200px) translateX(-30px) }
    100% {opacity:0;-webkit-transform:translateY(-250px) translateX(-35px)}
}
@-webkit-keyframes car{
0%, 100% {-webkit-transform: translateX(0) translateY(0) }
     50% {-webkit-transform: translateX(-300px) translateY(40px) scale(2.5, 2.5) }
}
@-webkit-keyframes car1{
0%, 100% {-webkit-transform: translateX(0) translateY(0) }
     50% {-webkit-transform: translateX(-350px) translateY(20px) scale(2.5, 2.5) }
}
@-webkit-keyframes wing{
     0%, 100%  {-webkit-transform: rotateZ(0deg)}
     50% {-webkit-transform: rotateZ(15deg)}
}
@-webkit-keyframes beak{
     0%, 100%  {-webkit-transform: rotateZ(0deg)}
     50% {-webkit-transform: rotateZ(-35deg)}
}
@-webkit-keyframes spin {
     0%  {-webkit-transform: rotateZ(0deg)}
    100% {-webkit-transform: rotateZ(360deg)}
}
@-webkit-keyframes camera {
0%, 100% {-webkit-transform: scale(1.3,1.3)}
     50% {-webkit-transform: scale(1,1)}
}
@-webkit-keyframes boarder {
0%, 100% {-webkit-transform: translateY(0px)}
     50% {-webkit-transform: translateY(-60px) translateX(150px) scale(1.1,1.1)}
}
@-webkit-keyframes board {
0%, 100% {-webkit-transform: translateY(0px) rotateX(0) rotateY(0deg)}
     50% {-webkit-transform: translateY(-30px) translateX(150px) rotateX(-50deg) rotateY(60deg) scale(1.1,1.1) rotateZ(90deg)}
}

@-moz-keyframes steam {
      0% {opacity:0;-moz-transform:translateY(0) }
     70% {opacity:1;-moz-transform:translateY(-200px)}
    100% {opacity:0;-moz-transform:translateY(-250px)}
}
@-moz-keyframes steam2 {
      0% {opacity:0;-moz-transform:translateY(0) translateX(0) }
     70% {opacity:1;-moz-transform:translateY(-200px) translateX(-30px) }
    100% {opacity:0;-moz-transform:translateY(-250px) translateX(-35px)}
}
@-moz-keyframes car{
0%, 100% {-moz-transform: translateX(0) translateY(0) }
     50% {-moz-transform: translateX(-300px) translateY(40px) scale(2.5, 2.5) }
}
@-moz-keyframes car1{
0%, 100% {-moz-transform: translateX(0) translateY(0) }
     50% {-moz-transform: translateX(-350px) translateY(20px) scale(2.5, 2.5) }
}
@-moz-keyframes wing{
     0%, 100%  {-moz-transform: rotateZ(0deg)}
     50% {-moz-transform: rotateZ(15deg)}
}
@-moz-keyframes beak{
     0%, 100%  {-moz-transform: rotateZ(0deg)}
     50% {-moz-transform: rotateZ(-35deg)}
}
@-moz-keyframes spin {
     0%  {-moz-transform: rotateZ(0deg)}
    100% {-moz-transform: rotateZ(360deg)}
}
@-moz-keyframes camera {
0%, 100% {-moz-transform: scale(1.3,1.3)}
     50% {-moz-transform: scale(1,1)}
}
@-moz-keyframes boarder {
0%, 100% {-moz-transform: translateY(0px)}
     50% {-moz-transform: translateY(-60px) translateX(150px) scale(1.1,1.1)}
}
@-moz-keyframes board {
0%, 100% {-moz-transform: translateY(0px) rotateX(0) rotateY(0deg)}
     50% {-moz-transform: translateY(-30px) translateX(150px) rotateX(-50deg) rotateY(60deg) scale(1.1,1.1) rotateZ(90deg)}
}

@keyframes steam {
      0% {opacity:0;transform:translateY(0) }
     70% {opacity:1;transform:translateY(-200px)}
    100% {opacity:0;transform:translateY(-250px)}
}
@keyframes steam2 {
      0% {opacity:0;transform:translateY(0) translateX(0) }
     70% {opacity:1;transform:translateY(-200px) translateX(-30px) }
    100% {opacity:0;transform:translateY(-250px) translateX(-35px)}
}
@keyframes car{
0%, 100% {transform: translateX(0) translateY(0) }
     50% {transform: translateX(-300px) translateY(40px) scale(2.5, 2.5) }
}
@keyframes car1{
0%, 100% {transform: translateX(0) translateY(0) }
     50% {transform: translateX(-350px) translateY(20px) scale(2.5, 2.5) }
}
@keyframes wing{
     0%, 100%  {transform: rotateZ(0deg)}
     50% {transform: rotateZ(15deg)}
}
@keyframes beak{
     0%, 100%  {transform: rotateZ(0deg)}
     50% {transform: rotateZ(-35deg)}
}
@keyframes spin {
     0%  {transform: rotateZ(0deg)}
    100% {transform: rotateZ(360deg)}
}
@keyframes camera {
0%, 100% {transform: scale(1.3,1.3)}
     50% {transform: scale(1,1)}
}
@keyframes boarder {
0%, 100% {transform: translateY(0px)}
     50% {transform: translateY(-60px) translateX(150px) scale(1.1,1.1)}
}
@keyframes board {
0%, 100% {transform: translateY(0px) rotateX(0) rotateY(0deg)}
     50% {transform: translateY(-30px) translateX(150px) rotateX(-50deg) rotateY(60deg) scale(1.1,1.1) rotateZ(90deg)}
}

This Pen is owned by Joe Howard on CodePen.

See more by @jhoward on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.