Skip to content

Instantly share code, notes, and snippets.

@12458
Last active June 24, 2020 13:10
Show Gist options
  • Save 12458/7b4e0907c382052f47b315a0d71938d9 to your computer and use it in GitHub Desktop.
Save 12458/7b4e0907c382052f47b315a0d71938d9 to your computer and use it in GitHub Desktop.
<img src="sun.png" id="sun"/>
<img src="unknown.png" id="moon"/>
<style>
body {
margin:0;
}
@keyframes sunrise {
0% {top:400px;left:0%;width:300px;}
10% {top:350px;left:10%;width:300px;}
20% {top:310px;left:20%;width:300px;}
30% {top:280px;left:30%;width:300px;}
40% {top:260px;left:40%;width:300px;}
50% {top:250px;left:50%;visibility:hidden;}
100% {top:250px;left:50%;visibility:hidden;}
}
@keyframes moondown {
0% {top:250px;visibility:hidden;}
50% {top:250px;left:50%;visibility:hidden;}
60% {top:260px;left:60%;visibility:visible;}
70% {top:280px;left:70%;}
80% {top:310px;left:80%;}
90% {top:350px;left:90%;}
100% {top:400px;left:100%;}
}
#sun {
width:300px;
animation: sunrise 6s infinite;
animation-timing-function: linear;
position:fixed;
}
#moon {
width:300px;
animation: moondown 6s infinite;
animation-timing-function: linear;
position:fixed;
}
</style>
@12458
Copy link
Author

12458 commented Jun 24, 2020

@12458
Copy link
Author

12458 commented Jun 24, 2020

visibility:hidden
visibility:visible

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment