Try It Yourself: CSS Animations

HTML Code

<!DOCTYPE html>
<html>
<head>
  <title>CSS Animations</title>
  <meta charset="UTF-8">
</head>
<body>

<h1>CSS Animations</h1>

<h2>Basic Keyframes</h2>
<div class="demo"></div>

<style>
@keyframes  firstDemo {
  from {background: #ff0022;}
  to {background: #151f28;}
}

.demo{
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: firstDemo;
  animation-duration: 4s;
}
</style>

<h2>Multiple Steps Keyframes</h2>

<div class="demo1"></div>

<style>
@keyframes  secondDemo {
  0%   {background-color:red; left:0px;}
  50%  {background-color:blue; left:200px;}
  100% {background-color:red; left:0px;}
}

.demo1{
  width: 100px;
  height: 100px;
  background: #151f28;
  position: relative;
  animation-name: secondDemo;
  animation-duration: 4s;
}
</style>


</body>
</html>

CSS Code

/* Write your CSS here */

CSS Animations - Playground