Semantic-UI 静态 Tada 动画

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

动画通常用于将 Web 内容移入和移出视口。静态动画可以预先确定并且是可预测的，并且通常用于通过改变网页上要动画的元素的可见性、位置等来吸引用户的注意力。 Semantic UI 为我们提供了多种静态动画，包括 Jiggle、Flash、Shake、Pulse、Tada、Bounce、Glow。

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

Semantic UI Static Tada 动画：静态动画用于吸引用户的注意力。语义 UI 静态 Tada 动画通过对动作提供积极的反馈来吸引用户的注意力。

句法：

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

例1：如果我们点击按钮，函数会被调用，我们可以观察Tada动画。

HTML

  

    Semantic UI tada animation
    
    
    
    
    

  

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

  

输出：

Semantic-UI 静态 Tada 动画

示例 2：当图像悬停时，将调用该函数，我们可以观察 Semantic UI Static tada动画。

HTML

  

    Semantic UI Tada animation
    
    
    
    
    

  

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

  

输出：

Semantic-UI 静态 Tada 动画

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