IE 中的 CSS 动画答案

【问题标题】：CSS animations in IEIE 中的 CSS 动画
【发布时间】：2018-09-15 04:00:29
【问题描述】：

我有一个动画“飞入”两个盒子，稍有延迟，让它们停留。

但是，此代码在 IE11 或 Edge 中均无效。

据我了解，IE11和Edge都应该支持所有动画语法。

我希望有人能告诉我为什么 IE 什么都不显示（没有动画，没有框，什么都没有）

@keyframes fade {
  
  from {opacity: 0;}
  to {opacity: 1;}
    
  0%  {transform: translateY(200%);}
  100% {transform: translateY(0%);}
  
}

@media only screen and (min-device-width : 769px)   {
  
#shopify-section-frontpage-boxes .usp > .grid{
    display: flex;
    text-align: center;
    font-size: 1rem;
    align-items: center;
    background: rgba(44, 140, 6, 0.84);	
  	font-weight: bold;  	
    opacity: 0;
  	animation: fade 1s ease-out;
  	animation-delay: 1.5s;
    animation-fill-mode: forwards;
 	}
}

<div class="page-width usp">
 <div class="grid grid--no-gutters">
   <a class="grid__item" href="{{ section.settings.urlbox1 }}">
     <div>{{ section.settings.textbox1 }}</div>
   </a>
   <a class="grid__item" href="{{ section.settings.urlbox2 }}" {% if section.settings.statebox2 == false %} style="display: none;" {% endif %}>
     <div>{{ section.settings.textbox2 }}</div>
   </a>
  </div>
</div>

【问题讨论】：

请阅读How to Ask，并提供正确的minimal reproducible example。
我通过验证运行它，现在一切都验证了。但它仍然不起作用。我不确定我在“提出问题的正确方式”中错过了什么。你能澄清一下我的问题缺少什么吗？
最小的、完整的、可验证的例子...
访问 caniuse.com 了解 IE 和 flex 的所有问题
为什么你有from、to、0% 和 100% - 这对我来说似乎是一个语法问题。将所有语句组合成0% 和100% 或from 和to。所以使用@keyframes { from { opacity: 0; transform: translateY(200%); } to { opacity: 1; transform: translateY(0%); } }。

标签： css internet-explorer animation

【解决方案1】：

为什么你有from、to、0% 和100% - 这对我来说似乎是一个语法问题。将所有语句组合成0% 和100% 或from 和to（因为它们本质上是同一个意思）。所以使用

@keyframes { 
  from {
    opacity: 0;
    transform: translateY(200%);
  }
  to {
    opacity: 1;
    transform: translateY(0%); 
  }
}

【讨论】：