Primer CSS 淡入淡出动画
Primer CSS 动画用于使网页更有趣并改善用户体验。
在本文中,我们将看到Primer CSS 淡入淡出动画。
此动画用于向下滑动隐藏它的元素。此动画应在其溢出属性设置为隐藏的容器上使用,或者该容器应位于页面底部。要使用此动画,在元素上使用类anim-fade-down 。
Primer CSS Fade down Animation Classes:
- anim-fade-down:这个类用于元素上应用淡入淡出动画。
句法:
...
示例 1:此示例展示了如何使用anim-fade-down类将淡入淡出动画应用于元素。
HTML
Fade Down Animation - Primer CSS
GeeksforGeeks
Fade Down Animation - Primer CSS
Fade Down Text
HTML
Fade Down Animation - Primer CSS
GeeksforGeeks
Fade Down Animation on Image - Primer CSS
输出:
示例 2:下面的示例显示了在图像元素上使用淡入淡出动画。
HTML
Fade Down Animation - Primer CSS
GeeksforGeeks
Fade Down Animation on Image - Primer CSS
输出:
参考: https://primer.style/css/utilities/animations#fade-down