Semantic-UI | Transition - GeeksforGeeks

22 Jun, 2021
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="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"        rel="stylesheet" /></head> <body>    <div style="margin-top: 100px"        class="ui container">                 <h2>Transitions</h2>        <img class="ui image medium"            src="https://media.geeksforgeeks.org/wp-content/uploads/20200612171552/image34.png" />        <button class="ui button">            Go out        </button>    </div>     <script src="https://code.jquery.com/jquery-3.1.1.min.js"        integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="        crossorigin="anonymous">    </script>         <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">    </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="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"        rel="stylesheet" /></head> <body>    <div style="margin-top: 100px"        class="ui container">                 <h2>Transitions</h2>        <img class="ui image medium"            src="https://media.geeksforgeeks.org/wp-content/uploads/20200612171552/image34.png" />        <button class="ui button">            Zoom        </button>    </div>     <script src="https://code.jquery.com/jquery-3.1.1.min.js"        integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="        crossorigin="anonymous">    </script>         <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">    </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="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"        rel="stylesheet" /></head> <body>    <div style="margin-top: 100px" class="ui container">        <h2>Transitions</h2>        <img class="ui image medium"            src="https://media.geeksforgeeks.org/wp-content/uploads/20200612171552/image34.png" />        <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>    <script src="https://code.jquery.com/jquery-3.1.1.min.js"        integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="        crossorigin="anonymous">    </script>         <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">    </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="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"        rel="stylesheet" /></head> <body>    <div style="margin-top: 100px"        class="ui container">                 <h2>Transitions</h2>        <img class="ui image medium"            src="https://media.geeksforgeeks.org/wp-content/uploads/20200612171552/image34.png" />        <br>        <button class="ui button hor">            Horizontal Flip        </button>         <button class="ui button ver">            Vertical Flip        </button>    </div>     <script src="https://code.jquery.com/jquery-3.1.1.min.js"        integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="        crossorigin="anonymous">    </script>         <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">    </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="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"        rel="stylesheet" /></head> <body>    <div style="margin-top: 100px" class="ui container">        <h2>Transitions</h2>        <img class="ui image medium"            src="https://media.geeksforgeeks.org/wp-content/uploads/20200612171552/image34.png" />        <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>    <script src="https://code.jquery.com/jquery-3.1.1.min.js"        integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="        crossorigin="anonymous">    </script>         <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">    </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="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"        rel="stylesheet" /></head> <body>    <div style="margin-top: 100px"        class="ui container">                 <h2>Transitions</h2>        <img class="ui image medium"            src="https://media.geeksforgeeks.org/wp-content/uploads/20200612171552/image34.png" />        <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>    <script src="https://code.jquery.com/jquery-3.1.1.min.js"        integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="        crossorigin="anonymous">    </script>         <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">    </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  
 
Akanksha_Rai
simmytarika5
Semantic-UI
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to update Node.js and NPM to next version ?
How to create footer to stay at the bottom of a Web page?
How to apply style to parent if it has child with CSS?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?