kostenloser Webspace werbefrei: lima-city

mit css :leave?

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

1. Autor dieses Themas

   sbtim

   

   sbtim hat kostenlosen Webspace.

   11:43, 2.8.2011

   Hi,
   gibt es für css ein .Test:leave oder so
   hab mit css3 eine Animation gemacht
   

   <style type="text/css">
   .test {
   width: 200px;
   height: 200px;
   background-color: black;
   }
   .test:??? {
   -webkit-animation: T1l 3s linear;
   }
   .test:Hover {
   position: absolute;
   -webkit-animation: T1h 5s infinite;
   }
   @-webkit-keyframes T1h {
   0% { left: 10px; }
   50% { left: 200px; }
   100% { left: 11px; }
   }
   @-webkit-keyframes T1l {
   to { left: 10px; }
   }
   </style>

   
   wenn die Maus mitten in der Animation das Div verlässt dann sieht es nicht so toll aus.
   Kann mir jemand bitte eine Lösung geben.
   Sie kann sollte es aber nicht auch mit Javascript sein.
   
   Beitrag zuletzt geändert: 2.8.2011 12:27:34 von sbtim

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

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

3. nikcs-tipps

   

   nikcs-tipps hat kostenlosen Webspace.

   14:46, 6.11.2011

   Also ich hab da bei mir auch sowas gemacht, ist aber mit JavaScript.
   das ganze geht mit .mouseleave ich weiß nicht ob ich das von jQuery hab^^, aber ich glaub das is ins normale JavaScript auch integriert.
   
   $(document).ready(function(){
   $(".test").mouseleave(function(){
   $(".test").css("-webkit-animation","T1l 3s linear");
   });
   });
   
   ne andere Lösung kenne ich aber nicht.

4. snapshot9

   snapshot9 hat kostenlosen Webspace.

   15:52, 6.11.2011

   pack das

   -webkit-animation: T1l 3s linear;

   einfach mit in

   .test { ... }

   , das sollte sein, was du suchst.
   
   lg

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

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

Dir gefällt dieses Thema?