[Javascript/CSS] Text Transition

...komplette Frage anzeigen

1 Antwort

Die Grafik kann nicht geladen werden aber ich vermute, du meinst so etwas hier:

.shrinkMove {
   -webkit-animation: 2s shrinkMoveAnimation; /* Animation wird aufgerufen, Dauer 2 Sekunden  /Chrome */
   -webkit-animation-fill-mode: forwards; /* Animation läuft vorwärts und stoppt am Ende / Chrome */
   animation: 2s shrinkMoveAnimation; /* Animation wird aufgerufen, Dauer 2 Sekunden / FF, Opera, IE */
   animation-fill-mode: forwards; /* Animation läuft vorwärts und stoppt am Ende / FF, Opera, IE */
}

/* Animation für Webkit-Browser z.B. Chrome */
@-webkit-keyframes shrinkMoveAnimation{
    0%{ font-size: 28pt;} /* Schriftgröße zu Beginn der Animation 10pt */
    50%{ font-size: 10pt; -webkit-transform: translate(0,0); } /* Bei 50% hat die Schrift die Endgröße erreicht (28pt) */
    /* Position des DIV's anpassen. Ich nutze hier nicht top oder left sondern translate, weil das besser für die Performance ist, wenn man viele Animationen auf der Seite hat. */
    100%{ font-size: 10pt; -webkit-transform: translate(400px,0); }
}

/* Animation für Firefox, IE, Opera */
@keyframes shrinkMoveAnimation{
    0%{ font-size: 28pt;}
    50%{ font-size: 10pt; transform: translate(0,0); }
    100%{ font-size: 10pt; transform: translate(400px,0); }
}

DEMO: http://fiddle.jshell.net/Pisi2012/V6ABJ/

Antwort bewerten Vielen Dank für Deine Bewertung
NightmareMuff 28.03.2014, 17:15

Hi, schonmal danke für deine Antwort. Grundsätzlich richtig geraten, allerdings wollte ich eigentlich dass der Text in der Mitte groß ist (geht ja einfach mit align=center o.ä.), dann kleiner wird und sich dann nach links bewegt. Ich kann die Grafik laden, vielleicht lade ich sie auf Push nochmal in kleinerer Auflösung hoch :D (hatte iwie ne Maße von knapp 12000 Pixel Breite x ca. 9000 Pixel Höhe, kp why...

Hier der neue Link: http://puu.sh/7MM95.png

0

Was möchtest Du wissen?