CSS3 में कीफ्रेम एनिमेशन बनाने के लिए, व्यक्तिगत कीफ्रेम परिभाषित करें। कीफ्रेम्स CSS3 में इंटरमीडिएट एनिमेशन स्टेप्स को कंट्रोल करेंगे।
CSS3 में कीफ्रेम्स परिभाषित करने का कोड निम्न है -
उदाहरण
<!DOCTYPE html> <html> <head> <style> body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } div { width: 100px; height: 100px; background: red; position: relative; animation: colorChange 5s infinite; } @keyframes colorChange { from { background: red; left: 0px; } to { background: rgb(32, 229, 255); left: 300px; } } </style> </head> <body> <h1>Defining keyframes in CSS</h1> <div></div> <h2>The above square will change its color and position with time</h2> </body> </html>आउटपुट
उपरोक्त कोड निम्न आउटपुट उत्पन्न करेगा -
5 सेकंड के बाद स्थिति और कलर निम्नानुसार बदल जाएगा -
