悬停后如何在鼠标移开时反转动画？

CSS Animations 让网页上的各种元素逐渐从一种样式变为另一种样式。这些使网站看起来更有吸引力和有趣，反转动画意味着向后播放。

方法 1：此示例说明使用@keyframes from到@keyframes to反转动画，反之亦然以进行反转动画。

• 句法：

  • elementSelector {
      animation-name: myanimation;
    }
    @keyframes myanimation {
    from {
           //code        
       }
    to {
          //code
      }
    }

  • element.classList.add("myclassname");

• 程序：

  
  
    
  
      
      
      
    
  
    
  
      
          
  GeeksforGeeks
          
  Animation and reverse animation
          
      
  
    
                                                                        
  

• 输出：
  

方法 2：这个例子说明了使用 transition 属性来创建鼠标悬停动画效果和鼠标移出事件的反转动画。

• 程序：

  
  
    
  
      
      
      
  
    
  
      
          
  GeeksforGeeks
          
  Animation and reverse animation
          
  
              
  A Computer Science Portal for Geeks
          
      
  
    
                                           
  

• 输出 ：