Home Explore Help
Sign In
Mr2nec
/
hw_2_git
forked from strike9906/hw_2_git
Watch 1
Star 0
Fork 0
Files
Browse Source

add_animation

Mr2nec 3 years ago
parent
85613130c8
commit
dc8331036c
2 changed files with 88 additions and 8 deletions
Split View Show Diff Stats
  1. 75 0
      css/style.css
  2. 13 8
      index2.html

+ 75 - 0
css/style.css
View File 

@@ -0,0 +1,75 @@
 
+img {
 
+    width: 100px;
 
+    height: 100px;
 
+}
 
+.box {
 
+    width: 100px;
 
+    height: 100px;
 
+    background-color: red;
 
+    position: relative;
 
+    -webkit-animation-name: example; /* Safari 4.0 - 8.0 */
 
+    -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
 
+    -webkit-animation-iteration-count: 2; /* Safari 4.0 - 8.0 */
 
+    -webkit-animation-direction: alternate; /* Safari 4.0 - 8.0 */
 
+    animation-name: example;
 
+    animation-duration: 4s;
 
+    animation-iteration-count: 2;
 
+    animation-direction: alternate;
 
+}
 
+/* Safari 4.0 - 8.0 */
 
+@-webkit-keyframes example {
 
+    0% {
 
+        background-color: red;
 
+        left: 0px;
 
+        top: 0px;
 
+    }
 
+    25% {
 
+        background-color: yellow;
 
+        left: 200px;
 
+        top: 0px;
 
+    }
 
+    50% {
 
+        background-color: blue;
 
+        left: 200px;
 
+        top: 200px;
 
+    }
 
+    75% {
 
+        background-color: green;
 
+        left: 0px;
 
+        top: 200px;
 
+    }
 
+    100% {
 
+        background-color: red;
 
+        left: 0px;
 
+        top: 0px;
 
+    }
 
+}
 
+
 
+/* Standard syntax */
 
+@keyframes example {
 
+    0% {
 
+        background-color: red;
 
+        left: 0px;
 
+        top: 0px;
 
+    }
 
+    25% {
 
+        background-color: yellow;
 
+        left: 200px;
 
+        top: 0px;
 
+    }
 
+    50% {
 
+        background-color: blue;
 
+        left: 200px;
 
+        top: 200px;
 
+    }
 
+    75% {
 
+        background-color: green;
 
+        left: 0px;
 
+        top: 200px;
 
+    }
 
+    100% {
 
+        background-color: red;
 
+        left: 0px;
 
+        top: 0px;
 
+    }
 
+}

+ 13 - 8
index2.html
View File 

@@ -1,11 +1,16 @@
 
 <!DOCTYPE html>
 
 <html lang="en">
 
-	<head>
 
-		<meta charset="UTF-8">
 
-		<title>Yoga222</title>
 
-	</head>
 
-	<body>
 
-		<p>new text</p>
 
-		<img src="https://i1.wp.com/www.kudapoedy.com/wp-content/uploads/2019/02/%D0%9A%D1%80%D0%B0%D1%81%D0%B8%D0%B2%D1%8B%D0%B5-%D0%B3%D0%BE%D1%80%D1%8B-%D0%BC%D0%B8%D1%80%D0%B0.jpg?fit=1827%2C1335&ssl=1">
 
-	</body>
 
+    <head>
 
+        <meta charset="UTF-8" />
 
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
+        <link rel="stylesheet" href="css/style.css" />
 
+        <title>Document</title>
 
+    </head>
 
+    <body>
 
+        <p>new text</p>
 
+        <img
 
+            src="https://i1.wp.com/www.kudapoedy.com/wp-content/uploads/2019/02/%D0%9A%D1%80%D0%B0%D1%81%D0%B8%D0%B2%D1%8B%D0%B5-%D0%B3%D0%BE%D1%80%D1%8B-%D0%BC%D0%B8%D1%80%D0%B0.jpg?fit=1827%2C1335&ssl=1"
 
+        />
 
+        <div class="box"></div>
 
+    </body>
 
 </html>