我编写了一个CSS3动画,它只执行一次.动画运行正常,但将在动画结束时重置.我怎么才能避免这种情况,我想保留结果而不是重置它.

$(function() {
  $("#fdiv").delay(1000).addClass("go");
});
#fdiv {
  width: 10px;
  height: 10px;
  position: absolute;
  margin-left: -5px;
  margin-top: -5px;
  left: 50%;
  top: 50%;
  background-color: red;
}

.go {
  -webkit-animation: spinAndZoom 1s 1;
}

@-webkit-keyframes spinAndZoom {
  0% {
    width: 10px;
    height: 10px;
    margin-left: -5px;
    margin-top: -5px;
    -webkit-transform: rotateZ(0deg);
  }
  100% {
    width: 400px;
    height: 400px;
    margin-left: -200px;
    margin-top: -200px;
    -webkit-transform: rotateZ(360deg);
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div id="fdiv"></div>

这是demo美元.

推荐答案

animation-fill-mode: forwards;

.go美元

动画的最终迭代完成后,动画的最终关键帧将继续apply.

http://css-infos.net/property/-webkit-animation-fill-mode

Css相关问答推荐

如何将另一种自定义位置 colored颜色 添加到三角形CSS中?

输入中的框始终显示在MUI文本字段中

在文本之前添加了额外的空间-Angular 树视图CSS

如何在横向和纵向布局上使用 CSS 网格中的纵横比来保持纵横比

尽管 URL 路径正确,但背景图像未显示

如何使用 tailwind css 修复滚动条始终位于底部?

如何在Bootstrap 5上使用移动设备居中内容?

解释 "document.styleSheets[0].cssRules[0].style;"

设置初始大小并记住分配的最后大小

有没有办法在 CSS 字体速记中使用数字字体粗细?

如何为以下布局安排网格?

使用任意运行时字符串进行 Tailwind CSS 类定位

图像占用尽可能多的空间但保持宽高比并包含在窗口高度中

如何在 Angular 中使用 CSS 设置 FontAwesome 图标的大小?

Ant Design:将位置子菜单移动到屏幕顶部

CSS动画恢复默认

调整屏幕大小时无法让我的视频背景保持不变

HTML 元素默认为 display:inline-block?

为什么 height:0 不隐藏我的填充

堆叠半透明盒子的 colored颜色 取决于订单?