Semantic-UI 静态弹跳动画

Semantic UI 是一个开源框架，它使用 CSS 和 jQuery 构建出色的用户界面。它与使用的引导程序相同，并且有很多不同的元素可用于使您的网站看起来更令人惊叹。

如果我们希望将 Web 内容转换进出视口，我们会使用动画。静态动画用于吸引用户的注意力并且易于预测，并且它们不依赖于用户与网络的交互。 Semantic UI 为我们提供了许多静态动画的变体，包括 Jiggle、Flash、Shake、Pulse、Tada、Bounce、Glow。

在本文中，我们将了解语义 UI 静态弹跳动画及其实现。

语义 UI 静态弹跳动画：语义 UI 静态弹跳动画用于通过弹跳来礼貌地提醒自己，从而引起用户的注意。

句法：

$('.image').transition('bounce');

示例1：当按钮被点击时，函数会被调用，我们可以观察到 语义 UI 静态弹跳动画。

HTML

  

    Semantic UI bounce animation
    
    
    
  
    
    

  

    
        
            
                Geeksforgeeks
            
            Static bounce Animation
            
              
            
            
            
                Static bounce Animation
            
        
    
  
    
        $('button').click(function () {
            $('.image').transition('bounce');
        })
    

  

输出：

Semantic-UI 静态弹跳动画

示例 2：当图像悬停时，将调用该函数，我们可以观察语义 UI 静态弹跳动画。

HTML

  

    Semantic UI Bounce animation
    
    
    
    
    

  

    
        
            Geeksforgeeks
            Static Bounce Animation
            
            
        
    
  
    
        $('img').mouseover(function () {
            $('.image').transition('bounce');
        })
    

  

输出：

Semantic-UI 静态弹跳动画

参考： https ://semantic-ui.com/modules/transition.html#bounce