How to use motion-safe and motion-reduce in Tailwind CSS ?
Last Updated :
02 Aug, 2023
Tailwind CSS is a CSS framework that helps in building rapid custom UI. It is a highly customizable, low-level CSS framework that gives you all of the building blocks that you need. In Tailwind CSS, motion-safe and motion-reduce are utility classes used for creating animations. motion-safe ensures animations play regardless of user preferences, while motion-reduce scales back or disables animations for users who prefer reduced motion, creating more inclusive experiences. In this article, we’ll see how to use motion-safe and motion-reduce in Tailwind CSS.
Motion Utilities in Tailwind CSS:
- motion-safe: It ensures that animations play during page load, regardless of the user’s preference for reduced motion.
- motion-reduce: It is used to tone down the intensity of animations for users who prefer fewer distractions or have motion sensitivity.
Syntax:
// motion-safe
<button class="motion-safe:animate-pulse">
. . .
</button>
// motion-reduce
<div class="motion-reduce:transition duration-500">
. . .
</div>
Example 1: Below example demonstrates the usage of motion-safe utility.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" />
< meta name = "viewport" content =
"width=device-width, initial-scale=1.0" />
< title >Motion-Safe</ title >
< script src =
</ script >
</ head >
< body >
< div class = "text-center" >
< h1 class = "text-5xl text-green-600" >
GeeksforGeeks
</ h1 >
< h2 class = "text-3xl" >
Motion-Safe utility
</ h2 >
< button class="mt-12 rounded-lg bg-blue-500
px-4 py-2 text-white
motion-safe:animate-pulse">
Click Me
</ button >
</ div >
</ body >
</ html >
|
Output:
Example 2: Below example demonstrates the usage of motion-reduce.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" />
< meta name = "viewport" content =
"width=device-width, initial-scale=1.0" />
< title >Motion-Reduced</ title >
< script src =
</ script >
</ head >
< body >
< div class = "text-center" >
< h1 class = "text-5xl text-green-600" >
GeeksforGeeks
</ h1 >
< h2 class = "text-3xl" >
Motion-Reduced utility
</ h2 >
< div class = "flex h-screen items-center justify-center" >
< div class="rounded-lg bg-white p-6 shadow-xl
motion-reduce:scale-150
motion-reduce:transform">
< h2 class = "mb-4 text-lg font-bold" >
GeeksforGeeks
</ h2 >
< p class = "text-gray-700" >
You have a new notification!
</ p >
< button class="mt-4 rounded bg-green-600 px-4 py-2
font-bold text-white hover:bg-green-600">
View
</ button >
</ div >
</ div >
</ div >
</ body >
</ html >
|
Output:
Share your thoughts in the comments
Please Login to comment...