Semantic-UI 静态动画

Semantic UI开源框架提供图标或字形，用于显示与某些元素相关的图片，使用 CSS 和 jQuery，用于创建出色的用户界面。它是一个用于创建漂亮和响应式布局的开发框架。

语义 UI 静态动画是一组过渡动画，我们可以在图像或文本等元素上执行。

语义 UI 静态动画类型：

• 摇晃：元素摇晃以引起人们对其形状的注意。
• Flash：元素闪烁以引起对自身的注意。
• 摇动：元素摇动以将注意力吸引到其位置。
• 脉冲：元素脉冲以引起人们对其可见性的注意。
• 多田：动画告诉我们发生了积极的行动。
• 弹跳：元素弹跳作为提醒。
• 发光：元素发光以显示其位置。

注意：在以下语法中根据需要替换动画类型。

句法：

$('.gfg.icon').transition('jiggle')

示例：在下面的示例中，我们有一个图标和一组七个按钮，在单击时执行上述每个动画。

HTML

  
    
    
    
    
   
    
      body {
        padding: 10px;
        margin: 10px;
      }
  
      #container1 {
        height: 1000px;
      }
  
      #container2 {
        height: 1000px;
      }
    
  
  
  
    
      
        
          GeeksforGeeks
        
        Semantic UI Static animation
      
    
    
      Welcome to GeeksforGeeks
      Find the best programming tutorials here.
  
      
        
        
        
        
          Jiggle
        
        
          Flash
        
        
          Shake
        
        
          Pulse
        
        
          Tada
        
        
          Bounce
        
        
          Glow
        
      
    
  
    
      function runAnimation(animation) {
        $('.gfg.icon').transition(animation)
      }
    
  

输出：

Semantic-UI 静态动画

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