Safari中的动画问题答案

【问题标题】：Animation issue in safariSafari中的动画问题
【发布时间】：2021-05-16 20:23:16
【问题描述】：

我用 CSS 动画做了一个轮播横幅，但在 iOS 上按主页按钮并再次打开 Safari 后效果不佳。

这是发生了什么的视频。

这也发生在 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');
      }
    }

【问题讨论】：

标签： css animation safari

【解决方案1】：

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

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

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

【讨论】：