kostenloser Webspace werbefrei: lima-city

Bounce-Effekt mit CSS

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   rhyy

   rhyy hat kostenlosen Webspace.

   16:08, 16.2.2015

   Hallo zusammen,
   
   hat jemand eine Ahnung warum das nicht funktioniert?
   
   

   <div class="arrow-down bounce"></div>

   
   
   

   @include keyframes(bounce) {
   	0%, 20%, 50%, 80%, 100% {
       @include transform(translateY(0));
     }
   	40% {
       @include transform(translateY(-20px));
     }
   	60% {
       @include transform(translateY(-10px));
     }
   }
   
   .arrow-down {
       background: url('../images/arrowdown.png') no-repeat;
       width: 131px;
       height: 57px;
       position: fixed;
       bottom: 10px;
       left: 50%;
       margin-left: -65px;
   }
   
   .bounce {
     @include animation(bounce 2s infinite);
   }

   
   
   In Chrome und FF betrachtet, das Element bounced einfach nicht.

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

3. c143

   c143 hat kostenlosen Webspace.

   16:42, 16.2.2015

   Bei deiner Lösung fehlt allgemein noch der Support für ältere Browser, deshalb würde ich gleich etwas nehmen, dass funktioniert und noch besser ist, dieses Beispiel.
   
   Beitrag zuletzt geändert: 16.2.2015 16:43:44 von c143
4. Autor dieses Themas

   rhyy

   rhyy hat kostenlosen Webspace.

   20:05, 18.2.2015

   Danke hat funktioniert. Sieht Top aus mit meinen Werten! So wie gewünscht.

5. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?