Question

目前我正在使用css动画将图像从屏幕的左侧移动到右侧。这没有问题。

我想要做的是让动画在某个高度开始，然后当它动画到屏幕的另一侧时，我希望高度逐渐增加。所以基本上它会向上移动一个角度。我不知道如何实现这一目标。我是否设置了几个关键帧并更改了屏幕位置？

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

Answer 1

你可以这样使用transform: scale();：

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

Answer 2

http://jsfiddle.net/cZ9wP/

只需添加top。

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

CSS动画 - 从左到右动画图像，沿着成角度的路径增加高度

2 个答案: