In this CSS Tutorial we are going to learn about CSS Animation Tutorial, so CSS animation is powerful tool for adding interactivity and engagement to your website or web application. by using CSS animation you can create dynamic visual effects, transitions and animations that enhance the user experience and make your website more engaging. in this CSS animation tutorial we want to cover the basics of CSS animation and show you how to create your own animations using CSS.
CSS Animation Tutorial
To get started with CSS animation you need to have basic understanding of CSS and HTML. CSS animation works by applying series of keyframes to an element which describes the animation over time.
This is an example of simple CSS animation that animates the background color of button on hover, in this example we have used transition property to specify the property we want to animate (background-color), the duration of the animation (0.3s) and the easing function (ease). when the user hovers over the button background color animates smoothly from the original color to the new color.
|
1 2 3 4 5 6 7 8 |
.button { background-color: #007bff; transition: background-color 0.3s ease; } .button:hover { background-color: #0056b3; } |
In addition to transitions CSS animation also allows you to define more complex animations using keyframes. Keyframes define specific points in an animation sequence and CSS will interpolate styles between the keyframes to create smooth animation.
This is an example of more complex animation that uses keyframes to create rotating spinner:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
.spinner { border: 2px solid #ccc; border-top-color: #007bff; border-radius: 50%; width: 24px; height: 24px; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } |
You can use it with HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
<!DOCTYPE html> <html> <head> <title>CSS Animation Tutorial</title> <style> .spinner { border: 2px solid #ccc; border-top-color: #007bff; border-radius: 50%; width: 24px; height: 24px; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } </style> </head> <body> <div class="spinner"></div> </body> </html> <!DOCTYPE html> <html> <head> <title>CSS Animation Tutorial</title> <style> .spinner { border: 2px solid #ccc; border-top-color: #007bff; border-radius: 50%; width: 24px; height: 24px; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } </style> </head> <body> <div class="spinner"></div> </body> </html> |
In this example the HTML and CSS code are combined into one file. style tags are used to enclose the CSS code and after that applied to the div element with the class name spinner. when you open this file in web browser you should see spinning animation like this.
CSS animation can also be combined with JavaScript to create even more complex and dynamic animations. for example you might use JavaScript to trigger an animation when the user scrolls to certain point on the page or when they click button.
This is an example of simple animation that uses JavaScript to toggle the visibility of an element:
CSS Code
|
1 2 3 4 5 6 7 8 |
#my-element { opacity: 0; transition: opacity 0.3s ease; } #my-element.show { opacity: 1; } |
JavaScript Code
|
1 2 3 4 5 6 7 8 9 |
const myElement = document.getElementById('my-element'); function showElement() { myElement.classList.add('show'); } function hideElement() { myElement.classList.remove('show'); } |
In this example we have define CSS transition that animates the opacity of an element over 0.3 seconds. after that we have define JavaScript function that toggles .show class on the element, which triggers the animation.
You can use it practically inside HTML file
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
<!DOCTYPE html> <html> <head> <title>CSS Animation Tutorial</title> <style> #my-element { opacity: 0; transition: opacity 0.3s ease; } #my-element.show { opacity: 1; } </style> </head> <body> <button onclick="toggleElement()">Toggle Element</button> <div id="my-element">Welcome to geekscoders.com</div> <script> const myElement = document.getElementById('my-element'); function toggleElement() { myElement.classList.toggle('show'); } </script> </body> </html> <!DOCTYPE html> <html> <head> <title>CSS Animation Tutorial</title> <style> #my-element { opacity: 0; transition: opacity 0.3s ease; } #my-element.show { opacity: 1; } </style> </head> <body> <button onclick="toggleElement()">Toggle Element</button> <div id="my-element">Hello World!</div> <script> const myElement = document.getElementById('my-element'); function toggleElement() { myElement.classList.toggle('show'); } </script> </body> </html> |
In this example a button and a div element with an id of my-element are added to the HTML. CSS code is used to set the initial opacity of the div element to 0, and to create transition effect when the opacity changes. JavaScript code is used to toggle the show class on the div element when the button is clicked, which triggers the opacity transition and reveals or hides the div element.
This will be the result
