使用CSS3动画在特定的50％时向不同方向移动

Question

我有一个简单的CSS动画，当时动画将图像从我的横幅画布（300x250）的左上角移动到右下角但是50％通过我需要开始向左下方移动然后100％完成将它向右移回右下角，但作为css动画的新手，不知道如何做到这一点。有谁知道这是否可行？

在这里做了一个小图：

例如：

＆＃13;

＆＃13;

.train-container {
	position: relative;
}

.train {
	position: absolute;
	top: -350px;
	left: -250px;
}

@keyframes moveTrain {
	0% {
		transform: translate(-185px,-159px);
	}
  	100% {
  		transform: translate(300px,250px);
  	}
}

.train-container {
	animation-duration: 30s;
	animation-fill-mode: forwards;
	backface-visibility: hidden;
	animation-name: moveTrain;
	position: absolute; 
}

.train-container {
	.train {
		transform: scale(0.65);
	}
}

＆＃13;

＆＃13;

＆＃13;

Answer 1

到目前为止，当您的动画工作时，您需要做的就是添加更多关键帧。

现在你的关键帧为0％和100％。再添加2个帧，其中33％和66％，并设置它们的位置。

@keyframes moveTrain {
    0% {
        transform: translate(-185px,-159px);
    }
    33% {
        transform: translate(VALUE, VALUE);
    }
    66% {
        transform: translate(VALUE, VALUE);
    }
    100% {
        transform: translate(300px,250px);
    }
}

只需在添加的关键帧中指定所需的位置值。

你也可以使用关键帧的其他值超过33％和66％，你还可以添加更多