My circle animation looks stretched out? How can I make the circle not look elongated in the x axis? It stretches out during the animation and then returns back to normal after the animation has finished.
p {
animation-duration: 3s;
animation-name: slidein;
}
.ball {
border-radius: 50%;
background: blue;
height: 50px;
width: 50px;
display: inline-block;
animation-duration: 3s;
animation-name: slidein;
}
.animation-container {
overflow: hidden;
}
#keyframes slidein {
from {
margin-left: 100%;
width: 300%;
}
to {
margin-left: 0%;
width: 100%;
}
}
<div class="animation-container">
<p>hello world</p>
</div>
<div class="animation-container">
<div class="ball"></div>
</div>
Well, you are animating your width from 300% to 100%. Removing this will fix it.
p {
animation-duration: 3s;
animation-name: slidein;
}
.ball {
border-radius: 50%;
background: blue;
height: 50px;
width: 50px;
display: inline-block;
animation-duration: 3s;
animation-name: slidein;
}
.animation-container {
overflow: hidden;
}
#keyframes slidein {
from {
margin-left: 100%;
}
to {
margin-left: 0%;
}
}
<div class="animation-container">
<p>hello world</p>
</div>
<div class="animation-container">
<div class="ball"></div>
</div>
Related
I'm attempting to have three objects rotating around a circle. So far I've been able to get one object to spin around the circle. I am unable to get more than one without messing up the code. Could anyone advise on the best way to accomplish this? Here is part of the code and a Fiddle. Thanks!
Here is the Demo
.outCircle {
width: 200px;
height: 200px;
background-color: lightblue;
left: 270px;
position: absolute;
top: 50px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
}
.rotate {
width: 100%;
height: 100%;
-webkit-animation: circle 10s infinite linear;
}
.counterrotate {
width: 50px;
height: 50px;
-webkit-animation: ccircle 10s infinite linear;
}
.inner {
width: 100px;
height: 100px;
background: red;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 100px;
position: absolute;
left: 0px;
top: 0px;
background-color: red;
display: block;
}
#-webkit-keyframes circle {
from {
-webkit-transform: rotateZ(0deg)
}
to {
-webkit-transform: rotateZ(360deg)
}
}
#-webkit-keyframes ccircle {
from {
-webkit-transform: rotateZ(360deg)
}
to {
-webkit-transform: rotateZ(0deg)
}
}
<div class="outCircle">
<div class="rotate">
<div class="counterrotate">
<div class="inner">hello
</div>
</div>
</div>
</div>
Jquery solution which works for any number of outer items.
Jquery shamelessly stolen from ThiefMaster♦ and their answer at this Q & A
var radius = 100; // adjust to move out items in and out
var fields = $('.item'),
container = $('#container'),
width = container.width(),
height = container.height();
var angle = 0,
step = (2 * Math.PI) / fields.length;
fields.each(function() {
var x = Math.round(width / 2 + radius * Math.cos(angle) - $(this).width() / 2);
var y = Math.round(height / 2 + radius * Math.sin(angle) - $(this).height() / 2);
if (window.console) {
console.log($(this).text(), x, y);
}
$(this).css({
left: x + 'px',
top: y + 'px'
});
angle += step;
});
body {
padding: 2em;
}
#container {
width: 200px;
height: 200px;
margin: 10px auto;
border: 1px solid #000;
position: relative;
border-radius: 50%;
animation: spin 10s linear infinite;
}
.item {
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
border-radius: 50%;
position: absolute;
background: #f00;
animation: spin 10s linear infinite reverse;
}
#keyframes spin {
100% {
transform: rotate(1turn);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
How about this, demo at the bottom with 3 circles:
.outCircle {
width: 200px;
height: 200px;
background-color: lightblue;
left: 270px;
position: absolute;
top: 50px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
}
.duringTwentyOne {
-webkit-animation-duration: 21s;
}
.duringTen {
-webkit-animation-duration: 10s;
}
.duringFour {
-webkit-animation-duration: 4s;
}
.infinite {
-webkit-animation-iteration-count: infinite;
}
.linear {
-webkit-animation-timing-function: linear;
}
.counter {
width: 50px;
height: 50px;
-webkit-animation-duration: inherit;
-webkit-animation-direction: reverse;
-webkit-animation-timing-function: inherit;
-webkit-animation-iteration-count: inherit;
-webkit-animation-name: inherit;
}
.rotate {
width: 100%;
height: 100%;
-webkit-animation-name: circle;
position: relative;
z-index : 10;
display : block;
}
.second {
top : -100%;
}
.thirdBigger {
top : -240%;
left: -40%;
width:150%;
height: 150%;
}
.inner {
width: 100px;
height: 100px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 100px;
position: absolute;
left: 0px;
top: 0px;
background-color: red;
display: block;
}
.red {
background: red;
}
.green {
background: green;
}
#keyframes circle {
from {-webkit-transform: rotateZ(0deg)}
to {-webkit-transform: rotateZ(360deg)}
}
<div class="outCircle">
<div class="rotate linear infinite duringTen">
<div class="counter">
<div class="inner">hello
</div>
</div>
</div>
<div class="second rotate linear infinite duringFour">
<div class="counter">
<div class="inner red">bye bye
</div>
</div>
</div>
<div class="thirdBigger rotate linear infinite duringTwentyOne">
<div class="counter">
<div class="inner green">s'up
</div>
</div>
</div>
</div>
Here is a more generic idea with less of code where you don't need JS and you only need to apply an animation to the item (not the container). The trick is to make all the elements at the same position and using the same animation then with the delay we can have the needed result:
#container {
width: 200px;
height: 200px;
margin: 40px auto;
border: 1px solid #000;
display:grid;
grid-template-columns:30px;
grid-template-rows:30px;
place-content: center;
border-radius: 50%;
}
.item {
grid-area:1/1;
line-height: 30px;
text-align: center;
border-radius: 50%;
background: #f00;
animation: spin 12s var(--d,0s) linear infinite; /* duration = 12s, numbor of item = 6 so a delay of 12/6 = 2s */
transform:rotate(0) translate(100px) rotate(0);
}
#keyframes spin {
100% {
transform:rotate(1turn) translate(100px) rotate(-1turn);
}
}
<div id="container">
<div class="item" style="--d:0s">1</div>
<div class="item" style="--d:-2s">2</div>
<div class="item" style="--d:-4s">3</div>
<div class="item" style="--d:-6s">4</div>
<div class="item" style="--d:-8s">5</div>
<div class="item" style="--d:-10s">6</div>
</div>
We can easily scale to any number using some CSS variables:
#container {
--n:7; /* number of item */
--d:12s; /* duration */
width: 200px;
height: 200px;
margin: 40px auto;
border: 1px solid #000;
display:grid;
grid-template-columns:30px;
grid-template-rows:30px;
place-content: center;
border-radius: 50%;
}
.item {
grid-area:1/1;
line-height: 30px;
text-align: center;
border-radius: 50%;
background: #f00;
animation: spin var(--d) linear infinite;
transform:rotate(0) translate(100px) rotate(0);
}
#keyframes spin {
100% {
transform:rotate(1turn) translate(100px) rotate(-1turn);
}
}
.item:nth-child(1) {animation-delay:calc(-0*var(--d)/var(--n))}
.item:nth-child(2) {animation-delay:calc(-1*var(--d)/var(--n))}
.item:nth-child(3) {animation-delay:calc(-2*var(--d)/var(--n))}
.item:nth-child(4) {animation-delay:calc(-3*var(--d)/var(--n))}
.item:nth-child(5) {animation-delay:calc(-4*var(--d)/var(--n))}
.item:nth-child(6) {animation-delay:calc(-5*var(--d)/var(--n))}
.item:nth-child(7) {animation-delay:calc(-6*var(--d)/var(--n))}
.item:nth-child(8) {animation-delay:calc(-7*var(--d)/var(--n))}
.item:nth-child(9) {animation-delay:calc(-8*var(--d)/var(--n))}
/*.item:nth-child(N) {animation-delay:calc(-(N - 1)*var(--d)/var(--n))}*/
<div id="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
</div>
<div id="container" style="--n:5;--d:5s">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
<div id="container" style="--n:9">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</div>
Not sure if this is what you are after, but you need to position your rotating circles absolutely (so they don't interfere with each other) and then give them their own animation:
For the counter rotation, just make them then minus of what the rotation degrees is and that will keep your text horizontal
.outCircle {
width: 200px;
height: 200px;
background-color: lightblue;
left: 270px;
position: absolute;
top: 50px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
}
.rotate {
width: 100%;
height: 100%;
position: absolute; /* add this */
}
.counterrotate {
width: 100px;
height: 100px;
}
.inner {
width: 100px;
height: 100px;
text-align: center;
vertical-align: middle;
background: red;
border-radius: 100px;
background-color: red;
display: table-cell;
}
.anim1 {
-webkit-animation: circle1 10s infinite linear;
}
.anim1 .counterrotate {
-webkit-animation: ccircle1 10s infinite linear;
}
.anim2 {
-webkit-animation: circle2 10s infinite linear;
}
.anim2 .counterrotate {
-webkit-animation: ccircle2 10s infinite linear;
}
.anim3 {
-webkit-animation: circle3 10s infinite linear;
}
.anim3 .counterrotate {
-webkit-animation: ccircle3 10s infinite linear;
}
#-webkit-keyframes circle1 {
from {
-webkit-transform: rotateZ(0deg)
}
to {
-webkit-transform: rotateZ(360deg)
}
}
#-webkit-keyframes ccircle1 {
from {
-webkit-transform: rotateZ(0deg)
}
to {
-webkit-transform: rotateZ(-360deg)
}
}
#-webkit-keyframes circle2 {
from {
-webkit-transform: rotateZ(90deg)
}
to {
-webkit-transform: rotateZ(450deg)
}
}
#-webkit-keyframes ccircle2 {
from {
-webkit-transform: rotateZ(-90deg)
}
to {
-webkit-transform: rotateZ(-450deg)
}
}
#-webkit-keyframes circle3 {
from {
-webkit-transform: rotateZ(180deg)
}
to {
-webkit-transform: rotateZ(540deg)
}
}
#-webkit-keyframes ccircle3 {
from {
-webkit-transform: rotateZ(-180deg)
}
to {
-webkit-transform: rotateZ(-540deg)
}
}
<div class="outCircle">
<div class="rotate anim1">
<div class="counterrotate">
<div class="inner">hello
</div>
</div>
</div>
<div class="rotate anim2">
<div class="counterrotate">
<div class="inner">hello
</div>
</div>
</div>
<div class="rotate anim3">
<div class="counterrotate">
<div class="inner">hello
</div>
</div>
</div>
</div>
Use translateX.
See this jsfiddle.
I made the outer circle position: relative and the inner ones position: absolute, so they lie on top of each others mids (which is just for illustration, this is just for positioning the child circles on the same spot; grouping them).
Then, from this center spot, the translateX tells the animation to give it a radius of in this case 100px (which is the radius of the outer circle).
There you go.
.circleLink {
color: #ececec;
text-transform: uppercase;
font-size: 24px;
line-height: 120%;
position: relative;
display: inline-block;
border: 1px solid blue;
width: 200px;
height: 200px;
-moz-box-flex: 0;
flex: 0 0 270px;
display: -moz-box;
display: flex;
-moz-box-pack: center;
justify-content: center;
-moz-box-align: center;
align-items: center;
border-radius: 50%;
}
.round>span:first-child {
position: relative;
color:blue;
}
.round>span:first-child::before {
content: "";
position: absolute;
width: 100%;
height: 0;
border: 1px solid #ececec;
bottom: -5px;
background: #ececec;
border-radius: 10px;
left: 0;
}
.round>span:nth-child(2) {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
transform: rotate(90deg);
}
.circleLink>span:nth-child(2) {
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.circleLink>span:nth-child(2) span {
position: absolute;
top: -webkit-calc(50% - 0.5px);
top: -moz-calc(50% - .5px);
top: calc(50% - 0.5px);
left: 50%;
z-index: 1;
width: 50%;
height: 1px;
-webkit-transform-origin: left;
-moz-transform-origin: left;
transform-origin: left;
-webkit-animation: linkRotate 5s linear 0s infinite;
-moz-animation: linkRotate 5s linear 0s infinite;
animation: linkRotate 5s linear 0s infinite;
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
animation-play-state: paused;
}
.circleLink>span:nth-child(2) span:before {
content: "";
position: absolute;
width: 20px;
height: 20px;
top: -10px;
right: -10px;
background: #42B4EF;
border-radius: 50%;
}
.circleLink:hover>span:nth-child(2) span {
-webkit-animation-play-state: running;
-moz-animation-play-state: running;
animation-play-state: running;
}
#-webkit-keyframes linkRotate {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg)
}
to {
-webkit-transform: rotate(1turn);
transform: rotate(1turn)
}
}
#-moz-keyframes linkRotate {
0% {
-moz-transform: rotate(0deg);
transform: rotate(0deg)
}
to {
-moz-transform: rotate(1turn);
transform: rotate(1turn)
}
}
#keyframes linkRotate {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
transform: rotate(0deg)
}
to {
-webkit-transform: rotate(1turn);
-moz-transform: rotate(1turn);
transform: rotate(1turn)
}
}
<div class="round">
<a href="#" class="circleLink">
<span>Loram</span>
<span><span></span></span>
</a>
</div>
So, I have a set of boxes placed around each other. But using CSS animations I want to hide all the boxes One by One at a time, when the last box is hidden, I want to show back all the boxes but in reverse order, where last box appears first and then 9th, 8th and till 1st box appears back. And then again this animation repeats.
* {
box-sizing: border-box;
position: relative;
}
body {
background: #fcc;
}
#keyframes blink {
0% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.boxes {
width: 10%;
height: 50px;
background: tomato;
border: 1px solid #ccc;
animation: blink 10s alternate linear infinite;
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
}
.boxes:nth-child(odd) {
background: orange;
top: 40px;
}
.box-1 {
animation-duration: 9s;
animation-delay: 1s
}
.box-2 {
animation-duration: 8s;
animation-delay: 2s
}
.box-3 {
animation-duration: 7s;
animation-delay: 3s
}
.box-4 {
animation-duration: 6s;
animation-delay: 4s
}
.box-5 {
animation-duration: 5s;
animation-delay: 5s
}
.box-6 {
animation-duration: 4s;
animation-delay: 6s
}
.box-7 {
animation-duration: 3s;
animation-delay: 7s
}
.box-8 {
animation-duration: 2s;
animation-delay: 8s
}
.box-9 {
animation-duration: 1s;
animation-delay: 9s
}
<div class="wrapper">
<div class="boxes box-1">1</div>
<div class="boxes box-2">2</div>
<div class="boxes box-3">3</div>
<div class="boxes box-4">4</div>
<div class="boxes box-5">5</div>
<div class="boxes box-6">6</div>
<div class="boxes box-7">7</div>
<div class="boxes box-8">8</div>
<div class="boxes box-9">9</div>
<div>
Here is another idea, with mix-blend-mode and animation in 11 steps .
* {
box-sizing: border-box;
margin:0;
}
html,body {
background: linear-gradient( to bottom left, purple, green, yellow) pink;
min-height: 100vh
}
.wrapper {
display: flex;
position: relative;
background: linear-gradient(to right, black, black) no-repeat;
background-size: 0% 100%;
animation: blink 10s infinite alternate steps(11, end);
mix-blend-mode: lighten;
}
.boxes {
flex-grow: 1;
;
height: 50px;
background: tomato;
border: 1px solid #ccc;
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
mix-blend-mode: overlay;
}
.boxes:nth-child(odd) {
background: orange;
margin-top: 40px;
}
#keyframes blink {
100% {
background-size: 110% 100%;
;
}
}
<div class="wrapper">
<div class="boxes">1</div>
<div class="boxes">2</div>
<div class="boxes">3</div>
<div class="boxes">4</div>
<div class="boxes">5</div>
<div class="boxes">6</div>
<div class="boxes">7</div>
<div class="boxes">8</div>
<div class="boxes">9</div>
<div class="boxes">10</div>
</div>
Here is an idea using mask where you don't need to apply an individual animation to each element. You simply animate a gradient from right to left to show hide your elements:
.wrapper {
display:flex;
padding-right:10%;
margin-right:-10%;
-webkit-mask:linear-gradient(to right,transparent 50%,#fff 0) right/200% 100%;
mask:linear-gradient(to right,transparent 50%,#fff 0) right/200% 100%;
animation:hide 3s steps(11) infinite alternate;
}
.boxes {
width: 10%;
height: 50px;
background: tomato;
border: 1px solid #ccc;
box-sizing:border-box;
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
}
.boxes:nth-child(odd) {
background: orange;
margin-top: 40px;
}
#keyframes hide {
100% {
-webkit-mask-position:left;
mask-position:left;
}
}
body {
background:grey;
overflow:hidden;
}
<div class="wrapper">
<div class="boxes">1</div>
<div class="boxes">2</div>
<div class="boxes">3</div>
<div class="boxes">4</div>
<div class="boxes">5</div>
<div class="boxes">6</div>
<div class="boxes">7</div>
<div class="boxes">8</div>
<div class="boxes">9</div>
<div class="boxes">10</div>
</div>
And with a fading animation:
.wrapper {
display:flex;
-webkit-mask:linear-gradient(to right,transparent 33%,#fff 66%) right/300% 100%;
mask:linear-gradient(to right,transparent 33%,#fff 66%) right/300% 100%;
animation:hide 3s linear infinite alternate;
}
.boxes {
width: 10%;
height: 50px;
background: tomato;
border: 1px solid #ccc;
box-sizing:border-box;
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
}
.boxes:nth-child(odd) {
background: orange;
margin-top: 40px;
}
#keyframes hide {
100% {
-webkit-mask-position:left;
mask-position:left;
}
}
body {
background:grey;
overflow:hidden;
}
<div class="wrapper">
<div class="boxes">1</div>
<div class="boxes">2</div>
<div class="boxes">3</div>
<div class="boxes">4</div>
<div class="boxes">5</div>
<div class="boxes">6</div>
<div class="boxes">7</div>
<div class="boxes">8</div>
<div class="boxes">9</div>
<div class="boxes">10</div>
</div>
I'm new to animation. I pick some code up that had a demo that worked in the 5 browsers I'm testing in. I'm on Windows 10 and have the latest versions of the 5 browsers I test in (Chrome, FF, edge IE, and Opera. The CSS follows.
.progress-bar {
margin-bottom: 1rem;
background-color: tomato;
border-radius: 1.25em;
width: 300px;
height: 16px;
display: inline-block;
}
.progress-value {
background-color: MEDIUMBLUE;
transition: 0.3s all linear;
border-radius: 1.25em;
height: 16px;
display: inline-block;
animation: progress 3s ease-in-out forwards;
-webkit-animation: progress 3s ease-in-out forwards;
}
.progress-value.green {
background-color: MEDIUMSEAGREEN;
animation: progress-3 3s ease-in-out forwards;
-webkit-animation: progress-3 3s ease-in-out forwards;
}
.progress-value.red {
background-color: TOMATO;
animation: progress-2 3s ease-in-out forwards;
-webkit-animation: progress-2 3s ease-in-out forwards;
}
/* animation */
#keyframes progress {
from {
width: 0;
}
to {
width: 55%;
}
}
#-webkit-keyframes progress {
from {
width: 0;
}
to {
width: 55%;
}
}
#keyframes progress-2 {
from {
width: 0;
}
to {
width: 70%;
}
}
#-webkit-keyframes progress-2 {
from {
width: 0;
}
to {
width: 70%;
}
}
#keyframes progress-3 {
from {
width: 0;
}
to {
width: 90%;
}
}
#-webkit-keyframes progress-3 {
from {
width: 0;
}
to {
width: 90%;
}
}
<DIV ID='dvLoading' STYLE='POSITION:relative;TOP:-300px;LEFT:30%;'>
<DIV class='progress-bar'>
<DIV class='progress-value' style='WIDTH:70%;'></DIV>
</DIV>
</DIV>
The bar looks like I hoped. But there is no animation in any of the 5 browsers.
Here's working and better code for you. Instead of creating animation for each progress value, change width of child and show indicator inside the child and animate it once (from width: 0% to width: 100% width). I created a simple animating progress bar with 4 color variants.
.progress {
width: 500px;
height: 30px;
border-radius: 15px;
overflow: hidden;
background: #eee;
position: relative;
}
.progress>.progress-value {
position: relative;
height: 100%;
left: 0;
top: 0;
}
.progress>.progress-value::before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
animation: progress-value 3s ease-in-out forwards;
-webkit-animation: progress-value 3s ease-in-out forwards;
background: #666;
}
.progress>.progress-value.red::before {
background: #f44;
}
.progress>.progress-value.green::before {
background: #3f4;
}
.progress>.progress-value.blue::before {
background: #54f;
}
#keyframes progress-value {
from {
width: 0%;
}
to {
width: 100%;
}
}
#-webkit-keyframes progress-value {
from {
width: 0%;
}
to {
width: 100%;
}
}
<div class="progress">
<div class="progress-value" style="width: 65%"></div>
</div>
<div style="height: 15px"></div>
<div class="progress">
<div class="progress-value red" style="width: 95%"></div>
</div>
<div style="height: 15px"></div>
<div class="progress">
<div class="progress-value green" style="width: 41%"></div>
</div>
<div style="height: 15px"></div>
<div class="progress">
<div class="progress-value blue" style="width: 14%"></div>
</div>
What I did that works as I hoped is that I load the indicator as an HTML file into an object in the CGI process and position that object at the V/H center of the iframe. I put a 1 second lag in the JavaScript that's executed when the IFRAME content is loaded (ONLOAD) to turn the indicator off, to ensure that at least a little of the indicator is seen on a real fast load. Thanks all. ct
I have 2 images with transparent background and need to put one on top of each other with the same positioning:
1 spinning (underneath)
1 fixed (above)
I need to have the whole image composition to be centered and to have its size adjusted depending on the window size.
I used an ::after pseudo element for the fixed one but couldn’t get its position and size to follow the spinning one.
I suppose the background-size property should be involved but didn’t manage to use it properly.
Would appreciate any advice, even if it involves going with a totally different approach than the ::after pseudo class.
Many thanks.
body{
width: 100%;
height: 100%;
background-color: #000;
text-align: center;
color: #fff;
}
.main-container{
background-color: #00f;
width: 50%;
margin: 0 auto;
}
.engine-container{
}
.engine-complete{
position: relative;
width: 100%;
height: auto;
margin: 0 auto;
}
.engine-complete::after{
content: "";
position: absolute;
width: 191px;
height: 192px;
top: 1px;
left: 0;
background-image: url(https://image.ibb.co/jOqNma/engine1_crpd.png);
}
.engine-rotating{
width: 50%;
height: auto;
}
.spin {
animation-duration: 15s;
animation-name: spin;
animation-iteration-count: infinite;
animation-timing-function:linear;
animation-play-state: running;
}
#keyframes spin {
from {
transform:rotate(360deg);
}
to {
transform:rotate(0deg);
}
}
<div class="main-container">
<h1>spinning engine</h1>
<div class="engine-container">
<div class="engine-complete">
<img src="https://image.ibb.co/nwOKXF/engine1.png" width=191 height=192 class="engine-rotating spin"/>
</div>
</div>
</div>
Something like this?
EDIT: Instead of setting the image as a background using the ::after pseudo-class, I added the fixed image into the html. I also eliminated one of your containers.
I centred the animated image using text-align:center and centred the fixed image using position: absolute
I set both images to 30% width relative their parent .engine-container
The fixed image has a higher z-index than the animated image so that it always appears over it. The images also change size accordingly, relative to window size.
body {
width: 100%;
height: 100%;
background-color: #000;
text-align: center;
color: #fff;
}
.main-container {
background-color: #00f;
width: 50%;
margin: 0 auto;
}
.engine-container {
text-align: center;
position: relative;
}
.engine-rotating,
.engine-fixed {
width: 30%;
}
.engine-fixed {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(0deg);
z-index: 5000;
}
.spin {
animation-duration: 15s;
animation-name: spin;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-play-state: running;
}
#keyframes spin {
from {
transform: rotate(360deg);
}
to {
transform: rotate(0deg);
}
}
<div class="main-container">
<h1>spinning engine</h1>
<div class="engine-container">
<img src="https://image.ibb.co/nwOKXF/engine1.png" class="engine-rotating spin" />
<img src="https://image.ibb.co/jOqNma/engine1_crpd.png" class="engine-fixed" alt="">
</div>
</div>
UPDATE
Heres what I came up with:
A similar effect using ::after. I was able to achieve this by inserting the image url into the content: rule, rather than setting a background image.
body {
width: 100%;
height: 100%;
background-color: #000;
text-align: center;
color: #fff;
}
.main-container {
background-color: #00f;
width: 50%;
margin: 0 auto;
}
.engine-container{
text-align: center;
position: relative;
}
.engine-rotating{
}
.engine-container::after{
content: url('https://image.ibb.co/jOqNma/engine1_crpd.png');
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(0deg);
z-index: 5000;
}
.spin{
animation-duration: 15s;
animation-name: spin;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-play-state: running;
}
#keyframes spin{
from {
transform: rotate(360deg);
}
to {
transform: rotate(0deg);
}
}
<div class="main-container">
<h1>spinning engine</h1>
<div class="engine-container">
<img src="https://image.ibb.co/nwOKXF/engine1.png" class="engine-rotating spin" />
</div>
</div>
Set position for .engine-complete::after to relative
.engine-complete::after {position: relative}
body{
width: 100%;
height: 100%;
background-color: #000;
text-align: center;
color: #fff;
}
.main-container{
background-color: #00f;
width: 50%;
margin: 0 auto;
}
.engine-container{
}
.engine-complete{
position: relative;
width: 100%;
height: auto;
margin: 0 auto;
}
.engine-complete::after{
content: "";
position: relative; /* this was changed */
width: 191px;
height: 192px;
top: 1px;
left: 0;
background-image: url(https://image.ibb.co/jOqNma/engine1_crpd.png);
}
.engine-rotating{
width: 50%;
height: auto;
}
.spin {
animation-duration: 15s;
animation-name: spin;
animation-iteration-count: infinite;
animation-timing-function:linear;
animation-play-state: running;
}
#keyframes spin {
from {
transform:rotate(360deg);
}
to {
transform:rotate(0deg);
}
}
<div class="main-container">
<h1>spinning engine</h1>
<div class="engine-container">
<div class="engine-complete">
<img src="https://image.ibb.co/nwOKXF/engine1.png" width=191 height=192 class="engine-rotating spin"/>
</div>
</div>
</div>
I'm trying to animate the background-position of a div, slowly, but without it having jerky movement. You can see the result of my current efforts here:
http://jsfiddle.net/5pVr4/2/
#-webkit-keyframes MOVE-BG {
from {
background-position: 0% 0%
}
to {
background-position: 187% 0%
}
}
#content {
width: 100%;
height: 300px;
background: url(http://www.gstatic.com/webp/gallery/1.jpg) 0% 0% repeat;
text-align: center;
font-size: 26px;
color: #000;
-webkit-animation-name: MOVE-BG;
-webkit-animation-duration: 100s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
}
I have been at this for hours and can't find anything that will animate slowly and smoothly at a sub-pixel level. My current example was made from the example code on this page: http://css-tricks.com/parallax-background-css3/
The smoothness of animation I'm after can be seen on this page's translate() example:
http://css-tricks.com/tale-of-animation-performance/
If it can't be done with the background-position, is there a way to fake the repeating background with multiple divs and move those divs using translate?
Checkout this example:
#content {
height: 300px;
text-align: center;
font-size: 26px;
color: #000;
position:relative;
}
.bg{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: -1;
background: url(http://www.gstatic.com/webp/gallery/1.jpg) 0% 0% repeat;
animation-name: MOVE-BG;
animation-duration: 100s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
#keyframes MOVE-BG {
from {
transform: translateX(0);
}
to {
transform: translateX(-187%);
}
}
<div id="content">Foreground content
<div class="bg"></div>
</div>
http://jsfiddle.net/5pVr4/4/
Animating background-position will cause some performance issues. Browsers will animate transform properties much cheaply, including translate.
Here is an example using translate for an infinite slide animation (without prefixes):
http://jsfiddle.net/brunomuller/5pVr4/504/
#-webkit-keyframes bg-slide {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
.wrapper {
position:relative;
width:400px;
height: 300px;
overflow:hidden;
}
.content {
position: relative;
text-align: center;
font-size: 26px;
color: #000;
}
.bg {
width: 200%;
background: url(http://www.gstatic.com/webp/gallery/1.jpg) repeat-x;
position:absolute;
top: 0;
bottom: 0;
left: 0;
animation: bg-slide 20s linear infinite;
}
You should adjust your HTML and CSS little bit
Working Demo
HTML
<div id="wrapper">
<div id="page">
Foreground content
</div>
<div id="content"> </div>
</div>
CSS
#-webkit-keyframes MOVE-BG {
from { left: 0; }
to { left: -2000px; }
}
#wrapper {
position:relative;
width:800px;
height: 300px;
overflow:hidden;
}
#page {
text-align: center;
font-size: 26px;
color: #000;
}
#content {
width: 2000px;
height: 300px;
background: url(http://www.gstatic.com/webp/gallery/1.jpg) 0% 0% repeat;
position:absolute;
top: 0;
left: 0;
z-index:-1;
-webkit-animation-name: MOVE-BG;
-webkit-animation-duration: 100s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
}