Semantic-UI 静态抖动动画

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

动画通常用于将 Web 内容转换进出视口。静态动画不受任何用户操作的控制，当它们从一种状态变为另一种状态时，我们可以轻松预测它们。 Semantic UI 为我们提供了许多静态动画的变体，包括 Jiggle、Flash、Shake、Pulse、Tada、Bounce、Glow。

在本文中，我们将了解 Jiggle 这是一个静态动画以及实现。

静态抖动动画：静态动画通常用于吸引用户的注意力。静态抖动动画通过抖动元素将用户的注意力吸引到要设置动画的元素的形状上。

句法：

$(....)
  .transition('jiggle')
;

示例：现在让我们了解静态抖动动画的实现。当我们点击按钮时，该函数将被调用，图像将进行抖动动画。

HTML

  

    Semantic UI jiggle animation
    
     
    
    
    

  

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

输出：

Semantic-UI 静态抖动动画

参考链接： https://semantic-ui.com/modules/transition.html#jiggle