Question

我制作了一个带有 CSS 动画的轮播横幅，但在按下主页按钮并再次打开 Safari 后，它在 iOS 上效果不佳。

这是发生了什么的视频。

它也发生在 macOS 上。我用 Safari 打开网站，然后最小化 Safari。再次打开 Safari，横幅变为空白。

这是我的css代码：

.banner{
     background-position: center;
     background-size: cover;
     animation: banner 15s ease-in-out infinite;
     -webkit-animation: banner 15s ease-in-out infinite;
     height: 100vh;
     }
    
    @include keyframes(banner){
      0%{
        background-image: url('image1.jpg');
      }
      28%{
        background-image: url('image2.jpg');
      }
      33%{
        background-image: url('image3.jpg');
      }
      61%{
        background-image: url('image4.jpg');
      }
      66%{
        background-image: url('image5.jpg');
      }
      95%{
        background-image: url('image6.jpg');
      }
      100%{
        background-image: url('image7.jpg');
      }
    }

Answer 1

我知道发生了什么。你知道什么 Safari、IE、Deit 是一些旧浏览器，它们不支持新的现代动画和 API，但不要担心我认为大多数人使用 Chrome、Edge、Firefox，等等... 现代浏览器（用它们测试）但是如果您仍然遇到问题，问题出在代码中

<块引用>

请简要上传您的代码，我还没有看到您的视频

或者我不建议将这些图像用于动画，请访问 click here 还请访问https://daneden.github.io/animation.css [这么酷的事情] [也访问我关于 animation.css 的问题]

Safari 中的动画问题

1 个答案: