Animation with CSS

<!DOCTYPE html>

<html>

<head>

<style>

div {

width: 100px;

height: 50px;

background-color: red;

position: relative;

animation-name: wellcome;

animation-duration: 3s;

animation-iteration-count: 30;

}

@keyframes wellcome {

0% {background-color:red; left:0px; top:0px;}

25% {background-color:yellow; left:400px; top:0px;}

50% {background-color:blue; left:400px; top:200px;}

75% {background-color:green; left:0px; top:200px;}

100% {background-color:red; left:0px; top:0px;}

}

body {

background-color: lightgray;

}

p {

color:black;

text-align:center;

font:30px bold;

}

</style>

</head>

<body>

<p><b>Welcome to 123codingwithme! Projects</b></p>

</body>

</html>