@keyframes shot { from { transform: translate(0, 0); transform: rotate(15deg); } to { transform: translate(-80px, 550px); /*沿x轴和y轴同时平移*/ transform: rotate(25deg); } } 为什么没有位移

在这个 keyframes 中，你定义了两个 transform 属性，因此第一个 transform 属性会被第二个 transform 属性所覆盖，导致第一个 transform 属性中的平移操作被忽略。你需要将两个 transform 属性合并成一个，才能同时实现平移和旋转操作。

以下是合并后的代码：

@keyframes shot {
	from {
		transform: translate(0, 0) rotate(15deg);
	}
	to {
		transform: translate(-80px, 550px) rotate(25deg);
	}
}

在这个 keyframes 中，我们将两个 transform 属性合并成一个，同时在 from 和 to 中都应用了这个 transform 属性，因此平移和旋转操作都能够被正确地实现。

相关问题

@keyframes picmove { from { transform: translate(0); } to { transform: translate(-750px); } }

这是一个 CSS3 动画的关键帧定义代码块，它定义了一个名为 `picmove` 的动画，在动画过程中元素从原位置向左移动 750 像素。你可以将这个动画应用到元素上，例如：

img {
  animation: picmove 2s infinite;
}

这将使页面上所有的 `img` 元素都应用该动画，动画时间为 2 秒，循环播放。

@keyframes muscis { from { transform: rotate (0deg); opacity: .6; } to { transform: rotate(360deg); opacity: .8; } }，这段代码是什么意思

这段代码是定义一个名为"muscis"的动画，通过@keyframes规则来定义动画的关键帧。在这个动画中，从初始状态"from"开始，元素的旋转角度为0度，透明度为0.6；到结束状态"to"时，元素旋转角度为360度，透明度为0.8。因此，应用这个动画的元素将会呈现出一个沿着顺时针方向旋转，并且逐渐变得更加透明的动画效果。这个动画可以通过其他CSS属性来触发，例如animation-name、animation-duration、animation-timing-function、animation-iteration-count等等。