css animation not limited to container?

Question

I’ve created a css animation, and set the container to: overflow: hidden. The animated bits extend outside of the container, and cause it to resize; how do I force these to display only within the container element (specifically top/bottom limits)?

You can see it & code here: http://codepen.io/Loku/pen/wGqYdq

Any help is certainly appreciated.

HTML:

    <section class="show-mobile">
      <img class="show-mobile-1x" src="mystery-041116-s.png">
    </section>

    <section class="show-mobile">
      <img class="show-mobile-2x" src="mystery-041116-s-2x.png">
    </section>

    <section class="container hide-mobile">
      <div class="title">
        <h1>h1 Headline</h1>
        <h2>h2 Subhead</h2>
      </div>
    <!-- COUPON -->
      <div class="layer" id="coupon">
      </div>
    <!-- BARE STEM -->
      <div class="layer" id="flowerStem">
      </div>
    <!-- FLOWERS BACKGROUND -->
      <div id="bgContainer">
        <div class="layer" id="bgFlowers"></div>
      </div>
    <!-- FLYING SEEDS -->
      <div class="layer" id="layer3">
      </div>
      <div class="sprite" id="tuft01">
        <div class="seed01"></div>
      </div>
      <div class="sprite" id="tuft02">
        <div class="seed02"></div>
      </div>
      <div class="sprite" id="tuft03">
        <div class="seed03"></div>
      </div>
      <div class="sprite" id="tuft04">
        <div class="seed04"></div>
      </div>
      <div class="sprite" id="tuft05">
        <div class="seed05"></div>
      </div>
      <div class="sprite" id="tuft06">
        <div class="seed06"></div>
      </div>
      <div class="sprite" id="tuft07">
        <div class="seed07"></div>
      </div>
      <div class="sprite" id="tuft08">
        <div class="seed08"></div>
      </div>
      <div class="sprite" id="tuft09">
        <div class="seed09"></div>
      </div>
      <div class="sprite" id="tuft10">
        <div class="seed07"></div>
      </div>                     
      <div class="sprite" id="tuft11">
        <div class="seed09"></div>
      </div>
      <div class="sprite" id="tuft12">
        <div class="seed09"></div>
      </div>
    </section>

CSS:

    /* MOBILE 1x */
    @media (max-width: 767px) { 
      .show-mobile {
        display: block;
      }
      .show-mobile-1x {
        display: block;
      }
      .show-mobile-2x {
        display: none;
      }
      .hide-mobile {
        display: none;
      }
    }

    /* MOBILE RETINA 2x */
    @media
    (-webkit-min-device-pixel-ratio: 2)      and (max-width: 767px),
    (   min--moz-device-pixel-ratio: 2)      and (max-width: 767px),
    (     -o-min-device-pixel-ratio: 2/1)    and (max-width: 767px),
    (        min-device-pixel-ratio: 2)      and (max-width: 767px),
    (                min-resolution: 192dpi) and (max-width: 767px),
    (                min-resolution: 2dppx)  and (max-width: 767px) { 
      .show-mobile {
        display: block;
      }
      .show-mobile-1x {
        display: none;
      }
      .show-mobile-2x {
        display: block;
      }
      .hide-mobile {
        display: none;
      }
    }

    /* TABLET & LARGER */
    @media (min-width: 768px) { 
      .show-mobile {
        display: none;
      }
      .show-mobile-1x {
        display: none;
      }
      .show-mobile-2x {
        display: none;
      }
      .hide-mobile {
        display: block;
      }

      body { 
      /* FOR DEV ONLY */
        background: green;
      }

      .container {
        max-height: 650px;
        overflow: hidden;
        width: 100%;
        background: #aae2d0;
        padding: 1em;
        max-resolution: 1em;
        postition: absolute;
        text-align: center;
        margin: 0 auto;
      }

      .title {
        z-index: 100 !important;
        position: relative;
      }

      h1 {
        font-family: gotham, sans;
        color: #fff;
        font-size: 4em;
        text-transform: uppercase;
        text-align: center;
        letter-spacing: .15em;
        line-height: .25em;
        font-weight: 500;
        /*   text-shadow: 1px 1px #54c5a1; */
      }

      h2 {
        font-family: gotham, sans;
        color: #3a3c3c;
        font-size: 4em;
        text-transform: uppercase;
        text-align: center;
        letter-spacing: .15em;
        line-height: .25em;
        font-weight: 500;
      }


      /* Layers */

      .layer {
        position: relative;
      }

      #coupon {
        height: 345px;
        width: 599px;
        background-color: #a599c1;
        position: relative;
        margin: auto;
        float: none;
        z-index: 50;
        transform: rotate(-5deg);
      }

      #coupon p.disclaimer {
        position: relative;
        top: 306px;
        text-align: center;
        font-family: gotham-book, sans;
        color: #fff;
        font-size: .75em;
      }

      #flowerStem {
        height: 327px;
        width: 154px;
        background: url("https://www.dropbox.com/s/dtbt35qc52htjfn/flowerStem.png?raw=1");
        z-index: 51;
        postition: relative;
        float: none;
        margin: auto;
        left: -250px;
        bottom: 50px;
        animation-name: stem;
        animation-duration: 6s;
        animation-iteration-count: infinite;
        animation-direction: alternate;
        animation-timing-function: ease-in-out;
        animation-delay: 0s;
        transform-origin: 85% 100%;
      }

      @keyframes stem {
        0% {
          transform: rotate(-2deg);
        }
        100% {
          transform: rotate(1deg);
        }
      }

      #bgContainer {
        position: relative;
        float: left;
        width: 100%;
        margin: -200px auto;
      }

      #bgFlowers {
        position: relative;
        height: 520px;
        width: 1091px;
        background: url("https://www.dropbox.com/s/rjeo8m4uguuzcom/bgFlowers.png?raw=1");
        float: none;
        margin: -425px auto;
        z-index: 10;
        text-align: center;
      }


      /* Sprites */

      .sprite {
        width: auto;
        height: auto;
        z-index: 200;
        position: absolute;
        float: none;
      }

      #tuft01 {
        left: -100px;
        top: 0px;
        z-index: 11;
        animation-name: tuft01;
        animation-duration: 25s;
        animation-iteration-count: infinite;
        animation-timing-function: ease-in;
        animation-delay: 0s;
      }

      @keyframes tuft01 {
        0% {
          transform: translate(-100px, 250px);
        }
        100% {
          transform: translate(2600px, 850px);
        }
      }

      #tuft02 {
        left: -100px;
        top: 0px;
        z-index: 21;
        animation-name: tuft02;
        animation-duration: 22s;
        animation-iteration-count: infinite;
        animation-timing-function: ease-in-out;
        animation-delay: 2.5s;
      }

      @keyframes tuft02 {
        0% {
          transform: translate(-100px, 0);
        }
        100% {
          transform: translate(2600px, 700px);
        }
      }

      #tuft03 {
        left: -100px;
        top: 0px;
        z-index: 11;
        animation-name: tuft03;
        animation-duration: 24.5s;
        animation-iteration-count: infinite;
        animation-timing-function: ease-in-out;
        animation-delay: .3s;
      }

      @keyframes tuft03 {
        0% {
          transform: translate(-100px, 500px);
        }
        100% {
          transform: translate(2600px, 300px);
        }
      }

      #tuft04 {
        left: -100px;
        top: 0px;
        z-index: 5;
        animation-name: tuft04;
        animation-duration: 32.5s;
        animation-iteration-count: infinite;
        animation-timing-function: ease-in-out;
        animation-delay: 2s;
      }

      @keyframes tuft04 {
        0% {
          transform: translate(-100px, 50px);
        }
        100% {
          transform: translate(2600px, 250px);
        }
      }

      #tuft05 {
        left: -100px;
        top: 0px;
        z-index: 1;
        animation-name: tuft05;
        animation-duration: 36s;
        animation-iteration-count: infinite;
        animation-timing-function: ease-in-out;
        animation-delay: 5s;
      }

      @keyframes tuft05 {
        0% {
          transform: translate(-100px, 650px);
        }
        100% {
          transform: translate(2600px, 480px);
        }
      }

      #tuft06 {
        left: -100px;
        top: 0px;
        z-index: 5;
        animation-name: tuft06;
        animation-duration: 38.9s;
        animation-iteration-count: infinite;
        animation-timing-function: ease-in-out;
        animation-delay: 9.5s;
      }

      @keyframes tuft06 {
        0% {
          transform: translate(-100px, 550px);
        }
        100% {
          transform: translate(2600px, 180px);
        }
      }

      #tuft07 {
        left: -100px;
        top: 0px;
        z-index: 5;
        animation-name: tuft07;
        animation-duration: 36.6s;
        animation-iteration-count: infinite;
        animation-timing-function: ease-in;
        animation-delay: 4s;
      }

      @keyframes tuft07 {
        0% {
          transform: translate(-100px, 225px);
        }
        100% {
          transform: translate(2600px, 360px);
        }
      }

      #tuft08 {
        left: -100px;
        top: 0px;
        z-index: 5;
        transform: scaleX(-1);
        animation-name: tuft08;
        animation-duration: 36s;
        animation-iteration-count: infinite;
        animation-timing-function: ease-in;
        animation-delay: 0s;
      }

      @keyframes tuft08 {
        0% {
          transform: translate(-100px, 0px);
        }
        100% {
          transform: translate(2600px, 275px);
        }
      }

      #tuft09 {
        left: -100px;
        top: 0px;
        z-index: 5;
        animation-name: tuft09;
        animation-duration: 38s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
        animation-delay: 0s;
      }

      @keyframes tuft09 {
        0% {
          transform: translate(-100px, 340px);
        }
        100% {
          transform: translate(2600px, 540px);
        }
      }

      #tuft10 {
        left: -100px;
        top: 0px;
        z-index: 5;
        animation-name: tuft10;
        animation-duration: 45s;
        animation-iteration-count: infinite;
        animation-timing-function: ease-in;
        animation-delay: 5s;
      }

      @keyframes tuft10 {
        0% {
          transform: translate(-25px, 550px);
        }
        100% {
          transform: translate(2600px, 230px);
        }
      }

      #tuft11 {
        left: -100px;
        top: 0px;
        z-index: 5;
        transform: scaleX(-1);
        animation-name: tuft11;
        animation-duration: 33s;
        animation-iteration-count: infinite;
        animation-timing-function: ease-in;
        animation-delay: 8s;
      }

      @keyframes tuft11 {
        0% {
          transform: translate(-10px, 100px);
        }
        100% {
          transform: translate(2600px, 250px);
        }
      }

      #tuft12 {
        left: -100px;
        top: 0px;
        z-index: 5;
        animation-name: tuft12;
        animation-duration: 25s;
        animation-iteration-count: infinite;
        animation-timing-function: ease-in;
        animation-delay: .0s;
      }

      @keyframes tuft12 {
        0% {
          transform: translate(-100px, 0);
        }
        100% {
          transform: translate(2600px, -100px);
        }
      }

      #tuft13 {
        left: -100px;
        top: 0px;
        z-index: 5;
        animation-name: tuft13;
        animation-duration: 25s;
        animation-iteration-count: infinite;
        animation-timing-function: ease-in;
        animation-delay: .0s;
      }

      @keyframes tuft13 {
        0% {
          transform: translate(-100px, 0);
        }
        100% {
          transform: translate(2600px, -100px);
        }
      }

      #tuft14 {
        left: -100px;
        top: 0px;
        z-index: 5;
        transform: scaleX(-1);
        animation-name: tuft14;
        animation-duration: 25s;
        animation-iteration-count: infinite;
        animation-timing-function: ease-in;
        animation-delay: .0s;
      }

      @keyframes tuft14 {
        0% {
          transform: translate(-100px, 0);
        }
        100% {
          transform: translate(2600px, -100px);
        }
      }

      #tuft15 {
        left: -100px;
        top: 0px;
        z-index: 5;
        animation-name: tuft15;
        animation-duration: 42s;
        animation-iteration-count: infinite;
        animation-timing-function: ease-in;
        animation-delay: 5s;
      }

      @keyframes tuft15 {
        0% {
          transform: translate(-10px, 175px);
        }
        100% {
          transform: translate(2600px, 395px);
        }
      }

      #tuft16 {
        left: -100px;
        top: 0px;
        z-index: 5;
        transform: scaleX(-1);
        animation-name: tuft16;
        animation-duration: 25s;
        animation-iteration-count: infinite;
        animation-timing-function: ease-in;
        animation-delay: .0s;
      }

      @keyframes tuft16 {
        0% {
          transform: translate(-100px, 0);
        }
        100% {
          transform: translate(2600px, -100px);
        }
      }

      .seed01 {
        width: 21px;
        height: 188px;
        background-image: url("https://www.dropbox.com/s/xljm6ihx9r4znk0/seed01.png?raw=1");
        margin: auto;
        float: none;
        animation-name: seed01;
        animation-duration: 3.2s;
        animation-direction: alternate;
        animation-iteration-count: infinite;
        animation-timing-function: ease-in-out;
        animation-delay: .5s;
        transform: rotate(-15deg);
      }

      @keyframes seed01 {
        0% {
          transform: rotate(-18deg);
        }
        100% {
          transform: rotate(15deg);
        }
      }

      .seed02 {
        width: 22px;
        height: 136px;
        background-image: url("https://www.dropbox.com/s/k7zrlwrf3ndg558/seed02.png?raw=1");
        margin: auto;
        float: none;
        animation-name: seed02;
        animation-duration: 5s;
        animation-direction: alternate;
        animation-iteration-count: infinite;
        animation-timing-function: cubic-bezier(.66, 0, .66, .66);
        animation-delay: .2s;
      }

      @keyframes seed02 {
        0% {
          transform: rotate(-16deg);
        }
        100% {
          transform: rotate(26deg);
        }
      }

      .seed03 {
        width: 44px;
        height: 187px;
        background-image: url("https://www.dropbox.com/s/gbsmes8ra26m6dn/seed03.png?raw=1");
        margin: auto;
        float: none;
        animation-name: seed03;
        animation-duration: 2.7s;
        animation-direction: alternate;
        animation-iteration-count: infinite;
        animation-timing-function: ease-in-out;
        animation-delay: .75s;
        transform: rotate(-5deg);
      }

      @keyframes seed03 {
        0% {
          transform: rotate(-16deg);
        }
        100% {
          transform: rotate(14deg);
        }
      }

      .seed04 {
        width: 13px;
        height: 123px;
        background-image: url("https://www.dropbox.com/s/7qifl4egitgkikr/seed04.png?raw=1");
        margin: auto;
        float: none;
        animation-name: seed04;
        animation-duration: 3.6s;
        animation-direction: alternate;
        animation-iteration-count: infinite;
        animation-timing-function: ease-in-out;
        animation-delay: .75s;
        transform: rotate(45deg);
      }

      @keyframes seed04 {
        0% {
          transform: rotate(-12deg);
        }
        100% {
          transform: rotate(16deg);
        }
      }

      .seed05 {
        width: 13px;
        height: 89px;
        background-image: url("https://www.dropbox.com/s/hkasqkp272wprh3/seed05.png?raw=1");
        margin: auto;
        float: none;
        animation-name: seed05;
        animation-duration: 3s;
        animation-direction: alternate;
        animation-iteration-count: infinite;
        animation-timing-function: ease-in-out;
        animation-delay: .75s;
      }

      @keyframes seed05 {
        0% {
          transform: rotate(-15deg);
        }
        100% {
          transform: rotate(20deg);
        }
      }

      .seed06 {
        width: 13px;
        height: 89px;
        background-image: url("https://www.dropbox.com/s/4jwzu5wta9482wj/seed06.png?raw=1");
        margin: auto;
        float: none;
        animation-name: seed06;
        animation-duration: 3.2s;
        animation-direction: alternate;
        animation-iteration-count: infinite;
        animation-timing-function: ease-in-out;
        animation-delay: .75s;
        transform: rotate(45deg);
      }

      @keyframes seed06 {
        0% {
          transform: rotate(-17deg);
        }
        100% {
          transform: rotate(13deg);
        }
      }

      .seed07 {
        width: 5px;
        height: 41px;
        background-image: url("https://www.dropbox.com/s/lppua3emm927dph/seed07.png?raw=1");
        margin: auto;
        float: none;
        animation-name: seed07;
        animation-duration: 1.8s;
        animation-direction: alternate;
        animation-iteration-count: infinite;
        animation-timing-function: cubic-bezier(.66, 0, .66, .66);
        animation-delay: 0;
        transform: rotate(-45deg);
      }

      @keyframes seed07 {
        0% {
          transform: rotate(-16deg);
        }
        100% {
          transform: rotate(14deg);
        }
      }

      .seed08 {
        width: 6px;
        height: 44px;
        background-image: url("https://www.dropbox.com/s/fu1o5tptp7xy8uv/seed08.png?raw=1");
        margin: auto;
        float: none;
        animation-name: seed08;
        animation-duration: 2.8s;
        animation-direction: alternate;
        animation-iteration-count: infinite;
        animation-timing-function: cubic-bezier(.66, 0, .66, .66);
        animation-delay: .25;
        transform: rotate(-5deg);
      }

      @keyframes seed08 {
        0% {
          transform: rotate(-12deg);
        }
        100% {
          transform: rotate(15deg);
        }
      }

      .seed09 {
        width: 13px;
        height: 61px;
        background-image: url("https://www.dropbox.com/s/ulpl2px2igs865h/seed09.png?raw=1");
        margin: auto;
        float: none;
        animation-name: seed09;
        animation-duration: 3.2s;
        animation-direction: alternate;
        animation-iteration-count: infinite;
        animation-timing-function: ease-in-out;
        animation-delay: .75;
        /*   transform: rotate(-45deg); */
      }

      @keyframes seed09 {
        0% {
          transform: rotate(-12deg);
        }
        100% {
          transform: rotate(18deg);
        }
      }

    }

score 2 · Accepted Answer · edited May 23 '17 at 12:24

2

Setting your container class to position: relative makes the overflow: hidden work as expected.

Answers and discussion related to positioning and overflows can be found here: overflow: hidden not working

edited May 23 '17 at 12:24

Community

1
1

answered Apr 05 '16 at 17:53

Kieran Utz

36
2

My big fat fingers mistyped position. `position:relative` on the container fixed the issue. Thanks! – Loku Apr 05 '16 at 18:02

css animation not limited to container?

1 Answers1