| OLD | NEW |
| 1 body {background-color: lightblue;} | 1 body {background-color: lightblue;} |
| 2 .class {color: red;} | 2 .class {color: red;} |
| 3 #id {color: blue} | 3 #id {color: blue} |
| 4 notUsed {color: black} | 4 notUsed {color: black} |
| 5 @media screen and (min-width: 480px) { | 5 @media screen and (min-width: 480px) { |
| 6 body { | 6 body { |
| 7 background-color: lightgreen; | 7 background-color: lightgreen; |
| 8 } | 8 } |
| 9 } | 9 } |
| 10 @import "mystyle.css"; | 10 @import "mystyle.css"; |
| 11 @keyframes mymove { | 11 @keyframes mymove { |
| 12 0% {top: 0px;} | 12 0% {top: 0px;} |
| 13 25% {top: 200px;} | 13 25% {top: 200px;} |
| 14 75% {top: 50px} | 14 75% {top: 50px} |
| 15 100% {top: 100px;} | 15 100% {top: 100px;} |
| 16 } | 16 } |
| 17 div { | 17 div { |
| 18 width: 100px; | 18 width: 100px; |
| 19 height: 100px; | 19 height: 100px; |
| 20 background: red; | 20 background: red; |
| 21 position :relative; | 21 position :relative; |
| 22 -webkit-animation: mymove 5s infinite; /* Safari 4.0 - 8.0 */ | 22 -webkit-animation: mymove 5s infinite; /* Safari 4.0 - 8.0 */ |
| 23 animation: mymove 5s infinite; | 23 animation: mymove 5s infinite; |
| 24 } | 24 } |
| OLD | NEW |