@keyframes shot { 0% { transform: rotate(215deg) translate(0, 0); } 100% { transform: rotate(215deg) translate(20px, -300px); } }.sun-light { position: absolute; top: 90px; left: 330px; display: flex; width: 200px; height: 200px; background-color: pink; border-radius: 50%; transform: rotate(215deg); overflow: hidden; animation: shot 2s 5; } 如何让我的动画元素执行完动画后不返回原来位置

您可以在动画结束后添加`animation-fill-mode: forwards;`属性，这将使动画元素在动画结束后保持在最后一个关键帧的状态，而不是返回原来的位置。例如：

.sun-light {
  position: absolute;
  top: 90px;
  left: 330px;
  display: flex;
  width: 200px;
  height: 200px;
  background-color: pink;
  border-radius: 50%;
  transform: rotate(215deg);
  overflow: hidden;
  animation: shot 2s 5;
  animation-fill-mode: forwards;
}

这样，在动画完成后，`.sun-light`元素将保持在最后一个关键帧的位置，而不会返回原来的位置。

相关问题

@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 属性，因此平移和旋转操作都能够被正确地实现。

#loader { position: absolute; left: 50%; top: 10%; z-index: 1; /*width: 20px;*/ /*height: 20px;*/ margin: -25px 0 0 -25px; border: 6px solid #f3f3f3; border-radius: 50%; border-top: 6px solid #00A76F; border-bottom: 6px solid #00A76F; width: 50px; height: 50px; -webkit-animation: spin 2s linear infinite; animation: spin 2s linear infinite; } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

这段 CSS 代码定义了一个名为 `loader` 的元素的样式，该元素会呈现旋转的圆形加载动画。具体解释如下：

1. `position: absolute;`：使元素的定位方式为绝对定位，相对于最近的非 static 定位的祖先元素进行定位。

2. `left: 50%;` 和 `top: 10%;`：将元素的位置水平居中并垂直偏离顶部 10% 的位置。

3. `z-index: 1;`：设置元素的堆叠顺序为 1。

4. `border: 6px solid #f3f3f3;`：定义元素的边框，宽度为 6px，颜色为 #f3f3f3。

5. `border-radius: 50%;`：将元素的边框设置为圆形。

6. `border-top: 6px solid #00A76F;` 和 `border-bottom: 6px solid #00A76F;`：定义元素的顶部和底部边框的颜色为 #00A76F。

7. `width: 50px;` 和 `height: 50px;`：定义元素的宽度和高度均为 50px。

8. `-webkit-animation: spin 2s linear infinite;` 和 `animation: spin 2s linear infinite;`：定义元素的动画，持续时间为 2s，动画函数为 linear，循环播放。其中 `-webkit-animation` 用于兼容 Safari 和 Chrome 浏览器。

9. `@-webkit-keyframes spin` 和 `@keyframes spin`：定义名为 `spin` 的动画，从 0% 到 100% 的过程中将元素旋转 360 度，使其呈现加载动画。

综上所述，这段 CSS 代码通过定义元素的样式和动画，实现了一个简单的圆形加载动画效果。