为什么CSS3动画不起作用？

有人可以帮我找出为什么

元素上的动画不起作用？

#hero h5 {
  animation: fadein 2s;
  -moz-animation: fadein 2s; /* Firefox */
  -webkit-animation: fadein 2s; /* Safari and Chrome */
  -o-animation: fadein 2s; /* Opera */
  font-weight: strong;
  font-size: 28px; 
}

    

        

            

                
Lorem Ipsum Demo Title
            

        
 
    
 
      

1> Mohammad Usm..：

---

您fadein在代码中调用动画,但您没有在任何地方定义它.

CSS3动画是用@keyframes规则定义的.有关CSS3动画的更多信息,请点击此处.

添加以下css:

@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

#hero h5 {
  animation: fadein 2s;
  -moz-animation: fadein 2s; /* Firefox */
  -webkit-animation: fadein 2s; /* Safari and Chrome */
  -o-animation: fadein 2s; /* Opera */
  font-weight: strong;
  font-size: 28px; 
}

@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

  

    

      

        
Lorem Ipsum Demo Title