Utilities

File: src/scss/_core/utils/_transition.scss
File: src/scss/_core/utils/_transform.scss

Transitions

Class Description Quick Example
.transition-all-ease-* .transition-bg-ease-*
.transition-hover-top .transition-hover-right .transition-hover-bottom .transition-hover-left
.transition-hover-start .transition-hover-end
.transition-hover-zoom

.transition-all-ease-150
.transition-all-ease-200
.transition-all-ease-250
.transition-all-ease-500
CSS: transition: all *ms ease,transform *ms ease;

.transition-bg-ease-150
.transition-bg-ease-200
.transition-bg-ease-250
.transition-bg-ease-500
CSS: transition: background-color *ms linear;

.transition-hover-zoom will zoom the entire container
.transition-hover-zoom-img can be added directly to image or to a container (will zoom the image inside the container)

Without .transition-all-ease-*
.shadow-md .shadow-3d-hover .transition-hover-top
With .transition-all-ease-*
.shadow-md .shadow-3d-hover .transition-hover-top .transition-all-ease-250
Container zoom
.shadow-md .shadow-3d-hover .transition-hover-top .transition-all-ease-250
Image zoom
...
Background Transition
.bg-warning-hover .transition-bg-ease-150
.bg-danger-hover .transition-bg-ease-150

Transforms

Class Example
.transform-fixed-center .transform-3d-right .transform-3d-left

Best for images but also works for content.
Apply the class to the container. For a better effect, you can add .shadow-xlg and .rounded-xl

...
...
.text-rotate .text-rotate-180 Are very different classes. text-rotate-180 uses position: absolute, because browsers recognize CSS vertical-lr; but not vertical-rl; so css rotate is used!
.text-rotate
.text-rotate (full)
.text-truncate for very very very long long long
Link

.text-rotate

.text-rotate (full)

.text-truncate for very very very long long long

Link
.animate-reveal-up .animate-reveal-down
...
Reaveal Up
...
Reaveal Down
Jump To