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 method.

The Semantic UI drop transition can make the webpage element drop into or out of the view descending and ascending respectively. To add drop transition to any div or HTML element in the semantic UI, we use the .transition() function with “drop” parameter. This makes the element drop into the view if it is out of the screen and drop out of the view if it is on screen.

Transition Parameter:

• drop: This makes the selected class/id element drop in or out of view.

Syntax:

$('.selector').transition('drop');

Example 1: The following example demonstrates the basic drop transition of semantic UI in the <img> element.

Output:

Output

Example 2: The following example demonstrates the basic drop transition of semantic UI in the text <div> element.

Output:

Output

Reference: https://semantic-ui.com/modules/transition.html#drop