Code for Animation
Here's a basic example where a box glides with varying colors across the screen.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS Animation Example</title> <style> @keyframes slideAndColorChange { 0% { transform: translateX(0px); background-color: blue; } 50% { transform: translateX(200px); background-color: red; } 100% { transform: translateX(0px); background-color: yellow; } } .animated-box { width: 100px; height: 100px; background-color: blue; position: relative; animation-name: slideAndColorChange; animation-duration: 4s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; } </style> </head> <body> <div class="animated-box"></div> </body> </html> |
Explanation of code
Keyframes slideAndColorChange
CSS for .animated-box:
Code for Animation
Here's a basic example where a box glides with varying colors across the screen.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS Animation Example</title> <style> @keyframes slideAndColorChange { 0% { transform: translateX(0px); background-color: blue; } 50% { transform: translateX(200px); background-color: red; } 100% { transform: translateX(0px); background-color: yellow; } } .animated-box { width: 100px; height: 100px; background-color: blue; position: relative; animation-name: slideAndColorChange; animation-duration: 4s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; } </style> </head> <body> <div class="animated-box"></div> </body> </html> |
Explanation of code
Keyframes slideAndColorChange
CSS for .animated-box:
Copyrights © 2024 letsupdateskills All rights reserved