sun

by Paco86

HTML

<div class="sun"></div>
<div class="grass"></div>

CSS

body {
  margin: 0 0 0 0;
  background-color: #2c3e50;
  animation-name: skyColor;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-delay: 0;
}

.grass {
  background: green;
  height: 600px;
  width: 100%;
  position: absolute;
}

.sun {
  background: #f1c40f;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  animation-name: sunMotion;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-delay: 0;
}

@keyframes skyColor {
	0% {
		background-color: black;
	}
	
	20% {
		background-color: pink;
	}
	
	30% {
		background-color: blue;
	}
	
	70% {
		background-color: blue;
	}
	
	80% {
		background-color: pink;
	}
	
	90% {
		background-color: black;
	}
	
	100% {
		background-color: black;
	}
	
}


@keyframes sunMotion {
	0% {
		transform: translate(0px, 200px);
		background-color: red;
	}
	
	25% {
		transform: translate(200px, 0px);
		background-color: orange;
	}
	
	50% {
		transform: translate(400px, -100px);
		background-color: yellow;
	}
	
	75% {
		transform: translate(600px, 0px);
		background-color: orange;
	}

	100% {
		transform: translate(800px, 200px);
		background-color: red;
	}
	
}