Semantic-UI | Transition

Semantic UI is an open-source framework that provides transition animation which is usually used to move the page content in or out of the viewport. It uses jQuery and CSS to create nice user interfaces which are very similar to bootstrap. It has many elements for creating interactive webpages. Classes are used for styling different elements in the HTML page structure.

Example: The following example shows how elements can be scaled in or out of the view.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>Semantic UI</title>
    <link href=
        rel="stylesheet" />
</head>
  
<body>
    <div style="margin-top: 100px" 
        class="ui container">
          
        <h2>Transitions</h2>
        <img class="ui image medium"
            src=
        <button class="ui button">
            Go out
        </button>
    </div>
  
    <script src=
        integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
        crossorigin="anonymous">
    </script>
      
    <script src=
    </script>
  
    <script>
        $('button').click(function () {
            $('.image').transition('scale');
        })
    </script>
</body>
  
</html>

chevron_right


Output:

Example: The following example demontrates zoom in and zoom out transitions.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>Semantic UI</title>
    <link href=
        rel="stylesheet" />
</head>
  
<body>
    <div style="margin-top: 100px" 
        class="ui container">
          
        <h2>Transitions</h2>
        <img class="ui image medium"
            src=
        <button class="ui button">
            Zoom
        </button>
    </div>
  
        integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
        crossorigin="anonymous">
    </script>
      
    <script src=
    </script>
      
    <script>
        $('button').click(function () {
            $('.image').transition('zoom');
        })          
    </script>
</body>
  
</html>

chevron_right


Output:



Example: The following example demonstrates fade transition.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>Semantic UI</title>
    <link href=
        rel="stylesheet" />
</head>
  
<body>
    <div style="margin-top: 100px" class="ui container">
        <h2>Transitions</h2>
        <img class="ui image medium"
            src=
        <br>
        <button class="ui button one">Fade</button>
        <button class="ui button up">Fade Up</button>
        <button class="ui button down">Fade Down</button>
        <button class="ui button left">Fade Left</button>
        <button class="ui button right">Fade Right</button>
    </div>
        integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
        crossorigin="anonymous">
    </script>
      
    <script src=
    </script>
      
    <script>
        $('.one').click(function () {
            $('.image').transition('fade');
        })
        $('.up').click(function () {
            $('.image').transition('fade up');
        })
        $('.down').click(function () {
            $('.image').transition('fade down');
        })
        $('.left').click(function () {
            $('.image').transition('fade left');
        })
        $('.right').click(function () {
            $('.image').transition('fade right');
        })         
    </script>
</body>
  
</html>

chevron_right


Ouptput:

Example: The following example demonstrates flip transition.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>Semantic UI</title>
    <link href=
        rel="stylesheet" />
</head>
  
<body>
    <div style="margin-top: 100px" 
        class="ui container">
          
        <h2>Transitions</h2>
        <img class="ui image medium"
            src=
        <br>
        <button class="ui button hor">
            Horizontal Flip
        </button>
  
        <button class="ui button ver">
            Vertical Flip
        </button>
    </div>
  
        integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
        crossorigin="anonymous">
    </script>
      
    <script src=
    </script>
  
    <script>
        $('.hor').click(function () {
            $('.image').transition('horizontal flip');
        })
        $('.ver').click(function () {
            $('.image').transition('vertical flip');
        })
    </script>
</body>
  
</html>

chevron_right


Output:

Example: The following example demonstrates fly, swing, and slide transitions.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>Semantic UI</title>
    <link href=
        rel="stylesheet" />
</head>
  
<body>
    <div style="margin-top: 100px" class="ui container">
        <h2>Transitions</h2>
        <img class="ui image medium"
            src=
        <br>
        <button class="ui button fly">Fly Left</button>
        <button class="ui button swing">Swing Left</button>
        <button class="ui button slide">Slide Left</button>
    </div>
        integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
        crossorigin="anonymous">
    </script>
      
    <script src=
    </script>
  
    <script>
        $('.fly').click(function () {
            $('.image').transition('fly left');
        })
        $('.swing').click(function () {
            $('.image').transition('swing left');
        })
        $('.slide').click(function () {
            $('.image').transition('slide left');
        })
    </script>
</body>
  
</html>

chevron_right


Output:

You can use right, down and up also.

Example: The following example demonstrates static animation.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>Semantic UI</title>
    <link href=
        rel="stylesheet" />
</head>
  
<body>
    <div style="margin-top: 100px" 
        class="ui container">
          
        <h2>Transitions</h2>
        <img class="ui image medium"
            src=
        <br>
        <button class="ui button jiggle">Jiggle</button>
        <button class="ui button flash">Flash</button>
        <button class="ui button shake">Shake</button>
        <button class="ui button pulse">Pulse</button>
        <button class="ui button tada">Tada</button>
        <button class="ui button bounce">Bounce</button>
        <button class="ui button glow">Glow</button>
    </div>
        integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
        crossorigin="anonymous">
    </script>
      
    <script src=
    </script>
  
    <script>
        $('.jiggle').click(function () {
            $('.image').transition('jiggle');
        })
        $('.flash').click(function () {
            $('.image').transition('flash');
        })
        $('.shake').click(function () {
            $('.image').transition('shake');
        })
        $('.pulse').click(function () {
            $('.image').transition('pulse');
        })
        $('.tada').click(function () {
            $('.image').transition('tada');
        })
        $('.bounce').click(function () {
            $('.image').transition('bounce');
        })
        $('.glow').click(function () {
            $('.image').transition('glow');
        })
    </script>
</body>
  
</html>

chevron_right


Output:se




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.



Improved By : Akanksha_Rai

Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.