Primer CSS 淡出动画

Primer CSS是一个免费的开源 CSS 框架，它建立在创建基本样式元素（如间距、排版和颜色）的系统之上。这种系统化的方法确保我们的模式是稳定的并且可以相互操作。它的 CSS 方法受到面向对象的 CSS 原则、函数式 CSS 和 BEM 架构的影响。它具有高度可重用性和灵活性。它是使用 GitHub 的设计系统创建的。

Primer CSS Animation用于强调使用可重用类的元素。 Primer CSS 淡出动画用于淡出屏幕上的元素。此动画仅在元素显示时出现一次。

在本文中，我们将讨论 Primer CSS Fade out Animation。

Primer CSS 淡出动画类：

• anim-fade-out：此类用于淡出屏幕上的元素。

句法：

   ...

示例 1：此示例演示了如何使用 Primer CSS Fade out 动画来为文本设置动画。

HTML

  

  
   

  

    

        
 GeeksforGeeks 
        
 Primer CSS Fade out Animation 
 
    
 
 

  
    

        
          
 GFG Fade out 
        
    

输出：

Primer CSS 淡出动画

示例 2：此示例演示了如何使用 Primer CSS Fade out Animation 为 SVG 图标设置动画。

HTML

  

  
   

  

    

        
 GeeksforGeeks 
        
 Primer CSS Fade out Animation 
 
    
 
 

  
    

        
          
        
    

输出：

Primer CSS 淡出动画

参考： https://primer.style/css/utilities/animations#fade-out