📜  Primer CSS Fade in Animation

📅  最后修改于: 2022-05-13 01:56:25.361000             🧑  作者: Mango

Primer CSS Fade in Animation

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

动画用于强调使用可重用动画类的元素。 Fade in Animation用于通过指定.anim-fade-in类来淡入屏幕上的元素。此动画仅在元素显示时出现一次。

动画类中的 Primer CSS Fade:

  • anim-fade-in:此类用于淡入屏幕上的元素。

句法:


   Content

示例 1:此示例演示了如何使用 Primer CSS Fade-in 动画为文本设置动画。

HTML


  

     Primer CSS Fade in Animation 
     

  

    
        

              GeeksforGeeks          

        

            Primer CSS Fade in Animation          

      
    
    
                     

GeeksforGeeks Fade in

        
    


HTML


  

     Primer CSS Fade in Animation 
    

  

    
        

             GeeksforGeeks          

        

             Primer CSS Fade in Animation          

    
    
    
                                                                        


输出:

Primer CSS Fade in Animation

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

HTML



  

     Primer CSS Fade in Animation 
    

  

    
        

             GeeksforGeeks          

        

             Primer CSS Fade in Animation          

    
    
    
                                                                        

输出:

Primer CSS Fade in Animation

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