CSS 动画 - 从左到右为图像设置动画并沿倾斜路径增加高度答案

【问题标题】：CSS animation - Animating image left to right and increasing height along an angled pathCSS 动画 - 从左到右为图像设置动画并沿倾斜路径增加高度
【发布时间】：2013-11-26 04:35:32
【问题描述】：

目前我正在使用 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%; }
}

【问题讨论】：

你能加个fiddle吗？

标签： css css-animations

【解决方案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);
    }
}

【讨论】：

【解决方案2】：

http://jsfiddle.net/cZ9wP/

只需添加top。

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

【讨论】：