Question

我有一个动画片'飞进'两个盒子，有点延迟，让它们留下来。

但是，此代码在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>

Answer 1

为什么你有from，to，0%和100% - 这对我来说似乎是一个语法问题。将所有语句合并为0%和100%或from和to（因为它们本质上意味着相同的事情）。所以使用

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

IE中的CSS动画

1 个答案: