kostenloser Webspace werbefrei: lima-city

Probleme mit einer css-Animation

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

1. Autor dieses Themas

   sonok

   Moderator

   sonok hat kostenlosen Webspace.

   14:10, 4.5.2010

   Hallo!
   
   Ich fummel gerade ein wenig mit dem CSS3-Zeug herum und hab nun ein kleines Animationsdingens gezaubert; leider rutschten währende der animation die ggf rechts stehenden texte immer um ein paar Pixel nach links und nach der Animation wieder nach rechts. Und ich finde irgendwie nicht den Fehler - also das soll ohne diese kleine Verschiebung vonstatten gehen.
   
   Vielleicht kann mal jemand anders drüberschauen? Danke im Voraus
   
   Hier der Link - http://css3test.sonok.de/index_.php#b
   
   Das geht meines Wissens nur mit einem Webkitfähigen Browser wie Safari oder Chrome.
   Wenn Ihr Firefox oder Ie oder Opera oä nutzt dann bitte nicht fragen wo da was animiertes ist - danke.
   
   edit - alles nötige ist im Quelltext, darum unterlass ich hier mal das reinkopieren vom Code
   
   Beitrag zuletzt geändert: 4.5.2010 14:12:44 von sonok

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

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

3. nemoinho

   

   nemoinho hat kostenlosen Webspace.

   16:50, 5.5.2010

   ganz abschalten konnte ich das verhalten nicht, immernoch verschiebt es sich um 1px, aber als vorläufige Verbesserung kannst du schonmal diese Regeln bearbeiten, einfach nur mein code einsetzen, statt der alten Regeln:

   .hauptmenue h2 + div {
   	width:16px;
   	visibility:hidden;
   	overflow: hidden;
   	-webkit-transition: width 253ms ease-in;
   	white-space:nowrap;
   	margin-top:40px;
   }
   .hauptmenue :target h2 + div {
   	visibility:visible;
   	width: 700px;
   	white-space:nowrap;
   	margin-top:75px;
   }

   
   ich hab einfach die Breite der links auf 16px gesetzt, damit sind sie auch so breit, wie die Schrift drin "hoch" ist, außerdem hab ich die Sichtbarkeit so eingestellt, dass man die Reste nicht mehr sieht, falls sie auch nicht gesehen werden sollen.

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

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

Dir gefällt dieses Thema?