I've been creating an animated background, where there's a plain background colour, and then five objects which move across at different speeds and positions. I've got it to work in files on its own with no other code, but when I've placed it into my main document, it won't work as it does when it's on its own.
I have an xsl document with the html etc in, and then a separate document with the css in.
The xsl, with code not relevant to this taken out is...
<html>
<head>
<title>Blog</title>
<link rel="stylesheet" type="text/css" href="blog.css" />
<script src ="JavaScript.js"> </script>
</head>
<div class="star1"></div>
<div class="star2"></div>
<div class="star3"></div>
<div class="star4"></div>
<div class="star5"></div>
<body>
...
</body>
</html>
The divs are each object which is moving across, which are working in the separate document, and I have a feeling my problem is to do with positioning of everything, but I've tried different variations of relative and absolute positioning and neither seem to be working as I hope. In the below, each star is defined as set in the xsl, but instead of moving as they do when out of it, they're just sitting there in a cluster not moving.
html
{
padding: 100px 0;
}
body
{
overflow: hidden;
background: #0A0F1A no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: fixed;
}
/*background moved and forms here*/
.star1
{
width: 150px;
height: 150px;
background: url(Images/Star1.png);
background-repeat: no-repeat;
background-size: contain;
position: absolute;
border-radius: 200px;
-moz-border-radius: 200px;
-webkit-border-radius: 200px;
-webkit-animation: movestar 30s linear infinite;
-moz-animation: movestar 30s linear infinite;
-o-animation: movestar 30s linear infinite;
}
.star2
{
width: 120px;
height: 120px;
background: url(Images/Star2.png);
background-repeat: no-repeat;
background-size: contain;
position: absolute;
left: 400px;
border-radius: 200px;
-moz-border-radius: 200px;
-webkit-border-radius: 200px;
-webkit-animation: movestar 50s linear infinite;
-moz-animation: movestar 50s linear infinite;
-o-animation: movestar 50s linear infinite;
}
.star3
{
width: 100px;
height: 100px;
background: url(Images/Star3.png);
background-repeat: no-repeat;
background-size: contain;
position: absolute;
left: -400px;
border-radius: 200px;
-moz-border-radius: 200px;
-webkit-border-radius: 200px;
-webkit-animation: movestar 20s linear infinite;
-moz-animation: movestar 20s linear infinite;
-o-animation: movestar 20s linear infinite;
}
.star4
{
width: 80px;
height: 80px;
background: url(Images/Star4.png);
background-repeat: no-repeat;
background-size: contain;
position: absolute;
left: -200px;
border-radius: 200px;
-moz-border-radius: 200px;
-webkit-border-radius: 200px;
-webkit-animation: movestar 10s linear infinite;
-moz-animation: movestar 10s linear infinite;
-o-animation: movestar 10s linear infinite;
}
.star5
{
width: 60px;
height: 60px;
background: url(Images/Star5.png);
background-repeat: no-repeat;
background-size: contain;
position: absolute;
left: 100px;
border-radius: 200px;
-moz-border-radius: 200px;
-webkit-border-radius: 200px;
-webkit-animation: movestar 30s linear infinite;
-moz-animation: movestar 30s linear infinite;
-o-animation: movestar 30s linear infinite;
}
#-webkit-keyframes movestar
{
0% {margin-left: 1000px;}
100% {margin-left: -1000px;}
}
#-moz-keyframes movestar
{
0% {margin-left: 1000px;}
100% {margin-left: -1000px;}
}
#-o-keyframes movestar
{
0% {margin-left: 1000px;}
100% {margin-left: -1000px;}
}
Any help as to why it's not animated like it was before would be hugely appreciated as I've ran out of ideas of how to try fix it. Thanks.
Related
I've got a an image I'm using as a background that is animated in CSS, but it is push all of my content to the bottom of the page with plain white background. Does anyone know how I can get it to act more of an animated wallpaper so my content isn't pushed down?
#map {
height: 400px;
width: 400px;
margin: 0 auto;
}
.check {
text-align: center;
}
h3,
h2,
h1,
a {
text-align: center;
background-color: transparent;
}
#sky {
overflow: hidden;
}
#clouds {
width: 200%;
height: 1000px;
background-image: url('https://images.unsplash.com/photo-1455735459330-969b65c65b1c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1652&q=80');
-webkit-animation: movingclouds 25s linear infinite;
-moz-animation: movingclouds 25s linear infinite;
-o-animation: movingclouds 25s linear infinite;
}
#keyframes movingclouds {
0% {
margin-left: 0%;
}
100% {
margin-left: -100%;
}
}
<div id="sky">
<div id="clouds"></div>
</div>
Move the animation to the background position. This way, it will animate behind whatever is on top of it. In this case, I've moved the background to the body, but you can use absolute/relative position as well.
By animating the margin, you push everything to one side, not just the background.
body {
background-image: url('https://images.unsplash.com/photo-1455735459330-969b65c65b1c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1652&q=80');
-webkit-animation: movingclouds 25s linear infinite;
-moz-animation: movingclouds 25s linear infinite;
-o-animation: movingclouds 25s linear infinite;
}
#keyframes movingclouds {
0% {
background-position: 0%;
}
100% {
background-position: -100%;
}
}
Working example: https://jsbin.com/ruyemijasi/edit?html,css,js,output
I would like to use this image slider: http://codepen.io/rslglover/pen/DBvoA
The image slider works well, but when its finish, it stops. I can't see whats the difference is from the CodePen codes, and what I've done. How can it be it works in the CodePen link?
article{
position: absolute;
left: 450px;
background: #292929;
color: #e3e3e3;
width: 450px;
height: 450px;
text-align: center;
font: 2em/1em sans-serif;
border-box: box-sizing;
padding-top: 0px;
}
article:nth-of-type(1){
animation: slideIn 50s linear 0s infinite;
}
article:nth-of-type(2){
animation: slideIn 50s linear 5s infinite;
}
article:nth-of-type(3){
animation: slideIn 50s linear 10s infinite;
}
article:nth-of-type(4){
animation: slideIn 50s linear 15s infinite;
}
article:nth-of-type(5){
animation: slideIn 50s linear 20s infinite;
}
article:nth-of-type(6){
animation: slideIn 50s linear 25s infinite;
}
article:nth-of-type(7){
animation: slideIn 50s linear 30s infinite;
}
article:nth-of-type(8){
animation: slideIn 50s linear 35s infinite;
}
article:nth-of-type(9){
animation: slideIn 50s linear 40s infinite;
}
article:nth-of-type(10){
animation: slideIn 50s linear 45s infinite;
}
#keyframes slideIn{
0% {left: 450px;}
1% {left: 0;}
10% {left: 0;}
11% {left: -450px;}
100%{left: -450px;}
}
.galleryImg {
height: 450px;
width: 450px;
}
.gallery {
width: 450px;
height: 450px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -225px;
margin-top: -225px;
overflow: hidden;
background: rgba(0,0,0,0.3);
border: 1px solid #fff;
box-shadow:5px 5px 5px 5px rgba(0,0,0,0.7);
}
And my html
<div class="galleryInfo">
<div class="gallery">
<article><img class="galleryImg" src="images/aa2.png" alt=""></article>
<article> <img class="galleryImg" src="images/aa1.png" alt=""></article>
<article><img class="galleryImg" src="images/bb1.png" alt=""></article>
<article><img class="galleryImg" src="images/bb2.png" alt=""></article>
</div>
</div>
Check this out:
HTML:
<div class="galleryInfo">
<div class="gallery">
<section>
<article><img src="https://image.freepik.com/free-icon/medical-samples-in-test-tubes-couple_318-61810.jpg" /></article>
<article><img src="https://image.freepik.com/free-icon/medical-samples-in-test-tubes-couple_318-61810.jpg" /></article>
<article><img src="https://image.freepik.com/free-icon/medical-samples-in-test-tubes-couple_318-61810.jpg" /></article>
<article><img src="https://image.freepik.com/free-icon/medical-samples-in-test-tubes-couple_318-61810.jpg" /></article>
</section>
</div>
</div>
CSS:
html{
background: #aaa;
}
section{
width: 200px;
height: 200px;
position: relative;
left: 50%;
top: 1em;
margin-left: -100px;
overflow: hidden;
background: #292929;
border: 10px solid #fff;
}
/*section:hover article{
animation-play-state: paused;
}*/
article{
position: absolute;
left: 450px;
background: #292929;
color: #e3e3e3;
width: 450px;
height: 450px;
text-align: center;
font: 2em/1em sans-serif;
border-box: box-sizing;
padding-top: 0px;
}
.galleryImg {
height: 450px;
width: 450px;
}
.gallery {
width: 450px;
height: 450px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -225px;
margin-top: -225px;
overflow: hidden;
background: rgba(0,0,0,0.3);
border: 1px solid #fff;
box-shadow:5px 5px 5px 5px rgba(0,0,0,0.7);
}
article:nth-of-type(1){
animation: slideIn 20s linear 0s infinite;
}
article:nth-of-type(2){
animation: slideIn 20s linear 5s infinite;
}
article:nth-of-type(3){
animation: slideIn 20s linear 10s infinite;
}
article:nth-of-type(4){
animation: slideIn 20s linear 15s infinite;
}
#keyframes slideIn{
0% {left: 200px;}
1% {left: 0;}
10% {left: 0;}
11% {left: -200px;}
100%{left: -200px;}
}
Or change position in css file clas galleryInfo and gallery above animation.
The primary reason why your animation appears to stop, is because the CSS is structured for 10 slides.
To maintain the same duration and animation, the keyframes percentages need to be configured for the new total number of slides you are using.
#keyframes slideIn{
0% {left: 200px;} /* Always 0% */
2.5% {left: 0;} /* Equivalent of 0.5s e.g. 0.5/maxTime*100 */
25% {left: 0;} /* Equivalent of 5s e.g. 5/maxTime*100 */
27.5% {left: -200px;} /* Equivalent of 5.5s e.g. 5.5/maxTime*100 */
100%{left: -200px;} /* Always 100% */
}
By changing the keyframes, you will maintain the same slide speed as your codepen example had.
Here is a working snippet.
html{
background: #aaa;
}
section{
width: 200px;
height: 200px;
position: relative;
left: 50%;
top: 1em;
margin-left: -100px;
overflow: hidden;
background: #292929;
border: 10px solid #fff;
}
/*section:hover article{
animation-play-state: paused;
}*/
article{
position: absolute;
left: 200px;
background: #292929;
color: #e3e3e3;
width: 200px;
height: 200px;
text-align: center;
font: 2em/1em sans-serif;
border-box: box-sizing;
padding-top: 80px;
}
/*
* As each slide's animation is 5s, the set duration is totalSlides * 5.
*/
article:nth-of-type(1){
animation: slideIn 20s linear 0s infinite;
}
article:nth-of-type(2){
animation: slideIn 20s linear 5s infinite;
}
article:nth-of-type(3){
animation: slideIn 20s linear 10s infinite;
}
article:nth-of-type(4){
animation: slideIn 20s linear 15s infinite;
}
#keyframes slideIn{
0% {left: 200px;} /* Always 0% */
2.5% {left: 0;} /* Equivalent of 0.5s e.g. 0.5/maxTime*100 */
25% {left: 0;} /* Equivalent of 5s e.g. 5/maxTime*100 */
27.5% {left: -200px;} /* Equivalent of 5.5s e.g. 5.5/maxTime*100 */
100%{left: -200px;} /* Always 100% */
}
<section>
<article>Slide 1</article>
<article>Slide 2</article>
<article>Slide 3</article>
<article>Slide 4</article>
</section>
I'm trying to create a nice old CRT "tv" effect using animation in CSS, but having some problems with the scanlines displaying above and below the intended div.
What I have is a landing page that has 4 divs that link to other areas of the site. The 1st 2 divs are "TVs" each have a background showing the "tv" (static image) of the content of the link.
On a desktop or other larger screen, the 4 divs are displayed as 2x2, on a smaller screen it's shown in a 1x4 format.
I've created a single image that will be animated with css to fake the moving scanlines moving down the 1st 2 divs.
What's happening is that the "scanlines" appear above the "TVs" and move to below the "TVs".
You can see what's happening on JSFiddle:
http://jsfiddle.net/blyzz/ynekxcud/2/
Here's some cleansed HTML code:
<a href="URL1" target="_blank">
<div class="content" id="outside">
<div class="scanlines">
<div class="aniscan" id="aniscanout">
</div>
<div class="aniscan" id="aniscanout2">
</div>
</div>
</div>
</a>
<a href="URL2" target="_blank">
<div class="content" id="inside">
<div class="scanlines">
<div class="aniscan" id="aniscanin">
</div>
<div class="aniscan" id="aniscanin2">
</div>
</div>
</div>
</a>
and the accompanying cleansed CSS:
.content{
width: 300px;
min-width: 300px;
height: 125px;
min-height: 125px;
float:left;
margin: 5px;
border: 3px solid #555555;
z-index: -100;
}
.scanlines{
width: 100%;
height: 100%;
background-repeat: repeat;
z-index: 100;
}
.aniscan{
width: 100%;
height: 100%;
background-image: url('http://www.oocities.org/~special_effect/holo_scanlines.jpg');
background-repeat: repeat-x;
z-index: 200;
position: relative;
opacity:0.6;
}
#inside {
background-image: url('http://www.clipartbest.com/cliparts/xig/7rM/xig7rMriA.png');
border-radius: 0px 15px 0px 0px;
}
#outside{
background-image: url('http://cdn.graphicsfactory.com/clip-art/image_files/image/6/1347556-2587-Royalty-Free-Dog-With-Big-Bone-In-Mouth.jpg');
border-radius: 15px 0px 0px 0px;
}
#aniscanin{
-webkit-animation: mymove 5.2s linear infinite;
-moz-animation: mymove 5.2s linear infinite;
-o-animation: mymove 5.2s linear infinite;
animation: mymove 5.2s linear infinite;
}
#aniscanin2{
-webkit-animation: mymoveb 5.2s linear infinite;
-moz-animation: mymoveb 5.2s linear infinite;
-o-animation: mymoveb 5.2s linear infinite;
animation: mymoveb 5.2s linear infinite;
}
#aniscanout{
-webkit-animation: mymove 4.8s linear infinite;
-moz-animation: mymove 4.8s linear infinite;
-o-animation: mymove 4.8s linear infinite;
animation: mymove 4.8s linear infinite;
}
#aniscanout2{
-webkit-animation: mymoveb 4.8s linear infinite;
-moz-animation: mymoveb 4.8s linear infinite;
-o-animation: mymoveb 4.8s linear infinite;
animation: mymoveb 4.8s linear infinite;
}
#-webkit-keyframes mymove {
0% {top: -125px;}
100% {top: 0px;}
}
#keyframes mymove {
0% {top: -125px;}
100% {top: 0px;}
}
#-webkit-keyframes mymoveb{
0% {top: -125px;}
100% {top: 0px;}
}
#keyframes mymoveb {
0% {top: -125px;}
100% {top: 0px;}
}
I considered making a "window" with higher z-index divs above and below the 2 TVs, but it doesn't really work well with responsive design.
Any help would be appreciated!
P.S. It'd be nice if i could get the scanlines behind the rounded corners as well, but it's not really a deal-breaker - I can always remove the rounded corners.
You need overflow: hidden in your .content class:
Like this:
.content{
width: 300px;
min-width: 300px;
height: 125px;
min-height: 125px;
float:left;
margin: 5px;
border: 3px solid #555555;
z-index: -100;
overflow: hidden;
}
Fiddle:
http://jsfiddle.net/ynekxcud/3/
I'm making a Solar System for school, and I am unable to fully Scroll left and up far enough to see the whole thing. Just to clarify, I am using Safari, and Google Chrome made the problem worse.
html, body {
width: 100%;
height: 100%;
background: url(http://images.kaneva.com/filestore9/4523625/6569743/starryUnightUtexture.jpg) repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
transform: scale(1.2);
transform-origin: 50% 50%;
}
body {
width: 1000px;
height: 1000px;
}
div {
width: 500%;
margin: 0 inherit;
}
#sun {
position: absolute;
top: 50%;
left: 50%;
height: 300px;
width: 300px;
margin-top: -150px;
margin-left: -155px;
box-shadow: 0 0 0px red;
}
#mercury {
/* Style your earth */
position: absolute;
top: 13.5%;
left: 13.5%;
width: 10px;
}
#mercury-orbit {
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 4.81s linear infinite;
-moz-animation: spin-right 4.81s linear infinite;
-ms-animation: spin-right 4.81s linear infinite;
-o-animation: spin-right 4.81s linear infinite;
animation: spin-right 4.81s linear infinite;
}
#venus {
/* Style your earth */
position: absolute;
top: 13.6%;
left: 13.6%;
width: 15px;
}
#venus-orbit {
position: absolute;
top: 50%;
left: 50%;
width: 900px;
height: 900px;
margin-top: -450px;
margin-left: -450px;
border-width: 2px;
border-style: dotted;
border-color: white;
border-radius: 50%;
-webkit-animation: spin-right 12.3s linear infinite;
-moz-animation: spin-right 12.3s linear infinite;
-ms-animation: spin-right 12.3s linear infinite;
-o-animation: spin-right 12.3s linear infinite;
animation: spin-right 12.3s linear infinite;
}
#earth {
/* Style your earth */
position: absolute;
top: 13.8%;
left: 13.8%;
width: 20px;
}
#earth-orbit {
position: absolute;
top: 50%;
left: 50%;
width: 1200px;
height: 1200px;
margin-top: -600px;
margin-left: -600px;
border-width: 2px;
border-style: dotted;
border-color: white;
border-radius: 50%;
-webkit-animation: spin-right 20s linear infinite;
-moz-animation: spin-right 20s linear infinite;
-ms-animation: spin-right 20s linear infinite;
-o-animation: spin-right 20s linear infinite;
animation: spin-right 20s linear infinite;
}
#mars {
/* Style your earth */
position: absolute;
top: 13.8%;
left: 13.8%;
width: 20px;
}
#mars-orbit {
position: absolute;
top: 50%;
left: 50%;
width: 1600px;
height: 1600px;
margin-top: -800px;
margin-left: -800px;
border-width: 2px;
border-style: dotted;
border-color: white;
border-radius: 50%;
-webkit-animation: spin-right 37.6s linear infinite;
-moz-animation: spin-right 37.6s linear infinite;
-ms-animation: spin-right 37.6s linear infinite;
-o-animation: spin-right 37.6s linear infinite;
animation: spin-right 37.6s 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);
}
}
#asteroid1 {
/* Style your earth */
position: absolute;
top: 13.8%;
left: 13.8%;
width: 20px;
}
#asteroid2 {
/* Style your earth */
position: absolute;
top: 13.8%;
left: 13.8%;
width: 20px;
}
#asteroid3 {
/* Style your earth */
position: absolute;
top: 13.8%;
left: 13.8%;
width: 20px;
}
#asteroid4 {
/* Style your earth */
position: absolute;
top: 13.8%;
left: 13.8%;
width: 20px;
}
#asteroid5 {
/* Style your earth */
position: absolute;
top: 13.8%;
left: 13.8%;
width: 20px;
}
#asteroid6 {
/* Style your earth */
position: absolute;
top: 13.8%;
left: 13.8%;
width: 20px;
}
#asteroid7 {
/* Style your earth */
position: absolute;
top: 13.8%;
left: 13.8%;
width: 20px;
}
#asteroid8 {
/* Style your earth */
position: absolute;
top: 13.8%;
left: 13.8%;
width: 20px;
}
#asteroid9 {
/* Style your earth */
position: absolute;
top: 13.8%;
left: 13.8%;
width: 20px;
}
#asteroid-orbit1 {
position: absolute;
top: 50%;
left: 50%;
width: 1900px;
height: 1900px;
margin-top: -950px;
margin-left: -950px;
border-width: 2px;
border-style: dotted;
border-color: white;
border-radius: 50%;
-webkit-animation: spin-right 20s linear infinite;
-moz-animation: spin-right 20s linear infinite;
-ms-animation: spin-right 20s linear infinite;
-o-animation: spin-right 20s linear infinite;
animation: spin-right 20s linear infinite;
}
#asteroid-orbit2 {
position: absolute;
top: 50%;
left: 50%;
width: 1900px;
height: 1900px;
margin-top: -950px;
margin-left: -950px;
border-width: 0px;
border-style: dotted;
border-color: white;
border-radius: 50%;
-webkit-animation: spin-right 23s linear infinite;
-moz-animation: spin-right 23s linear infinite;
-ms-animation: spin-right 23s linear infinite;
-o-animation: spin-right 23s linear infinite;
animation: spin-right 23s linear infinite;
}
#asteroid-orbit3 {
position: absolute;
top: 50%;
left: 50%;
width: 1900px;
height: 1900px;
margin-top: -950px;
margin-left: -950px;
border-width: 0px;
border-style: dotted;
border-color: white;
border-radius: 50%;
-webkit-animation: spin-right 26s linear infinite;
-moz-animation: spin-right 26s linear infinite;
-ms-animation: spin-right 26s linear infinite;
-o-animation: spin-right 26s linear infinite;
animation: spin-right 26s linear infinite;
}
#asteroid-orbit4 {
position: absolute;
top: 50%;
left: 50%;
width: 1900px;
height: 1900px;
margin-top: -950px;
margin-left: -950px;
border-width: 0px;
border-style: dotted;
border-color: white;
border-radius: 50%;
-webkit-animation: spin-right 29s linear infinite;
-moz-animation: spin-right 29s linear infinite;
-ms-animation: spin-right 29s linear infinite;
-o-animation: spin-right 29s linear infinite;
animation: spin-right 29s linear infinite;
}
#asteroid-orbit5 {
position: absolute;
top: 50%;
left: 50%;
width: 1900px;
height: 1900px;
margin-top: -950px;
margin-left: -950px;
border-width: 0px;
border-style: dotted;
border-color: white;
border-radius: 50%;
-webkit-animation: spin-right 32s linear infinite;
-moz-animation: spin-right 32s linear infinite;
-ms-animation: spin-right 32s linear infinite;
-o-animation: spin-right 32s linear infinite;
animation: spin-right 32s linear infinite;
}
#asteroid-orbit6 {
position: absolute;
top: 50%;
left: 50%;
width: 1900px;
height: 1900px;
margin-top: -950px;
margin-left: -950px;
border-width: 0px;
border-style: dotted;
border-color: white;
border-radius: 50%;
-webkit-animation: spin-right 35s linear infinite;
-moz-animation: spin-right 35s linear infinite;
-ms-animation: spin-right 35s linear infinite;
-o-animation: spin-right 35s linear infinite;
animation: spin-right 35s linear infinite;
}
#asteroid-orbit7 {
position: absolute;
top: 50%;
left: 50%;
width: 1900px;
height: 1900px;
margin-top: -950px;
margin-left: -950px;
border-width: 0px;
border-style: dotted;
border-color: white;
border-radius: 50%;
-webkit-animation: spin-right 38s linear infinite;
-moz-animation: spin-right 38s linear infinite;
-ms-animation: spin-right 38s linear infinite;
-o-animation: spin-right 38s linear infinite;
animation: spin-right 38s linear infinite;
}
#asteroid-orbit8 {
position: absolute;
top: 50%;
left: 50%;
width: 1900px;
height: 1900px;
margin-top: -950px;
margin-left: -950px;
border-width: 0px;
border-style: dotted;
border-color: white;
border-radius: 50%;
-webkit-animation: spin-right 41s linear infinite;
-moz-animation: spin-right 41s linear infinite;
-ms-animation: spin-right 41s linear infinite;
-o-animation: spin-right 41s linear infinite;
animation: spin-right 41s linear infinite;
}
#asteroid-orbit9 {
position: absolute;
top: 50%;
left: 50%;
width: 1900px;
height: 1900px;
margin-top: -950px;
margin-left: -950px;
border-width: 0px;
border-style: solid;
border-color: white;
border-radius: 50%;
-webkit-animation: spin-right 43s linear infinite;
-moz-animation: spin-right 43s linear infinite;
-ms-animation: spin-right 43s linear infinite;
-o-animation: spin-right 43s linear infinite;
animation: spin-right 43s 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);
}
}
#jupiter {
/* Style your earth */
position: absolute;
top: 13.6%;
left: 13.6%;
width: 80px;
}
#jupiter-orbit {
position: absolute;
top: 50%;
left: 50%;
width: 3600px;
height: 3600px;
margin-top: -1800px;
margin-left: -1800px;
border-width: 2px;
border-style: dotted;
border-color: white;
border-radius: 50%;
-webkit-animation: spin-right 237s linear infinite;
-moz-animation: spin-right 237s linear infinite;
-ms-animation: spin-right 237s linear infinite;
-o-animation: spin-right 237s linear infinite;
animation: spin-right 237s linear infinite;
}
#saturn {
/* Style your earth */
position: absolute;
top: 12.98%;
left: 12.98%;
width: 160px;
}
#saturn-orbit {
position: absolute;
top: 50%;
left: 50%;
width: 4800px;
height: 4800px;
margin-top: -2400px;
margin-left: -2400px;
border-width: 2px;
border-style: dotted;
border-color: white;
border-radius: 50%;
-webkit-animation: spin-right 588.9s linear infinite;
-moz-animation: spin-right 588.9s linear infinite;
-ms-animation: spin-right 588.9s linear infinite;
-o-animation: spin-right 588.9s linear infinite;
animation: spin-right 588.9s linear infinite;
}
#uranus {
/* Style your earth */
position: absolute;
top: 13.3%;
left: 13.3%;
width: 160px;
}
#uranus-orbit {
position: absolute;
top: 50%;
left: 50%;
width: 5800px;
height: 5800px;
margin-top: -2900px;
margin-left: -2900px;
border-width: 2px;
border-style: dotted;
border-color: white;
border-radius: 50%;
-webkit-animation: spin-right 1680.3s linear infinite;
-moz-animation: spin-right 1680.3s linear infinite;
-ms-animation: spin-right 1680.3s linear infinite;
-o-animation: spin-right 1680.3s linear infinite;
animation: spin-right 1680.3s linear infinite;
}
<html>
<head>
<link rel="stylesheet" href="inner.css" />
<link rel="stylesheet" href="outer.css" />
</head>
<center>
<body>
<!-- Right below is an image of the sun -->
<img id="sun" src="http://www.spiritofexploration.com/images/sun2.png">
<!-- Insert the 'earth' on the next line -->
<div id="mercury-orbit">
<img id="mercury" src="http://www.soulconnections.net/wp-content/uploads/2014/06/mercury.gif">
</div>
<div id="venus-orbit">
<img id="venus" src="http://www.solstation.com/stars/venus.gif">
</div>
<div id="earth-orbit">
<img id="earth" src="http://www.fresnostate.edu/csm/ees/images/earth.jpg">
</div>
<div id="mars-orbit">
<img id="mars" src="http://quest.nasa.gov/mars/background/images/mars.gif">
</div>
<div id="asteroid-orbit1">
<img id="asteroid1" src="http://www.asteroidapp.com/images/asteroid.png">
</div>
<div id="asteroid-orbit2">
<img id="asteroid2" src="http://www.asteroidapp.com/images/asteroid.png">
</div>
<div id="asteroid-orbit3">
<img id="asteroid3" src="http://www.asteroidapp.com/images/asteroid.png">
</div>
<div id="asteroid-orbit4">
<img id="asteroid4" src="http://www.asteroidapp.com/images/asteroid.png">
</div>
<div id="asteroid-orbit5">
<img id="asteroid5" src="http://www.asteroidapp.com/images/asteroid.png">
</div>
<div id="asteroid-orbit6">
<img id="asteroid6" src="http://www.asteroidapp.com/images/asteroid.png">
</div>
<div id="asteroid-orbit7">
<img id="asteroid7" src="http://www.asteroidapp.com/images/asteroid.png">
</div>
<div id="asteroid-orbit8">
<img id="asteroid8" src="http://www.asteroidapp.com/images/asteroid.png">
</div>
<div id="asteroid-orbit9">
<img id="asteroid9" src="http://www.asteroidapp.com/images/asteroid.png">
</div>
<div id="jupiter-orbit">
<img id="jupiter" src="http://fc09.deviantart.net/fs70/f/2014/073/f/9/jupiter_by_kalin1998-d7a71xe.gif">
</div>
<div id="saturn-orbit">
<img id="saturn" src="http://space-facts.com/wp-content/uploads/saturn.png">
</div>
<div id="uranus-orbit">
<img id="uranus" src="http://moonlinks.net/wp-content/uploads/2012/04/uranus.png">
</div>
</body>
</center>
</html>
Any help would be helpful. To be specific, it is mostly the 9 Asteroid orbits, and the orbits of Jupiter, Saturn, and Uranus that need the most help.
You need to do at least 2 things:
Make body bigger; at least 6000px x 6000px
Put the center of each orbit at (3000px, 3000px)
You'll need to scroll around to see things, but everything will be reachable.
I'm trying to learn animation and keyframes in CSS3, and I wonder how I can make #moon-orbit orbit around #earth? Like it does in real life, you know.
html, body {
background-color : #000000;
height : 90%;
width : 90%;
}
#sun {
background-color : #ba8f27;
border-radius : 200px;
box-shadow : 0 0 128px red;
margin-top : -100px;
margin-left : -100px;
left : 50%;
height : 200px;
position : absolute;
top : 50%;
width : 200px;
}
#earth-orbit {
border: 2px solid #373737;
border-radius: 50%;
left: 50%;
height: 500px;
margin-top: -250px;
margin-left: -250px;
position: absolute;
top: 50%;
width: 500px;
-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;
}
#moon-orbit {
border-radius: 50%;
left: 50%;
height: 500px;
margin-top: -250px;
margin-left: -250px;
position: absolute;
top: 50%;
width: 500px;
transform: rotate(360deg);
transform-origin: 50% 100%;
}
#earth {
background-color : #2d7ddc;
border-radius : 50px;
margin-left : -25px;
margin-top : -25px;
height : 50px;
left : 50%;
position : absolute;
top : 0%;
width : 50px;
}
#moon {
background-color : #b2b2b2;
border-radius : 50px;
margin-left : -25px;
margin-top : -25px;
height : 16px;
left : 43%;
position : absolute;
top : 0%;
width : 16px;
}
#-webkit-keyframes spin-right {
100% {
-webkit-transform: rotate(360deg);
}
}
<div id="sun"></div>
<div id="earth-orbit">
<div id="earth"></div>
<div id="moon-orbit">
<div id="moon"></div>
</div>
</div>
jsFiddle demo
You can add a holder for the moon and positioned it in the center of the earth and rotate that div:
Demo
Added stuff:
HTML:
<div class="moon-holder">
<div id="moon"></div>
</div>
CSS:
.moon-holder {
position: absolute;
left: 50%;
top: 0;
width: 50px;
height: 50px;
margin: -25px 0 0 -25px;
-webkit-animation: spin-right 5s linear infinite;
-moz-animation: spin-right 5s linear infinite;
-ms-animation: spin-right 5s linear infinite;
-o-animation: spin-right 5s linear infinite;
animation: spin-right 5s linear infinite;
}