Primer CSS 淡入淡出动画

Primer CSS 动画用于使网页更有趣并改善用户体验。

在本文中，我们将看到Primer CSS 淡入淡出动画。

此动画用于向下滑动隐藏它的元素。此动画应在其溢出属性设置为隐藏的容器上使用，或者该容器应位于页面底部。要使用此动画，在元素上使用类anim-fade-down 。

Primer CSS Fade down Animation Classes：

• anim-fade-down：这个类用于元素上应用淡入淡出动画。

句法：

    ...

示例 1：此示例展示了如何使用anim-fade-down类将淡入淡出动画应用于元素。

HTML

    
    
    
    
    

  

    

        
GeeksforGeeks
        
Fade Down Animation - Primer CSS
    
    

        

            
Fade Down Text
        
    

输出：

Primer CSS 带文本的淡入淡出动画

示例 2：下面的示例显示了在图像元素上使用淡入淡出动画。

HTML

    
    
    
    
    

  

    

        
GeeksforGeeks
        
Fade Down Animation on Image - Primer CSS
    
    

        

            
        
    

输出：

Primer CSS 带图像的淡入淡出动画

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