Open In App

Semantic-UI | Transition

Improve
Improve
Like Article
Like
Save
Share
Report

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.

html




<!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>


Output: 
 

 

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

 

html




<!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>


Output: 
 

 

Example: The following example demonstrates fade transition.

 

html




<!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>


Output: 
 

 

Example: The following example demonstrates flip transition.

 

html




<!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>


Output: 
 

 

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

 

html




<!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>


Output: 
 

 

You can use right, down and up also.

 

Example: The following example demonstrates static animation.

 

html




<!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>


Output:se 
 

 



Last Updated : 22 Jun, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads