渐变动画使 CSS 无法在 Internet Explorer/Edge/Safari 上正确显示答案

【问题标题】：Gradient animation made CSS don't show on Internet Explorer/Edge/Safari correctly渐变动画使 CSS 无法在 Internet Explorer/Edge/Safari 上正确显示
【发布时间】：2019-07-22 13:29:53
【问题描述】：

在谷歌浏览器中，我的 html 文件在其 css 样式下运行良好，它有一个渐变动画，我无法让它在边缘/Internet Explorer/safari 上运行，有人可以帮助我吗？

试过Pie3css，添加doctypehtml，解析css，还是看不到动画。

我也用过这个自动前缀的东西，但它不起作用。

<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css" media="screen">
   * {
   font-family: Helvetica;
   }
   html, body {
   height: 100%;
   }
   body {
   margin: 0;
   font-weight: 100;
   text-transform: uppercase;
   }
   .zoll-container {
   background: linear-gradient(221deg, #43cea2, #00a5f9, #0010f9);
   background-size: 400% 400%;
   -webkit-animation: Gradient 15s ease infinite;
   -moz-animation: Gradient 15s ease infinite;
   animation: Gradient 15s ease infinite;
   padding-bottom: 20px ;
   box-shadow: 0 0 20px rgba(0,0,0,0.4);
   }
   @-webkit-keyframes Gradient {
   0% {
   background-position: 0% 50%
   }
   50% {
   background-position: 100% 50%
   }
   100% {
   background-position: 0% 50%
   }
   }
   table {
   width: 90%;
   border-collapse: collapse;
   overflow: hidden;
   box-shadow: 0 0 20px rgba(0,0,0,0.3);
   background-color: rgba(255,255,255,0.9);
   border-spacing: 0;
   border-collapse: collapse;
   z-index: 1;
   }
   td, th {
   cursor: pointer;
   padding: 10px;
   position: relative;
   color: #000;
   border: solid 1px #F2F2F2
   }
   td {
   font-family: Helvetica;
   font-weight: 100;
   text-transform: uppercase;
   }
   th {
   text-align: left;
   color: #FFF ;
   font-family: Helvetica;
   font-weight: 200;
   }
   tbody tr:hover {
   background-color: rgba(0,0,0,0.1);
   }
   td:hover::after { 
   background-color: rgba(0,0,0,0.9);
   content: '\00a0';  
   height: 10000px;    
   left: 0;
   position: absolute;  
   top: -5000px;
   width: 100%;
   z-index: -1;     
   }
   tr:nth-child(even) {
   background-color: rgba(0,0,0,0.1)
   }
   .zoom {
   transition: transform .2s;
   }
   .zoom:hover {
   -ms-transform: scale(.9); /* IE 9 */
   -webkit-transform: scale(.9); /* Safari 3-8 */
   transform: scale(.9); 
   }
   /* unvisited link */
   a:link {
   color: #000000;
   }
   /* visited link */
   a:visited {
   color: #000000;
   }
   /* mouse over link */
   a:hover {
   color: #00a5f9;
   }
   /* selected link */
   a:active {
   color: #1ABFFF;
   }
   /* single cell highlight colors for color palette column */
   td.teal:hover {background-color: rgba(0,128,128,0.2); color: white;}
   td.red:hover {background-color: rgba(255,0,0,0.2); color: white;}
   td.purple:hover {background-color: rgba(128,0,128,0.2); color: white;}
   td.blue:hover {background-color: rgba(0,0,255,0.2); color: white;}
   td.titanium:hover {background-color: rgba(182,175,169,0.2); color: white;}
   thead {
   font-family: Helvetica;
   background: linear-gradient(221deg, #43cea2, #00a5f9, #0010f9);
   background-size: 400% 400%;
   -webkit-animation: Gradient 15s ease infinite;
   -moz-animation: Gradient 15s ease infinite;
   animation: Gradient 15s ease infinite;
   }

</style>
<body>
   <div class="zoll-container">
      <center><img src="https://files.radcliffecardiology.com/s3fs-public/Zoll_white.png" alt="zoll-medical-logo" width="240" height="135"></center>
      <center>
         <p style="font-size:130%;color:#FFF;">
            Supported Browser: Internet Explorer, Chrome
         </p>
      </center>
   </div>
   <p> 
      <br> 
   </p>
   <center>
      <table>
         <thead>
            <tr>
               <th>INSTANCE</th>
               <th>TYPE</th>
               <th>LAST REFRESHED</th>
               <th>COLOR PALETTE</th>
               <th>CLIENT JAVA</th>
            </tr>
         </thead>
         <tbody>
            <tr>
               <th colspan="5"></th>
            </tr>
            <tr>
               <td><a href=
                  "www.google.com"> 
                  ZOLL</a>
               </td>
               <td>Production</td>
               <td>Date</td>
               <td class="teal">Teal</td>
               <td>Java 8 Update 121</td>
            </tr>
            <tr>
               <td><a href=
                  "www.google.com"target="blank">
                  UAT</a>
               </td>
               <td>Cloned</td>
               <td>Cell 3</td>
               <td class="red">Red</td>
               <td>Java 8 Update 121</td>
            </tr>
            <tr>
               <td><a href=
                  "www.google.com"target="blank">
                  DEV1</a>
               </td>
               <td>Cloned</td>
               <td>Cell 3</td>
               <td class="purple">Purple</td>
               <td>Java 8 Update 121</td>
            </tr>
            <tr>
               <td><a href=
                  "www.google.com"target="blank">
                  DEV2 (test)</a>
               </td>
               <td>Cloned</td>
               <td>Cell 3</td>
               <td class="titanium">Titanium</td>
               <td>Java 8 Update 121</td>
            </tr>
            <tr>
               <td><a href=
                  "www.google.com"target="blank">
                  GOLD</a>
               </td>
               <td>Cloned</td>
               <td>Cell 3</td>
               <td class="titanium">Titanium</td>
               <td>Java 8 Update 121</td>
            </tr>
            <tr>
               <td><a href=
                  "www.google.com"
                  target="blank">
                  DAILY</a>
               </td>
               <td>Cloned</td>
               <td>Cell 3</td>
               <td class="red">Red</td>
               <td>Java 8 Update 121</td>
            </tr>
            <tr>
               <td>WINDOWS SERVERS</a>
               </td>
               <td>Remote desktop connection </td>
               <td></td>
               <td></td>
               <td></td>
            </tr>
            <tr>
               <th colspan="5"></th>
            </tr>
            <tr>
               <td><a href=
                  "www.google.com"target="blank">
                  AZM</a>
               </td>
               <td>Production</td>
               <td>Cell 3</td>
               <td class="blue">Blue</td>
               <td>Java 8 Update 121</td>
            </tr>
            <tr>
               <td><a href=
                  "www.google.com"target="blank">
                  INT1</a>
               </td>
               <td>Cloned</td>
               <td>Cell 3</td>
               <td class="titanium">Titanium</td>
               <td>Java 8 Update 121</td>
            </tr>
         </tbody>
      </table>
   </center>
</body>
<script>
   $(document).ready(function(){
     $('[data-toggle="tooltip"]').tooltip();   
   });
</script>

【问题讨论】：

嗨丹尼尔！欢迎来到堆栈交换！作为今后的一般规则，请仅添加解决问题所需的最少量代码。粘贴整个文档是不必要的，尤其是在这样的问题上。

标签： css internet-explorer safari microsoft-edge

【解决方案1】：

-webkit-keyframes 仅适用于 Chrome、Firefox 和 Opera。您可以参考 MDN 中的broswer compatibility。您应该添加keyframes css 样式以使其在 Edge、IE 和 Safari 中工作：

@keyframes Gradient {
        0% {
            background-position: 0% 50%
        }

        50% {
            background-position: 100% 50%
        }

        100% {
            background-position: 0% 50%
        }
    }

要使thead css 样式在 IE 和 Edge 中工作，您可以将其修改为 thead th css 样式作为解决方法：

thead th {
        font-family: Helvetica;
        background: linear-gradient(221deg, #43cea2, #00a5f9, #0010f9);
        background-size: 400% 400%;
        -webkit-animation: Gradient 15s ease infinite;
        -moz-animation: Gradient 15s ease infinite;
        animation: Gradient 15s ease infinite;
    }

【讨论】：