Transition

Create smooth transitions between two states when hovering an element.

Usage

To toggle a transition on hover or focus, add the .uk-transition-toggle class to a parent element. Also add tabindex="0" to make the animation focusable through keyboard navigation and on touch devices. Add one of the .uk-transition-* classes to any child element to apply the actual effect.

ClassDescription
.uk-transition-fadeLets the element fade in
.uk-transition-scale-up
.uk-transition-scale-down
The element scales up or down.
.uk-transition-slide-top
.uk-transition-slide-bottom
.uk-transition-slide-left
.uk-transition-slide-right
Lets the element slide in from the top
.uk-transition-slide-top-small
.uk-transition-slide-bottom-small
.uk-transition-slide-left-small
.uk-transition-slide-right-small
The element slides in from the top, bottom, left or right with a smaller distance.
.uk-transition-slide-top-medium
.uk-transition-slide-bottom-medium
.uk-transition-slide-left-medium
.uk-transition-slide-right-medium
The element slides in from the top, bottom, left or right with a medium distance.

This component is mostly used in combination with the Overlay component as elements are transitioned from invisible to visible state. To place the overlay on top of another element, like an image, use the Position component.

<div class="uk-transition-toggle" tabindex="0">
  <div class="uk-transition-fade"></div>
</div>
Copy to clipboard
  • Fade

    Fade

    Bottom

    Bottom

    Icon

    2 Images

    Scale Up Image

    Headline

    Subheadline

    Small Top + Bottom

  • <div
      class="uk-child-width-1-3@s uk-grid-small uk-grid-match uk-child-width-1-2"
      uk-grid
    >
      <div class="uk-text-center">
        <div class="uk-transition-toggle uk-inline-clip" tabindex="0">
          <img src="/images/dark.jpg" width="1800" height="1200" alt="" />
          <div
            class="uk-flex uk-flex-center uk-flex-middle uk-overlay uk-overlay-default uk-position-cover uk-position-small uk-transition-fade"
          >
            <p class="uk-h4 uk-margin-remove">Fade</p>
          </div>
        </div>
        <p class="uk-margin-small-top">Fade</p>
      </div>
      <div class="uk-text-center">
        <div class="uk-transition-toggle uk-inline-clip" tabindex="0">
          <img src="/images/dark.jpg" width="1800" height="1200" alt="" />
          <div
            class="uk-overlay uk-overlay-default uk-position-bottom uk-transition-slide-bottom"
          >
            <p class="uk-h4 uk-margin-remove">Bottom</p>
          </div>
        </div>
        <p class="uk-margin-small-top">Bottom</p>
      </div>
      <div class="uk-text-center">
        <div class="uk-transition-toggle uk-inline-clip" tabindex="0">
          <img src="/images/dark.jpg" width="1800" height="1200" alt="" />
          <div class="uk-position-center">
            <span
              class="uk-transition-fade text-muted-foreground"
              uk-icon="icon: plus; ratio: 2"
            ></span>
          </div>
        </div>
        <p class="uk-margin-small-top">Icon</p>
      </div>
      <div class="uk-text-center">
        <div class="uk-transition-toggle uk-inline-clip" tabindex="0">
          <img src="/images/dark.jpg" width="1800" height="1200" alt="" />
          <img
            class="uk-position-cover uk-transition-scale-up"
            src="/images/light.jpg"
            alt=""
          />
        </div>
        <p class="uk-margin-small-top">2 Images</p>
      </div>
      <div class="uk-text-center">
        <div class="uk-transition-toggle uk-inline-clip" tabindex="0">
          <img
            class="uk-transition-scale-up uk-transition-opaque"
            src="/images/dark.jpg"
            width="1800"
            height="1200"
            alt=""
          />
        </div>
        <p class="uk-margin-small-top">Scale Up Image</p>
      </div>
      <div class="uk-text-center">
        <div class="uk-transition-toggle uk-inline-clip" tabindex="0">
          <img src="/images/dark.jpg" width="1800" height="1200" alt="" />
          <div class="uk-position-center">
            <div class="uk-transition-slide-top-small">
              <h4 class="text-muted-foreground">Headline</h4>
            </div>
            <div class="uk-transition-slide-bottom-small">
              <h4 class="text-muted-foreground">Subheadline</h4>
            </div>
          </div>
        </div>
        <p class="uk-margin-small-top">Small Top + Bottom</p>
      </div>
    </div>

Theme development

On your tailwind.config.js file, add the Transition component within the ui() plugin.

import ui from "franken-ui";

ui({
    components: {
        transition: {
            hooks: {}
        }
    }
}),

Available hooks

Note If you are developing theme from scratch, you can use all these hooks. If you’re using the shadcn/ui theme, some hooks might not work as they were already in use or removed. Learn more about using hooks.

Hook NameAffected Classes
hook-misc*