html - 刷新后未加载 CSS 动画

Question

我遇到了一些奇怪的问题。我在页面中的某些元素上添加了 css 动画，当我在 iOs 上打开它时，动画正在运行，但如果我刷新页面，动画不再运行。这只发生在 iOs(safari 和 chrome)上。

我尝试添加动画延迟但没有帮助。动画设置在某个图标上。这个图标应该在“after”元素上动画。

  .icon {
    content: "";
    display: block;
    width: 18px;
    height: 18px;
    background-image: url('images/banners/bus-icon-banner-1.svg');
    background-size: cover;
    position: absolute;
    transform: translate3d(60px, 64px, 0);
    top: 0;
    html[dir=ltr] & {
    left: -148px;
    }

    animation: orange-line-ani 5s cubic-bezier(0.1, 0.01, 0.15, 0.05) 2s infinite;
    @include keyframes(orange-line-ani) {
      0% {
        transform: translate3d(57px, 64px, 0);
      }
      30% {
        transform: translate3d(63px, 28px,0);
      }
      70% {
        transform: translate3d(86px, 28px,0);
      }
      100% {
        transform: translate3d(89px, -6px,0);
      }
    }
  }

有什么帮助吗？

Answer 1

如果你想在'after' 元素上为这个图标设置动画，那么你应该在.icon 之后添加::after 伪元素。像这样:

.icon::after {
    content: "";
    display: block;
    width: 18px;
    height: 18px;
    background-image: url('images/banners/bus-icon-banner-1.svg');
    background-size: cover;
    position: absolute;
    transform: translate3d(60px, 64px, 0);
    top: 0;
    html[dir=ltr] & {
    left: -148px;
    }

    animation: orange-line-ani 5s cubic-bezier(0.1, 0.01, 0.15, 0.05) 2s infinite;
    @include keyframes(orange-line-ani) {
      0% {
        transform: translate3d(57px, 64px, 0);
      }
      30% {
        transform: translate3d(63px, 28px,0);
      }
      70% {
        transform: translate3d(86px, 28px,0);
      }
      100% {
        transform: translate3d(89px, -6px,0);
      }
    }
  }

希望对您有所帮助。