CODEWITHSUNDEEP
csscss-animations
Dano007
Dano007

Reputation: 1932

CSS animation - Animating image left to right and increasing height along an angled path

At the moment I'm using css animation to move an image from the left to the right of the screen. This works without issue.

What I want to do is actually have the animation start at a certain height then as it animates to the other side of the screen I want the height to gradually increase. So basically it moves upwards on a angle. I'm not sure how to achieve this. Do I set several key frames and change the screen position there?

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%; }
}

Upvotes: 0

Views: 12269

Answers (2)

apaul
apaul

Reputation: 16170

You could use transform: scale(); like so:

Working Example

 .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);
    }
}

Upvotes: 4

bjb568
bjb568

Reputation: 11498

http://jsfiddle.net/cZ9wP/

Just add top.

@-webkit-keyframes santa-move {
    100% { left: 100%; top: 50%; }
}

Upvotes: 2

Related Questions