diff --git a/animation.html b/animation.html
new file mode 100644
index 0000000..265fda2
--- /dev/null
+++ b/animation.html
@@ -0,0 +1,38 @@
+<head>
+  <style>
+
+    @keyframes style1{
+        from(background-color: tomato;)
+        to(background-color: blue;)
+    }
+    @keyframes style2 {
+
+
+    }
+    #animation{
+        width:400px;
+        height: 400px;
+        background-color: red;
+        animation-name: style1;
+        animation-duration: 10s;
+        animation-iteration-count: infinite;
+    }
+    #animation2{
+        width: 400px;
+        height: 400px;
+        background-color: red;
+        animation-name:a;
+        animation-duration: 2s;
+
+    }
+  </style>
+</head>
+
+<body>
+  <div style="width: 600px; height: 300px" id="animation">
+    <p>animation text</p>
+  </div>
+  <div id="animation2">
+    <p>animation2</p>
+  </div>
+</body>
