Semantic-UI 静态摇动动画

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

动画通常用于将 Web 内容转换进出视口。静态动画用于将用户的注意力吸引到位置、可见性等，当它们从一种状态转换到另一种状态时，它们是预先确定的和可预测的。 Semantic UI 为我们提供了许多静态动画的变体，包括 Jiggle、Flash、Shake、Pulse、Tada、Bounce、Glow。

在本文中，我们将了解 Semantic UI 静态抖动动画，并借助示例代码学习如何实现它。

语义 UI 静态摇动动画：语义 UI中的静态摇动动画通过摇动要设置动画的元素来吸引用户注意其位置。

句法 ：

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

示例1：一旦我们点击按钮，该函数将被调用，我们可以观察静态抖动动画。

HTML

  

    Semantic UI Shake animation
    
    
    
    
    

  

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

  

输出 ：

Semantic-UI 静态摇动动画

示例 2：

HTML

  

    Semantic UI Shake animation
    
    
    
    
    
  
    
        body {
            margin: 20px;
        }
    

  

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

  

输出：

Semantic-UI 静态摇动动画

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