Open In App

Semantic-UI | Transition

Last Updated : 22 Jun, 2021
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 
 

 



Previous Article
Next Article

Similar Reads

ReactJS Semantic UI Transition Module
Semantic UI is a modern framework used in developing seamless designs for the website, It gives the user a lightweight experience with its components. It uses the predefined CSS, JQuery language to incorporate in different frameworks. In this article, we will know how to use the Transition Module in ReactJS Semantic UI. Transition Module is used to
3 min read
Semantic-UI Zoom Transition
Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing. Semantic UI Transition is an animation that is used to move the webpage content in or out of view using the Semantic UI transition meth
2 min read
Semantic-UI Slide Transition
Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing. Semantic UI Transition is an animation that is used to move the webpage content in or out of view using the Semantic UI transition meth
2 min read
Semantic-UI Fade Transition
Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing. Semantic UI Transition is an animation that is used to move the webpage content in or out of view using the Semantic UI transition meth
2 min read
Semantic-UI Flip Transition
Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing. Semantic UI Transition is an animation that is used to move the webpage content in or out of view using the Semantic UI transition meth
2 min read
Semantic-UI Drop Transition
Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing. Semantic UI Transition is an animation that is used to move the webpage content in or out of view using the Semantic UI transition meth
2 min read
Semantic-UI Browse Transition
Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing. In this article, we are going to learn about browse transition. Semantic UI has a bunch of components for users to design web pages. An
2 min read
Semantic-UI Swing Transition
Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing. In this article, we are going to learn about swing transition. It is equipped with pre-built semantic components that help create respo
2 min read
Semantic-UI Scale Transition
Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing. In this article, we are going to learn about scale transition. It is equipped with pre-built semantic components that help create respo
2 min read
Semantic-UI Fly Transition
Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing. In this article, we are going to learn about Fly Transition. It is equipped with pre-built semantic components that help create respons
2 min read