<!DOCTYPE HTML>
<html>
<head>
<title>My first CSS animation</title>
<h1>CSS Animation</h1>
<script>
document.getElementById("clickMe")
</script>
<style>
h1 {
color: darkblue;
text-align: center;
font-family: verdana;
font-size: 25;
background-color: lightblue;
border-radius: 10px;
}
body {
background-color: lightblue;
animation-name: originBodyColorChange;
animation-duration: 4s;
}
@keyframes originBodyColorChange {
from {background-color: darkblue;}
to {background-color: lightblue;}
}
.movingBox {
background-color: darkblue;
width: 100px;
height: 100px;
position: relative;
border-radius: 10px;
animation-name: movingBox;
animation-delay: 4s;
animation-duration: 4s;
animation-iteration-count: infinite;
}
@keyframes movingBox{
0% {top: 0px; left: 0px}
25% {top: 0px; left: 100px}
50% {top: 100px; left: 100px}
75% {top: 100px; left: 0px}
100% {top: 0px; left: 0px}
}
.clickMe {
width: 100px;
height: 100px;
border-radius: 10px;
background-color: darkblue;
font-family: Verdana;
color: lightblue;
border: none;
}
</style>
</head>
<body>
<div class="movingBox">
<button class="clickMe" id="clickMe">Click me!</button>
</div>
</body>
</html>