Defining Keyframes in CSS3

https://www.tutorialspoint.com/defining-keyframes-in-css3

13-09-2020
|

Question

Defining Keyframes in CSS3

CSS Web Development Front End Technology

To create keyframe animations in CSS3, define individual keyframe. Keyframes will control the intermediate animation steps in CSS3.

Following is the code for defining key frames in CSS3 −

Example

Live Demo

<!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>

Output

The above code will produce the following output −

After 5s the position and color will change as follows −

AmitDiwan

Published on 12-May-2020 13:18:05

Previous Page Print Page