The following HTML5 and CSS3 animation is giving me two different issues and I've not been able to find previous answers to the question that have worked on my code. I'm curious if I'm doing something completely wrong here.
I have tried the solutions in this question, and this one with no results.
The two issues:
1.) The moon orbit transforms fine; the moon, as a child element, transforms as well. I attempt to apply the opposite transform but it doesn't appear to have any effect.
2.) I'm trying to alter the z-index so the moon goes behind the planet. The orbit border is temporary so no worries there but no matter what I set the z-index to I can't get the effect.
body {
height: 100%;
top: 0px;
bottom: 0px;
margin-top: 300px;
background-color: #143856;
}
.moonorbit {
position: relative;
top: -249px;
left: 309px;
width: 500px;
height: 500px;
border: 2px solid white;
border-radius: 50%;
-moz-transform: rotateX(75deg);
-webkit-transform: rotateX(75deg);
-o-transform: rotateX(75deg);
-ms-transform: rotateX(75deg);
transform: rotateX(75deg);
}
.mooncontainer {
position: absolute;
top: 175px;
left: 175px;
width: 150px !important;
height: 150px;
-moz-transform: rotateX(-75deg);
-webkit-transform: rotateX(-75deg);
-o-transform: rotateX(-75deg);
-ms-transform: rotateX(-75deg);
transform: rotateX(-75deg);
animation: moon-orbit 10s linear infinite;
}
.moon {
width: 150px !important;
height: 150px;
border-radius: 50%;
background: red url(img/planets_MOON.png) no-repeat;
background-size: cover;
animation: rotate 10s linear infinite;
}
.earth {
position: absolute;
width: 417px;
top: 100px;
left: 350px;
z-index: 0;
height: 209px;
}
.earth .planet {
/*width: 417px !important;
height: 417px;*/
width: 300px !important;
height: 300px;
background: yellow url(img/planets_EARTH.png) no-repeat;
background-size: cover;
border-radius: 50%;
margin: 0 auto;
}
/*Moon Orbit*/
#keyframes moon-orbit {
0% {
transform: rotateZ(0deg) translateX(250px);
}
100% {
transform: rotateZ(360deg) translateX(250px);
}
}
#keyframes rotate {
0% {
z-index: 5;
transform: rotateZ(0deg);
}
25% {
z-index: -5;
}
50% {
z-index: -5;
}
75% {
z-index: 5;
}
100% {
z-index: 5;
transform: rotateZ(-360deg);
}
}
<body>
<div class="earth">
<div class="planet"></div>
</div>
<div class="moonorbit">
<div class="mooncontainer">
<div class="moon"></div>
</div>
</div>
</body>
About your first issue, you are applying the technique ok. But there are 2 transformations that you need to correct, the one from the animation of the circle, that you have done, and the one from the inclination of the orbit (the rotateX(75deg)
This would be your demo with the correction applied
body {
height: 60%;
top: 0px;
bottom: 0px;
margin-top: 300px;
background-color: #143856;
}
.moonorbit {
position: relative;
top: -300px;
left: 209px;
width: 500px;
height: 500px;
border: 2px solid white;
border-radius: 50%;
transform: rotateX(75deg);
transform-style: preserve-3d;
}
.mooncontainer {
position: absolute;
top: 175px;
left: 175px;
width: 150px !important;
height: 150px;
-webkit-transform: rotateX(-75deg);
transform: rotateX(-75deg);
animation: moon-orbit 10s linear infinite;
transform-style: preserve-3d;
}
.moon {
width: 150px !important;
height: 150px;
border-radius: 50%;
background-color: white;
background-size: cover;
animation: rotate 10s linear infinite;
transform-style: preserve-3d;
}
.earth {
position: absolute;
width: 417px;
top: 100px;
left: 250px;
z-index: 0;
height: 209px;
}
.earth .planet {
/*width: 417px !important;
height: 417px;*/
width: 300px !important;
height: 300px;
background-color: lightgreen;
background-size: cover;
border-radius: 50%;
margin: 0 auto;
}
/*Moon Orbit*/
#keyframes moon-orbit {
0% {
transform: rotateZ(0deg) translateX(250px);
}
100% {
transform: rotateZ(360deg) translateX(250px);
}
}
#keyframes rotate {
0% {
transform: rotateZ(0deg) rotateX(-75deg); /* added rotateX(-75deg) to compensate */
}
100% {
transform: rotateZ(-360deg) rotateX(-75deg);
}
}
<div class="earth">
<div class="planet"></div>
</div>
<div class="moonorbit">
<div class="mooncontainer">
<div class="moon"></div>
</div>
</div>
About the second issue, your best bet is to work all the time in 3d, so it will be automatically solved. Another technique that makes it simpler is to chain the transforms. In my demo I have chained everything, so it's easier to get the control (and you have a simpler HTML
body {
height: 60%;
top: 0px;
bottom: 0px;
background-color: #143856;
}
.moon {
width: 150px;
height: 150px;
border-radius: 50%;
background: url(http://i.stack.imgur.com/L3IE5.jpg);
background-size: 120%;
background-position: center center;
animation: rotate 10s linear infinite;
transform-style: preserve-3d;
margin: auto;
position: absolute;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
}
.earth {
position: absolute;
width: 300px;
height: 300px;
background: url(http://i.stack.imgur.com/5sqwZ.jpg);
background-size: 140%;
background-position: center center;
border-radius: 50%;
margin: 100px 200px;
perspective: 1500px;
transform-style: preserve-3d;
}
#keyframes rotate {
0% {
transform: rotateX(-75deg) rotateZ(0deg) translateX(300px) rotateZ(0deg) rotateX(75deg);
}
100% {
transform: rotateX(-75deg) rotateZ(-360deg) translateX(300px) rotateZ(360deg) rotateX(75deg);
}
}
<div class="earth">
<div class="moon"></div>
</div>
Trying to fix this with z-index will end in failure 70% all the time. lol See what I did there? Anyways, your best bet is to do this with a keyframes. Create a keyframe to draw out your path and to be honest you will need other things that would take a while to explain but How about I'll post my code here and the DEMO and you will be able to see the difference?
HTML
<div id="universe" class="scale-stretched">
<div id="solar-system" class="earth">
<div id="earth" class="orbit">
<div class="pos">
<div class="planet"> </div>
</div>
</div>
<div id="sun"> </div>
</div>
</div>
CSS
#universe {
z-index: 1;
position: absolute;
overflow: hidden;
width: 100%;
height: 100%;
background-position: center 40%;
background-repeat: no-repeat;
background-size: cover; }
#solar-system {
position: absolute;
width: 100%;
height: 100%;
transform-style: preserve-3d; }
.orbit {
position: absolute;
top: 50%;
left: 50%;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 50%;
transform-style: preserve-3d;
animation-name: orbit;
animation-iteration-count: infinite;
animation-timing-function: linear; }
.orbit .orbit {
animation-name: suborbit; }
.pos {
position: absolute;
top: 50%;
width: 2em;
height: 2em;
margin-top: -1em;
margin-left: -1em;
transform-style: preserve-3d;
animation-name: invert;
animation-iteration-count: infinite;
animation-timing-function: linear; }
#sun, .planet, #earth{
position: absolute;
top: 50%;
left: 50%;
width: 1em;
height: 1em;
margin-top: -0.5em;
margin-left: -0.5em;
border-radius: 50%;
transform-style: preserve-3d; }
#sun {
background-color: #FB7209;
background-repeat: no-repeat;
background-size: cover;
box-shadow: 0 0 60px rgba(255, 160, 60, 0.4); }
.planet {
background-color: #202020;
background-repeat: no-repeat;
background-size: cover;
animation-iteration-count: infinite;
animation-timing-function: linear; }
.ring {
position: absolute;
top: 50%;
left: 50%;
border-radius: 50%; }
#earth {
z-index: 8; }
#sun {
z-index: 1; }
#keyframes orbit {
0% {
transform: rotateZ(0deg); }
100% {
transform: rotateZ(-360deg); } }
#keyframes invert {
0% {
transform: rotateX(-90deg) rotateY(360deg) rotateZ(0deg); }
100% {
transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg); } }
.view-3D #solar-system {
transform: rotateX(75deg); }
.view-3D #sun {
transform: rotateX(-90deg); }
#earth .pos,
#earth .planet,
#earth.orbit {
animation-duration: 12.00021s; }
#earth .orbit .pos,
#earth .orbit {
animation-duration: 0.89764s; }
.scale-stretched #sun {
font-size: 24em; }
.scale-stretched #earth .planet {
font-size: 3.92em; }
.scale-stretched #earth.orbit {
width: 56em;
height: 56em;
margin-top: -28em;
margin-left: -28em; }
body { background: #000; }
#sun { background: yellow; }
#earth .planet { background: blue; }
And some simple jQuery to get the 3D effect so it looks 2D but moves 3D
$(window).load(function(){
var body = $("body"),
universe = $("#universe"),
solarsys = $("#solar-system");
var init = function() {
body.removeClass('view-2D opening').addClass("view-3D").delay(2000).queue(function() {
$(this).removeClass('hide-UI').addClass("set-speed");
$(this).dequeue();
});
};
init();
});
Here is a DEMO
I think if you use my code you'll probably be better off than fixing yours. Just a suggestion ;)
Related
I have created a loader using loader.io and integrated the css and HTML in the angular application but my loader is not displayed on the center of the screen with backdrop as it should.
#keyframes spin {
0% { transform: rotate(0deg) }
50% { transform: rotate(180deg) }
100% { transform: rotate(360deg) }
}
.loader div {
position: absolute;
animation: spin 3.77s linear infinite;
width: 113.08px;
height: 113.08px;
top: 71.96px;
left: 71.96px;
border-radius: 50%;
box-shadow: 0 4.6259999999999994px 0 0 #20c997;
transform-origin: 56.54px 58.852999999999994px;
}
.loader-container {
width: 257px;
height: 257px;
display: inline-block;
overflow: hidden;
background: blue;
}
.loader {
width: 100%;
height: 100%;
position: relative;
transform: translateZ(0) scale(1);
backface-visibility: hidden;
transform-origin: 0 0; /* see note above */
}
.loader div { box-sizing: content-box; }
<div *ngIf="true" class="loader-container">
<div class="loader">
<div></div>
</div>
</div>
I want to bring the loader to the center.
.loader div {
position: absolute;
animation: spin 3.77s linear infinite;
width: 113.08px;
height: 113.08px;
top: 50%;
left: 50%;
border-radius: 50%;
box-shadow: 0 4.6259999999999994px 0 0 #20c997;
transform: translate(-50%, -50%);
}
<!DOCTYPE html>
<html>
<head>
<body>
<div class="centered">
<div *ngIf="true" class="loader-container">
<div class="loader">
<div></div>
</div>
</div>
</div>
<style>
.centered {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transform: -webkit-translate(-50%, -50%);
transform: -moz-translate(-50%, -50%);
transform: -ms-translate(-50%, -50%);
color:darkred;
}
#keyframes spin {
0% { transform: rotate(0deg) }
50% { transform: rotate(180deg) }
100% { transform: rotate(360deg) }
}
.loader div {
position: absolute;
animation: spin 3.77s linear infinite;
width: 113.08px;
height: 113.08px;
top: 71.96px;
left: 71.96px;
border-radius: 50%;
box-shadow: 0 4.6259999999999994px 0 0 #20c997;
transform-origin: 56.54px 58.852999999999994px;
}
.loader-container {
width: 257px;
height: 257px;
display: inline-block;
overflow: hidden;
background: blue;
}
.loader {
width: 100%;
height: 100%;
position: relative;
transform: translateZ(0) scale(1);
backface-visibility: hidden;
transform-origin: 0 0; /* see note above */
}
.loader div { box-sizing: content-box; }
</style>
</body>
</html>
I have created a div with animation direction to the right side but I want that the image inside will stay stright and will not move.
The problem is that the image is getting the direction of the main div.
#loader {
/* Uncomment this to make it run! */
/*
animation: loader 5s linear infinite;
*/
position: absolute;
top: calc(50% - 20px);
left: calc(50% - 20px);
}
#keyframes loader {
0% {
left: -100px
}
100% {
left: 110%;
}
}
#box {
width: 50px;
height: 50px;
background: #1d80e1;
animation: animate .5s linear infinite;
position: absolute;
top: 0;
left: 0;
border-radius: 5px;
width: 80px;
height: 80px;
background-size: 50px;
background-position: center;
background-image: url("https://picsum.photos/id/10/80/80");
background-repeat: no-repeat;
}
#keyframes animate {
17% {
border-bottom-right-radius: 3px;
}
25% {
transform: translateY(9px) rotate(22.5deg);
}
50% {
transform: translateY(18px) scale(1, .9) rotate(45deg);
border-bottom-right-radius: 40px;
}
75% {
transform: translateY(9px) rotate(67.5deg);
}
100% {
transform: translateY(0) rotate(90deg);
}
}
#shadow {
width: 50px;
height: 5px;
background: #000;
opacity: 0.1;
position: absolute;
top: 59px;
left: 0;
border-radius: 50%;
animation: shadow .5s linear infinite;
}
#keyframes shadow {
50% {
transform: scale(1.2, 1);
}
}
body {
background: #e4e4e4;
overflow: hidden;
}
h4 {
position: absolute;
bottom: 20px;
left: 20px;
margin: 0;
font-weight: 200;
opacity: .5;
font-family: sans-serif;
color: #fff;
}
<div id="loader">
<div id="shadow"></div>
<div id="box"></div>
</div>
In this case, I've used reverse flow. you can customize animate2. animate2 .5s infinite linear reverse;
#loader {
/* Uncomment this to make it run! */
/*
animation: loader 5s linear infinite;
*/
position: absolute;
top: calc(50% - 20px);
left: calc(50% - 20px);
}
#keyframes loader {
0% {
left: -100px
}
100% {
left: 110%;
}
}
#box:after {
content: '';
position: absolute;
top: 0;
left: 0;
border-radius: 5px;
width: 80px;
height: 80px;
background-size: 50px;
background-position: center;
background-image: url("https://picsum.photos/id/10/80/80");
background-repeat: no-repeat;
animation: animate2 .5s infinite linear reverse;
}
#box {
animation: animate .5s infinite linear;
width: 50px;
height: 50px;
background: #1d80e1;
position: absolute;
top: 0;
left: 0;
border-radius: 5px;
width: 80px;
height: 80px;
}
#keyframes animate {
17% {
border-bottom-right-radius: 3px;
}
25% {
transform: translateY(9px) rotate(22.5deg);
}
50% {
transform: translateY(18px) scale(1, .9) rotate(45deg);
border-bottom-right-radius: 40px;
}
75% {
transform: translateY(9px) rotate(67.5deg);
}
100% {
transform: translateY(0) rotate(90deg);
}
}
#keyframes animate2 {
17% {
}
25% {
transform:rotate(22.5deg);
}
50% {
transform:rotate(45deg);
}
75% {
transform:rotate(67.5deg);
}
100% {
transform:rotate(90deg);
}
}
#shadow {
width: 50px;
height: 5px;
background: #000;
opacity: 0.1;
position: absolute;
top: 59px;
left: 0;
border-radius: 50%;
animation: shadow .5s linear infinite;
}
#keyframes shadow {
50% {
transform: scale(1.2, 1);
}
}
body {
background: #e4e4e4;
overflow: hidden;
}
h4 {
position: absolute;
bottom: 20px;
left: 20px;
margin: 0;
font-weight: 200;
opacity: .5;
font-family: sans-serif;
color: #fff;
}
<div id="loader">
<div id="shadow"></div>
<div id="box"></div>
</div>
I'm trying to make a 'dot' orbit around another object (circle) but due to the z-index the dot always appears above the circle it is meant orbiting around.
CodePen link: https://codepen.io/moy/pen/ROVZXd?editors=1100
Ideally the 2nd half of the animation would take place behind the object so it's not seen until it comes out the other side - is that possible?
I thought about fading out the object that is moving around but I don't think that would give a smooth/masked effect?
A bit stuck as to how I'd mask this area as I can't see a way the CSS would know it's meant to be hidden. I thought maybe I could change the z-index 50% though the animation it and reset it at 0%/100% but that doesn't appear to do anything.
Any ideas? Thanks in advance!
.earth {
background: white;
border: 1px solid black;
border-radius: 50%;
display: block;
height: 100px;
margin: 30px auto;
position: relative;
width: 100px;
z-index: 20;
}
.orbit {
border: 2px #eee transparent;
border-radius: 50%;
height: 140px;
margin: auto;
position: absolute;
top: -20px;
left: -20px;
transform: rotateZ(60deg) rotateY(60deg);
transform-style: preserve-3d;
width: 140px;
z-index: 10;
}
.orbit .moon {
animation: move ease-in-out infinite;
animation-duration: 2s;
background: black;
border-radius: 50%;
height: 15px;
margin: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 15px;
z-index: 10;
}
#keyframes move {
0% {
transform: rotateZ(-90deg) translateX(70px) rotateZ(90deg) rotateY(-70deg); z-index: 20;
}
50% {
z-index: -20;
}
100% {
transform: rotateZ(270deg) translateX(70px) rotateZ(-270deg) rotateY(-70deg); z-index: 20;
}
}
<div class="earth">
<div class="orbit">
<div class="moon"></div>
</div>
</div>
I seem to have solved this by adding a negative z-index to an animation applied to the parent .orbit
Link: https://codepen.io/moy/pen/wZdpRw?editors=1100
I initially applied this at 50% through the animation as that should be the furthest away the dot is before it comes back behind the larger circle. However this didn't work, setting it on 100% did work. Not entirely sure why but it seems to work!
The initial issue was due to the fact that you are applying z-index to the parent element and doing so it will impossible to make the child to move behind it (Why elements with any z-index value can never cover its child?) thus changin z-index is useless
Even if you remove the z-index from the parent you still have the transform that is also creating a stacking context making impossible to the child element to move behind so you cannot make the .moon to move behind the .earth.
The only way to do it (like you already noticed) is to remove z-index from the .earth to avoid the earth creating a stacking context and animate z-index of orbit to make the orbit AND the moon moving behind the earth (not only the moon).
Add some coloration to better see this:
.earth {
background: white;
border: 1px solid black;
border-radius: 50%;
display: block;
height: 100px;
margin: 60px auto;
position: relative;
width: 100px;
}
.orbit {
animation: hide ease-in-out infinite;
animation-duration: 2s;
background:red;
border-radius: 50%;
height: 140px;
margin: auto;
position: absolute;
top: -20px;
left: -20px;
transform: rotateZ(60deg) rotateY(60deg);
transform-style: preserve-3d;
width: 140px;
}
.orbit .moon {
animation: move ease-in-out infinite;
animation-duration: 2s;
background: black;
border-radius: 50%;
height: 15px;
margin: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 15px;
}
#keyframes move {
0% {
transform: rotateZ(-90deg) translateX(70px) rotateZ(90deg) rotateY(-70deg);
}
100% {
transform: rotateZ(270deg) translateX(70px) rotateZ(-270deg) rotateY(-70deg);
}
}
#keyframes hide {
0% {
z-index: 20;
}
100% {
z-index: -20;
}
}
<div class="earth">
<div class="orbit">
<div class="moon"></div>
</div>
</div>
Now if you add back z-index to earth it will stop working because of the stacking context:
.earth {
background: white;
border: 1px solid black;
border-radius: 50%;
display: block;
height: 100px;
margin: 60px auto;
position: relative;
width: 100px;
z-index:2;
}
.orbit {
animation: hide ease-in-out infinite;
animation-duration: 2s;
background:red;
border-radius: 50%;
height: 140px;
margin: auto;
position: absolute;
top: -20px;
left: -20px;
transform: rotateZ(60deg) rotateY(60deg);
transform-style: preserve-3d;
width: 140px;
}
.orbit .moon {
animation: move ease-in-out infinite;
animation-duration: 2s;
background: black;
border-radius: 50%;
height: 15px;
margin: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 15px;
}
#keyframes move {
0% {
transform: rotateZ(-90deg) translateX(70px) rotateZ(90deg) rotateY(-70deg);
}
100% {
transform: rotateZ(270deg) translateX(70px) rotateZ(-270deg) rotateY(-70deg);
}
}
#keyframes hide {
0% {
z-index: 20;
}
100% {
z-index: -20;
}
}
<div class="earth">
<div class="orbit">
<div class="moon"></div>
</div>
</div>
You can try key-framing the opacity:
.earth {
background: white;
border: 1px solid black;
border-radius: 50%;
display: block;
height: 100px;
margin: 30px auto;
position: relative;
width: 100px;
z-index: 20;
}
.orbit {
border: 2px #eee transparent;
border-radius: 50%;
height: 140px;
margin: auto;
position: absolute;
top: -20px;
left: -20px;
transform: rotateZ(60deg) rotateY(60deg);
transform-style: preserve-3d;
width: 140px;
z-index: 10;
}
.orbit .moon {
animation: move ease-in-out infinite;
animation-duration: 2s;
background: black;
border-radius: 50%;
height: 15px;
margin: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 15px;
z-index: 10;
}
#keyframes move {
0% {
transform: rotateZ(-90deg) translateX(70px) rotateZ(90deg) rotateY(-70deg); opacity: 1;
}
56% {
opacity: 1;
}
58% {
opacity: 0;
}
77% {
opacity: 0;
}
78% {
opacity: 1;
}
100% {
transform: rotateZ(270deg) translateX(70px) rotateZ(-270deg) rotateY(-70deg); opacity: 1;
}
}
<div class="earth">
<div class="orbit">
<div class="moon"></div>
</div>
</div>
I am trying to create a pure CSS design of a sphere revolving(orbiting) around another sphere. Like a moon orbiting the sun to be precise. The image of the earth fits in properly into the sphere of earth. But the image of moon does not fit into the sphere of moon.
The image attached might help to understand my question better
Below is my CSS script
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
border-radius: 50%;
background: transparent;
}
.center .earth {
position: absolute;
top: 0;
width: 200px;
height: 200px;
background-image: url(https://www.publicdomainpictures.net/pictures/90000/velka/earth-map.jpg);
margin: 3em auto;
border-radius: 50%;
background-size: 630px;
animation: spin 30s linear alternate infinite;
box-shadow: inset 20px 0 80px 6px rgba(0, 0, 0, 1);
color: #000;``
}
.center .earth .moon {
position: absolute;
top: calc(50% - 1px);
left: 50%;
width: 200px;
height: 2px;
transform-origin: left;
border-radius: 50%;
/*animation: rotate 10s linear infinite;*/
}
.center .earth .moon::before {
content: url(moon.jpg);
position: absolute;
top: -25px;
right: 0;
width: 50px;
height: 50px;
background: #fff;
border-radius: 50%;
/*animation: rotate 10s linear infinite;*/
}
#keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#keyframes spin {
100% {
background-position: 100%;
}
}
Make this change content: "";
to background-image: url(moon.jpg);
and remove background: #fff from classname .center .earth .moon::before
body {
background: black;
}
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
border-radius: 50%;
background: transparent;
}
.center .earth {
position: absolute;
top: 0;
width: 200px;
height: 200px;
background-image: url(https://www.publicdomainpictures.net/pictures/90000/velka/earth-map.jpg);
margin: 3em auto;
border-radius: 50%;
background-size: 630px;
animation: spin 30s linear alternate infinite;
box-shadow: inset 20px 0 80px 6px rgba(0, 0, 0, 1);
color: #000;``
}
.center .earth .moon {
position: absolute;
top: calc(50% - 1px);
left: 50%;
width: 200px;
height: 2px;
transform-origin: left;
border-radius: 50%;
/*animation: rotate 10s linear infinite;*/
}
.center .earth .moon::before {
content: "";
background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRsvjrANMGI8aBJSFbsHteVa04rcB1IjjNsbrhm8vTLflfpiG133g);
position: absolute;
top: -25px;
right: 0;
width: 50px;
height: 50px;
border-radius: 50%;
/*animation: rotate 10s linear infinite;*/
}
#keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#keyframes spin {
100% {
background-position: 100%;
}
}
<div class="center">
<div class="earth">
<div class="moon">
</div>
</div>
</div>
i want to rotate my image/ or element right after it reached to its location given in keframe breakpoints.
rotation and animation are being applied together.
Here is HTML
<body>
<div class="container">
<div class="box"></div>
</div>
and here is the CSS.
.container {
background-color: lightgray;
height: 600px;
width: 800px;
margin: auto;
}
.box {
height: 100px;
width: 100px;
// background-image: url("car.png");
background-size:100px 100px;
position: relative;
top:40px; left: 620px;
animation: Glider infinite 5s ease-in-out;
}
#keyframes Glider {
0% {
top:40px; left:620px;
}
25% {
top:40px; left: 80px;
transform: rotate(-90deg);
}
50%{
top:400px; left: 80px;
transform: rotate(-180deg);
}
75%{
top:400px; left: 620px;
transform: rotate(-270deg);
}
100%{
top:40px; left: 620px;
transform: rotate(-360deg);
}
}
What i wanted to do is move image to top:40px; left: 80px; then stay rotate(-90deg) , after rotation applied move to next point.
Want this to happen on every turning point.
LINK: https://output.jsbin.com/hiyamirera/1
WHAT AM I MISSING?
You may try something like this. The idea is to force the same value of rotation in the frames so it won't rotate while translating and you change the rotation between 2 close frames.
.container {
background-color: lightgray;
height: 600px;
width: 800px;
margin: auto;
}
.box {
height: 100px;
width: 100px;
background: red;
position: relative;
top: 40px;
left: 620px;
animation: Glider infinite 5s ease-in-out;
}
#keyframes Glider {
0% {
top: 40px;
left: 620px;
transform: rotate(0);
}
25% {
top: 40px;
left: 80px;
transform: rotate(0);
}
28% {
transform: rotate(-90deg);
}
50% {
top: 400px;
left: 80px;
transform: rotate(-90deg);
}
53% {
transform: rotate(-180deg);
}
75% {
top: 400px;
left: 620px;
transform: rotate(-180deg);
}
78% {
transform: rotate(-270deg);
}
97% {
top: 40px;
left: 620px;
transform: rotate(-270deg);
}
100% {
transform: rotate(-360deg);
}
}
<div class="container">
<div class="box"></div>
</div>