[email protected]

Tailwind CSS Word Animation

By Karthik Ponnam

Word Animation made using Tailwind CSS

Share

mail here<\/a>\r\n <\/p>\r\n <\/div>\r\n<\/div>\r\n\r\n<style>\r\n\r\n@keyframes word {\r\n 0% {\r\n transform: translateY(100%);\r\n }\r\n 15% {\r\n transform: translateY(-10%);\r\n animation-timing-function: ease-out;\r\n }\r\n\r\n 20% {\r\n transform: translateY(0);\r\n }\r\n\r\n 40%,\r\n 100% {\r\n transform: translateY(-110%);\r\n }\r\n}\r\n\r\n.animate-word {\r\n animation: word 7s infinite;\r\n}\r\n.animate-word-delay-1 {\r\n animation: word 7s infinite;\r\n animation-delay: -1.4s;\r\n}\r\n.animate-word-delay-2 {\r\n animation: word 7s infinite;\r\n animation-delay: -2.8s;\r\n}\r\n.animate-word-delay-3 {\r\n animation: word 7s infinite;\r\n animation-delay: -4.2s;\r\n}\r\n.animate-word-delay-4 {\r\n animation: word 7s infinite;\r\n animation-delay: -5.6s;\r\n}\r\n\r\n<\/style>","author_type":"App\\User","author_id":2353,"collection_id":null,"fork_id":null,"votes":5,"score":"4.6","visits":6039,"popularity":414,"slug":"word-animation","approved":1,"created_at":"2023-02-12T05:07:38.000000Z","updated_at":"2025-04-18T07:17:17.000000Z","downloads":65,"code_views":1325,"center":false,"notified":0,"premium":0,"tailwind_config":null,"type":"component","css":"https:\/\/cdn.tailwindcss.com","should_tweet":1,"media":[{"id":8803,"model_type":"App\\Component","model_id":4477,"collection_name":"preview","name":"temp77341","file_name":"temp77341.png","mime_type":"image\/png","disk":"public","size":26556,"manipulations":[],"custom_properties":[],"responsive_images":{"media_library_original":{"urls":["temp77341___media_library_original_1280_957.png","temp77341___media_library_original_1070_800.png","temp77341___media_library_original_895_669.png"],"base64svg":"data:image\/svg+xml;base64,PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHg9IjAiCiB5PSIwIiB2aWV3Qm94PSIwIDAgMTI4MCA5NTciPgoJPGltYWdlIHdpZHRoPSIxMjgwIiBoZWlnaHQ9Ijk1NyIgeGxpbms6aHJlZj0iZGF0YTppbWFnZS9qcGVnO2Jhc2U2NCwvOWovNEFBUVNrWkpSZ0FCQVFFQVlBQmdBQUQvL2dBN1ExSkZRVlJQVWpvZ1oyUXRhbkJsWnlCMk1TNHdJQ2gxYzJsdVp5QkpTa2NnU2xCRlJ5QjJPREFwTENCeGRXRnNhWFI1SUQwZ09UQUsvOXNBUXdBREFnSURBZ0lEQXdNREJBTURCQVVJQlFVRUJBVUtCd2NHQ0F3S0RBd0xDZ3NMRFE0U0VBME9FUTRMQ3hBV0VCRVRGQlVWRlF3UEZ4Z1dGQmdTRkJVVS85c0FRd0VEQkFRRkJBVUpCUVVKRkEwTERSUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVLzhBQUVRZ0FHQUFnQXdFUkFBSVJBUU1SQWYvRUFCOEFBQUVGQVFFQkFRRUJBQUFBQUFBQUFBQUJBZ01FQlFZSENBa0tDLy9FQUxVUUFBSUJBd01DQkFNRkJRUUVBQUFCZlFFQ0F3QUVFUVVTSVRGQkJoTlJZUWNpY1JReWdaR2hDQ05Dc2NFVlV0SHdKRE5pY29JSkNoWVhHQmthSlNZbktDa3FORFUyTnpnNU9rTkVSVVpIU0VsS1UxUlZWbGRZV1ZwalpHVm1aMmhwYW5OMGRYWjNlSGw2ZzRTRmhvZUlpWXFTazVTVmxwZVltWnFpbzZTbHBxZW9xYXF5czdTMXRyZTR1YnJDdzhURnhzZkl5Y3JTMDlUVjF0ZlkyZHJoNHVQazVlYm42T25xOGZMejlQWDI5L2o1K3YvRUFCOEJBQU1CQVFFQkFRRUJBUUVBQUFBQUFBQUJBZ01FQlFZSENBa0tDLy9FQUxVUkFBSUJBZ1FFQXdRSEJRUUVBQUVDZHdBQkFnTVJCQVVoTVFZU1FWRUhZWEVUSWpLQkNCUkNrYUd4d1Frak0xTHdGV0p5MFFvV0pEVGhKZkVYR0JrYUppY29LU28xTmpjNE9UcERSRVZHUjBoSlNsTlVWVlpYV0ZsYVkyUmxabWRvYVdwemRIVjJkM2g1ZW9LRGhJV0doNGlKaXBLVGxKV1dsNWlabXFLanBLV21wNmlwcXJLenRMVzJ0N2k1dXNMRHhNWEd4OGpKeXRMVDFOWFcxOWpaMnVMajVPWG01K2pwNnZMejlQWDI5L2o1K3YvYUFBd0RBUUFDRVFNUkFEOEEvS3FnQW9BS0FDZ0JVSURnc01pZ0RTam50Q0JsS0FKV3VMQVJuNU1tZ0RKa0tseVZHQlFBMmdBb0FLQUNnRC8vMlE9PSI+Cgk8L2ltYWdlPgo8L3N2Zz4="}},"order_column":8590,"created_at":"2023-02-12T05:07:46.000000Z","updated_at":"2023-02-12T05:07:47.000000Z","conversions_disk":"public","uuid":"61b17ae8-394e-4376-a93d-84d5c04eccf0","generated_conversions":{"thumb":true,"ogimage":true},"original_url":"https:\/\/tailwindcomponents.com\/storage\/8803\/temp77341.png","preview_url":""}],"author":{"id":2353,"name":"Karthik Ponnam","slug":"karthik-ponnam","bio":null,"avatar":"\/storage\/avatars\/YchyiKkI98P8pBRelzcytLXSKO4Zi6AGtZmIrWyD.png","header":null,"created_at":"2021-02-24T13:46:03.000000Z","updated_at":"2021-02-25T03:32:35.000000Z"},"tags":[{"id":5,"name":{"en":"Widget"},"description":"Check out our collection of 500+ widget examples. Use our snippets to preview the code and spend less time re-inventing the wheel.","meta_description":"Check out our collection of 500+ widget examples. Use our snippets to preview the code and spend less time re-inventing the wheel.","slug":{"en":"widget"},"type":null,"order_column":14,"created_at":"2019-07-04T08:20:17.000000Z","updated_at":"2022-08-01T16:16:36.000000Z","pivot":{"taggable_type":"App\\Component","taggable_id":4477,"tag_id":5}},{"id":36,"name":{"en":"Typography"},"description":"Typography is one of the most important elements of a website that should present your design and content as clearly and efficiently as possible. See below our collection of Typography components.","meta_description":"Visit our Typography collection that you can add to your Tailwind UI project for presenting your design and content.","slug":{"en":"typography"},"type":null,"order_column":35,"created_at":"2022-08-31T14:24:43.000000Z","updated_at":"2022-12-21T11:01:25.000000Z","pivot":{"taggable_type":"App\\Component","taggable_id":4477,"tag_id":36}}],"fork":null,"favorites":[{"id":6940,"name":"123ApplePie","slug":"123applepie","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/73269263?v=4","header":null,"created_at":"2022-02-21T13:49:46.000000Z","updated_at":"2022-02-21T13:49:46.000000Z","pivot":{"component_id":4477,"user_id":6940}},{"id":2196,"name":"klawdyo","slug":"klawdyo","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/100168?v=4","header":null,"created_at":"2021-02-09T00:59:56.000000Z","updated_at":"2021-02-09T00:59:56.000000Z","pivot":{"component_id":4477,"user_id":2196}},{"id":11237,"name":"luccivera","slug":"luccivera","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/75911174?v=4","header":null,"created_at":"2023-03-01T04:59:19.000000Z","updated_at":"2023-03-01T04:59:19.000000Z","pivot":{"component_id":4477,"user_id":11237}},{"id":11483,"name":"Supernova3339","slug":"supernova3339","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/63515814?v=4","header":null,"created_at":"2023-03-17T01:35:50.000000Z","updated_at":"2023-03-17T01:35:50.000000Z","pivot":{"component_id":4477,"user_id":11483}},{"id":9030,"name":"zariyatyasin","slug":"zariyatyasin","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/64485419?v=4","header":null,"created_at":"2022-09-12T18:44:11.000000Z","updated_at":"2022-09-12T18:44:11.000000Z","pivot":{"component_id":4477,"user_id":9030}},{"id":10805,"name":"NathanielRand","slug":"nathanielrand","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/16087849?v=4","header":null,"created_at":"2023-02-01T06:00:51.000000Z","updated_at":"2023-02-01T06:00:51.000000Z","pivot":{"component_id":4477,"user_id":10805}},{"id":1434,"name":"Matt","slug":"matt","bio":null,"avatar":"https:\/\/www.gravatar.com\/avatar\/2098eb6a3d48b22ed0692849699c795a","header":null,"created_at":"2020-10-27T13:11:58.000000Z","updated_at":"2020-10-27T13:11:58.000000Z","pivot":{"component_id":4477,"user_id":1434}},{"id":10570,"name":"0v3nb1rd","slug":"0v3nb1rd","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/34045994?v=4","header":null,"created_at":"2023-01-18T12:04:08.000000Z","updated_at":"2023-01-18T12:04:08.000000Z","pivot":{"component_id":4477,"user_id":10570}},{"id":12107,"name":"KasperskyZiv","slug":"kasperskyziv","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/11722351?v=4","header":null,"created_at":"2023-04-27T19:35:45.000000Z","updated_at":"2023-04-27T19:35:45.000000Z","pivot":{"component_id":4477,"user_id":12107}},{"id":12175,"name":"lastofthedinosaurs","slug":"lastofthedinosaurs","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/91705770?v=4","header":null,"created_at":"2023-05-02T09:21:58.000000Z","updated_at":"2023-05-02T09:21:58.000000Z","pivot":{"component_id":4477,"user_id":12175}},{"id":12338,"name":"jmcelreavey","slug":"jmcelreavey","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/6317960?v=4","header":null,"created_at":"2023-05-13T08:39:15.000000Z","updated_at":"2023-05-13T08:39:15.000000Z","pivot":{"component_id":4477,"user_id":12338}},{"id":12553,"name":"Shan Abbas","slug":"shan-abbas","bio":null,"avatar":"https:\/\/www.gravatar.com\/avatar\/cc11280c777385ccb723ec21f2b7f6cc","header":null,"created_at":"2023-05-27T12:23:54.000000Z","updated_at":"2023-05-27T12:23:54.000000Z","pivot":{"component_id":4477,"user_id":12553}},{"id":12892,"name":"Ian","slug":"ian-1","bio":null,"avatar":"https:\/\/www.gravatar.com\/avatar\/ba838714515cc31b167caad677033c56","header":null,"created_at":"2023-06-23T07:50:03.000000Z","updated_at":"2023-06-23T07:50:03.000000Z","pivot":{"component_id":4477,"user_id":12892}},{"id":12852,"name":"dltlaos11","slug":"dltlaos11","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/74396128?v=4","header":null,"created_at":"2023-06-19T17:54:26.000000Z","updated_at":"2023-06-19T17:54:26.000000Z","pivot":{"component_id":4477,"user_id":12852}},{"id":13307,"name":"Eva-Demmer","slug":"eva-demmer","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/81107327?v=4","header":null,"created_at":"2023-07-22T08:47:34.000000Z","updated_at":"2023-07-22T08:47:34.000000Z","pivot":{"component_id":4477,"user_id":13307}},{"id":6729,"name":"EL-MOURABITsaber","slug":"el-mourabitsaber","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/85076651?v=4","header":null,"created_at":"2022-01-31T00:44:41.000000Z","updated_at":"2022-01-31T00:44:41.000000Z","pivot":{"component_id":4477,"user_id":6729}},{"id":14352,"name":"UmutAkturk14","slug":"umutakturk14","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/84997345?v=4","header":null,"created_at":"2023-09-25T18:08:44.000000Z","updated_at":"2023-09-25T18:08:44.000000Z","pivot":{"component_id":4477,"user_id":14352}},{"id":14656,"name":"kardelen90","slug":"kardelen90","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/135968655?v=4","header":null,"created_at":"2023-10-12T19:18:13.000000Z","updated_at":"2023-10-12T19:18:13.000000Z","pivot":{"component_id":4477,"user_id":14656}},{"id":14848,"name":"maccad","slug":"maccad","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/6451318?v=4","header":null,"created_at":"2023-10-24T11:06:07.000000Z","updated_at":"2023-10-24T11:06:07.000000Z","pivot":{"component_id":4477,"user_id":14848}},{"id":14122,"name":"Orhan F","slug":"orhan-f","bio":null,"avatar":"https:\/\/www.gravatar.com\/avatar\/84785cda98bcaeed6970a4ab37fdd805","header":null,"created_at":"2023-09-12T12:18:20.000000Z","updated_at":"2023-09-12T12:18:20.000000Z","pivot":{"component_id":4477,"user_id":14122}},{"id":16134,"name":"ctrljames","slug":"ctrljames","bio":null,"avatar":"\/storage\/avatars\/lMpJLAqN28ZJJGQCY5AQ3u26YWS9brlZi2jRTXAV.jpg","header":"\/storage\/headers\/M9haOK3UGgaF25rhrulcTn76y9C6sOJuYQKq0MH6.jpg","created_at":"2024-01-01T06:41:07.000000Z","updated_at":"2024-01-22T15:16:15.000000Z","pivot":{"component_id":4477,"user_id":16134}},{"id":17386,"name":"FernyCastro8","slug":"fernycastro8","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/124219457?v=4","header":null,"created_at":"2024-03-06T05:46:07.000000Z","updated_at":"2024-03-06T05:46:07.000000Z","pivot":{"component_id":4477,"user_id":17386}},{"id":14758,"name":"brenot","slug":"brenot","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/1885417?v=4","header":null,"created_at":"2023-10-18T20:38:26.000000Z","updated_at":"2023-10-18T20:38:26.000000Z","pivot":{"component_id":4477,"user_id":14758}}]}" :edit="false"> Full screen Preview

Karthik Ponnam

8 components

Tailwind CSS Word Animation

Community Rate

Related components