CSS-Animation nicht auf Container beschränkt?

Ich habe eine CSS-Animation erstellt und den Container auf Folgendes gesetzt: overflow: hidden. Die animierten Bits erstrecken sich außerhalb des Containers und bewirken eine Größenänderung. Wie erzwinge ich, dass diese nur innerhalb des Containerelements angezeigt werden (speziell obere/untere Grenzwerte)?CSS-Animation nicht auf Container beschränkt?

Sie können es sehen & Code hier: http://codepen.io/Loku/pen/wGqYdq

Jede Hilfe sicherlich sehr geschätzt wird.

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

    }

Quelle

2016-04-05 Loku

Einstellen Containerklasse zu position: relative macht die overflow: hidden Arbeit wie erwartet. overflow: hidden not working Position

Quelle

2016-04-05 17:53:39

My big fat Finger vertippt:

Antworten und Diskussion zu Positionierung und Überläufe im Zusammenhang kann hier gefunden werden. "Position: relativ" auf dem Container hat das Problem behoben. Vielen Dank! – Loku

CSS-Animation nicht auf Container beschränkt?

Antwort

Verwandte Themen