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
|
|
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
![]()
.bg-warning-hover .transition-bg-ease-150
.bg-danger-hover .transition-bg-ease-150
|
Class | Example |
---|---|
.transform-fixed-center
.transform-3d-right
.transform-3d-left
|
Best for images but also works for content. ![]() ![]() |
.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!
|
|
.animate-reveal-up
.animate-reveal-down
|
![]() Reaveal Up![]() Reaveal Down |