kostenloser Webspace werbefrei: lima-city


Probleme mit einer css-Animation

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    sonok

    Moderator Kostenloser Webspace von sonok

    sonok hat kostenlosen Webspace.

    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 :smile:

    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. 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?

Über lima-city

Login zum Webhosting ohne Werbung!