CSS animation - Animieren Bild von Links nach rechts und Zunehmender Höhe entlang einer abgewinkelten Pfad

Im moment bin ich mit css animation, um ein Bild von der linken zu der rechten Seite des Bildschirms. Dies funktioniert ohne Problem.

Was ich tun möchte, ist eigentlich die animation zu starten, in einer bestimmten Höhe dann, wie es animiert auf die andere Seite des Bildschirms, ich möchte die Höhe schrittweise zu erhöhen. Also im Grunde, es bewegt sich nach oben auf einem Winkel. Ich bin mir nicht sicher, wie Sie diese erreichen. Setze ich mehrere key-frames und ändern Sie die position auf dem Bildschirm da?

CSS

/* This is the controls for Santas sledge*/
.santa {
    width: 1000px;
    position: absolute;
    top: -15%;
    left: -75%;
}

/* This is the controls for Santas sledge*/

.santa {
    -webkit-animation: santa-move 1s 1s ease-out forwards;

    animation-duration: 26s;    
    -webkit-animation-duration: 26s;
}

@-webkit-keyframes santa-move {
        100% { left: 100%; }
}
  • Können Sie fügen Sie ein Geige?
InformationsquelleAutor Dano007 | 2013-11-25
  1. 2

    http://jsfiddle.net/cZ9wP/

    Fügen Sie einfach top.

    @-webkit-keyframes santa-move {
    100% { left: 100%; top: 50%; }
}
    InformationsquelleAutor bjb568
  2. 4

    Könnten Sie transform: scale(); etwa so:

    Beispiel

     .santa {
    width: 1000px;
    position: absolute;
    top: 15%;
    left: -75%;
    transform-origin: bottom left;
}

 .santa {
    -webkit-animation: santa-move 1s 1s ease-out forwards;
    animation: santa-move 1s 1s ease-out forwards;
    -webkit-animation-duration: 26s;
    animation-duration: 26s;
}
@-webkit-keyframes santa-move {
    100% {
        left: 100%;
        transform: scale(2);
    }
}
@keyframes santa-move {
    100% {
        left:100%;
        transform: scale(2);
    }
}
    InformationsquelleAutor apaul
Schreibe einen Kommentar