How to use Custom Animation in config File In CSS
In Tailwind CSS, we can customize our animations as per our needs. To achieve this we need to add @keyframes in “tailwind.config.js” file. Animation behaviour can be defined in the animation section of the “module.exports” object.
Example1 : We have created a animation “wiggle” by defining @keyframes in config.js.
// tailwind.config.js
module.exports = {
content: ["./src/**/*.{js,jsx,ts,tsx}"],
theme: {
extend: {
animation: {
wiggle: "wiggle 0.5s ease-in-out infinite",
},
keyframes: {
wiggle: {
"0%, 100%": {
transform: "rotate(-5deg)",
},
"50%": {
transform: "rotate(5deg)",
},
},
},
},
},
plugins: [],
};
Implementation to see how to add keyframes.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" > < link rel = "stylesheet" href = "styles.css" > < title >Tailwind CSS with External @keyframes</ title > </ head > < body class = "text-center p-8" > < h1 class="text-5xl font-bold text-green-500 animate-wiggle"> w3wiki </ h1 > < div class = "mt-8" > < p class = "text-gray-700" > Welcome to the world of coding and learning! </ p > </ div > </ body > </ html > |
CSS
/* animations.css */ @keyframes wiggle { 0% , 100% { transform: rotate( -5 deg); } 50% { transform: rotate( 5 deg); } } |
CSS
/* Import Tailwind CSS */ @import 'tailwindcss/base' ; @import 'tailwindcss/components' ; @import 'tailwindcss/utilities' ; /* Import Your Custom Animation */ @import 'animate.css' ; /* Apply Tailwind CSS classes and your custom animation */ .animate-wiggle { animation: wiggle 0.5 s ease-in-out infinite; } |
Output:
Example 2: We have created a animation “slide” by defining @keyframes in config.js.
// tailwind.config.js
module.exports = {
content: ["./src/**/*.{js,jsx,ts,tsx}"],
theme: {
extend: {
animation: {
wiggle: "heartbeat 0.5s ease infinite",
},
keyframes: {
heartbeat: {
"0%": {
transform: "scale(1)",
},
"25%": {
transform: "scale(1.2)",
},
"50%": {
transform: "scale(1.5)",
},
"100%": {
transform: "scale(1)",
},
},
},
},
},
plugins: [],
};
Implementation to see how to add keyframes.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" > < link rel = "stylesheet" href = "styles.css" > < title >Tailwind CSS with External @keyframes</ title > </ head > < body class = "text-center p-8" > < h1 class="text-5xl font-bold text-green-500 animate-heartbeat"> w3wiki </ h1 > < div class = "mt-8" > < p class = "text-gray-700" > Welcome to the world of coding and learning! </ p > </ div > </ body > |
CSS
/* animations.css */ @keyframes heartbeat { 0% { transform: scale( 1 ); } 25% { transform: scale( 1.2 ); } 50% { transform: scale( 1.5 ); } 100% { transform: scale( 1 ); } } |
CSS
/* Import Tailwind CSS */ @import 'tailwindcss/base' ; @import 'tailwindcss/components' ; @import 'tailwindcss/utilities' ; /* Import Your Custom Animation */ @import 'animation.css' ; /* Apply Tailwind CSS classes and your custom animation */ .animate-heartbeat { animation: heartbeat 0.5 s ease infinite; } |
Output:
How to add @keyframes to a Tailwind CSS config file ?
Tailwind CSS is a utility framework in which we cannot add @keyframes through any built-in method directly to the configuration file. @Keyframes are used to invoke animation effects to our element.
There are various ways to add @keyframes in a Tailwind CSS config file.
Table of Content
- Using External CSS File
- Using Custom Animation in config File