Home
CSS animations create your own galaxy with keyframes - Fri Feb 20, 2015 12:20 am
Here is a sample code I made of a planet orbiting the sun using simple CSS transitions.
Here's how to build your own solar system
Let's start and create an html document.
Then we want to create the style.css document and save both the index and style.css to the same folder.
Here's what you do for your css animations.
See the code in action: https://jsfiddle.net/2pygo6zo/
See Final Result: https://jsfiddle.net/2pygo6zo/embedded/result/
#css #animation #keyframes
Here's how to build your own solar system
Let's start and create an html document.
- Code:
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- Right below is an image of the sun -->
<img id="sun" src="http://goo.gl/PmbqZa">
<!-- Insert the 'earth' on the next line -->
<div id='earth-orbit'>
<img id="earth" src="http://goo.gl/41IWnf">
</div>
</body>
</html>
Then we want to create the style.css document and save both the index and style.css to the same folder.
Here's what you do for your css animations.
- Code:
html, body {
/* The universe takes up all available space */
width: 100%;
height: 100%;
/* The universe is black */
background-color: black;
}
#sun {
position: absolute;
/* Positions the top-left corner of the image to be *
/* in the middle of the box */
top: 50%;
left: 50%;
/* Play with these numbers to see what it does */
height: 200px;
width: 200px;
margin-top: -100px;
margin-left: -100px;
border-color: orange;
border-width: 2px;
border-style: solid;
border-radius: 50%;
}
#earth {
/* Style your earth */
position: absolute;
top: 0;
left: 50%;
height: 50px;
width: 50px;
margin-left: -25px;
margin-top: -25px;
}
#earth-orbit {
/* For Section #2 */
position: absolute;
top: 50%;
left: 50%;
width: 500px;
height: 500px;
margin-top: -250px;
margin-left: -250px;
border-width: 2px;
border-style: dotted;
border-color: white;
border-radius: 50%;
-webkit-animation: spin-right 10s linear infinite;
-moz-animation: spin-right 10s linear infinite;
-ms-animation: spin-right 10s linear infinite;
-o-animation: spin-right 10s linear infinite;
animation: spin-right 10s linear infinite;
}
@-webkit-keyframes spin-right {
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes spin-right {
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
See the code in action: https://jsfiddle.net/2pygo6zo/
See Final Result: https://jsfiddle.net/2pygo6zo/embedded/result/
#css #animation #keyframes
