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

📅  最后修改于: 2021-11-10 04:17:51             🧑  作者: Mango

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

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

  • 句法:
    • elementSelector {
        animation-name: myanimation;
      }
      @keyframes myanimation {
      from {
             //code        
         }
      to {
            //code
        }
      }
    • element.classList.add("myclassname");
  • 程序:
    
    
      
    
        
        animation
        
      
    
      
    
        
            

    GeeksforGeeks

            

    Animation and reverse animation

                 
                                                                             
  • 输出:

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

  • 程序:
    
    
      
    
        
        animation
        
    
      
    
        
            

    GeeksforGeeks

            

    Animation and reverse animation

            
                

    A Computer Science Portal for Geeks

            
        
                                                
  • 输出 :