Primer CSS 淡出动画

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

Primer CSS Animation用于强调使用可重用类的元素。 Primer CSS Fade-up Animation用于通过使用anim-fade-up类从折叠区域下方滑动元素来为元素设置动画。

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

Primer CSS Fade up Animation 类：

• anim-fade-up：此类用于从下方为元素设置动画。

句法：

     ...

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

HTML

  

  
   

  

    

       
 GeeksforGeeks 
       
 Primer CSS Fade up Animation 
 
    
 
 

  
    

        

          
 GeeksforGeeks Fade up 
        
    

输出：

Primer CSS 淡出动画

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

HTML

  

  
   

  

    

        
 GeeksforGeeks 
        
 Primer CSS Fade up Animation 
 
    
 
 

  
    

        

            
        
    

输出：

Primer CSS 淡出动画

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