I have a background made with 3 separate images i want to add rotate animation to all 3 images. If i animate the number-bg class all 3 images rotates. I want the rotate speed to be different for each image. what is the best approach to do that.
mycode
<style>
body {
height: 100%;
}
.number-bg {
height: 1000px;
background-image: url(https://i.imgur.com/BZrswvf.png),
url(https://i.imgur.com/XJ9zZeA.png),
url(https://i.imgur.com/RJDk9uS.png);
background-repeat: no-repeat;
background-position: center;
}
</style>
<body>
<div class="number-bg">
</div>
</body>
Image:
Check out the code to rotate each image at different speeds.
.number{height: 1000px;
background-repeat: no-repeat;
background-position: center;}
.no-9 {
background-image: url(https://i.imgur.com/BZrswvf.png);
-webkit-animation:spin 3s linear infinite;
-moz-animation:spin 3s linear infinite;
animation:spin 3s linear infinite
}
.no-6 {
background-image: url(https://i.imgur.com/XJ9zZeA.png);
-webkit-animation:spin 6s linear infinite;
-moz-animation:spin 6s linear infinite;
animation:spin 6s linear infinite
}
.no-3 {
background-image: url(https://i.imgur.com/RJDk9uS.png);
-webkit-animation:spin 1s linear infinite;
-moz-animation:spin 1s linear infinite;
animation:spin 1s linear infinite
}
#-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
#-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
#keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); }
<div class="number no-9">
<div class="number no-6">
<div class="number no-3"></div>
</div>
</div>
Change the spin speeds as per your wish.
Related
I have my logo spinning on [my website][1]. When I hover it with a mouse i would like it to spin faster smoothly. At the moment when I hover the logo it simply returns back to its original rotation then starts the new rotation faster. I would like the logo to increase and decrease in speed when hovered without returning to the original rotation.
This is my logo:
<img id="logo" src="shilogo.svg" width="50" height="50" alt="Logo">
And here is the current CSS:
#logo{
padding:5px;
-webkit-animation: spin 5s linear infinite;
animation: spin 5s linear infinite;
-moz-animation:spin 5s linear infinite;
}
#logo:hover{
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
-moz-animation:spin 2s linear infinite;
}
#-webkit-keyframes spin{
100% { -webkit-transform: rotate(-360deg); }
}
#-moz-keyframes spin{
100% { -moz-transform: rotate(-360deg); }
}
#keyframes spin{
100% { transform: rotate(-360deg); }
}
You should only reset animation-duration to increase speed else the whole rule is reset:(note: result may varie from a browser to another,...)
#logo{
padding:5px;
animation: spin 5s linear infinite;
}
#logo:hover{
animation-duration:1s;
}
#keyframes spin{
100% { transform: rotate(-360deg); }
}
<img id="logo" src="http://dummyimage.com/100" alt="Logo">
You cannot change the speed by changing the time. An idea is to rotate a container in the same direction and the overall speed will increase.
Here is an example:
.logo {
width: 100px;
height: 100px;
background: red;
animation: spin 5s linear infinite;
}
.container {
margin:10px;
display: inline-block;
transition:10s all;
}
.container:hover {
transform: rotate(-3000deg);
}
#keyframes spin {
100% {
transform: rotate(-360deg);
}
}
<div class="container">
<div class="logo"></div>
</div>
I'm facing a problem, I have a div with an absolute position, and I'm trying to rotate it 360 degrees with an endless looping. But if I use the transform: translate (-50%,-50%) to fully center this div, it won't work properly.
HTML
<div class="randomName"></div>
CSS
.randomName {
background-color: orange;
width: 1500px;
height: 1500px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
animation: orbita 2s linear infinite;
-webkit-animation: orbita 2s linear infinite;
-moz-animation: orbita 2s linear infinite;
-o-animation: orbita 2s linear infinite;
}
#keyframes orbita {
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
Not sure why is not working. Can someone guide me? thanks!
When using the animation you are overriding the initial transform property by specifying a new one. Instead you need to append rotation to translate in order to keep both of them working:
.randomName {
background-color: orange;
width: 150px;
height: 150px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
animation: orbita 2s linear infinite;
-webkit-animation: orbita 2s linear infinite;
-moz-animation: orbita 2s linear infinite;
-o-animation: orbita 2s linear infinite;
}
#keyframes orbita {
0% {
transform:translate(-50%, -50%) rotate(0deg);
}
100% {
transform:translate(-50%, -50%) rotate(360deg);
}
}
<div class="randomName"></div>
Another solution is to center your element using another way and keep the animation as it is.
Here is an example using flex to center the element:
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.randomName {
background-color: orange;
width: 150px;
height: 150px;
animation: orbita 2s linear infinite;
-webkit-animation: orbita 2s linear infinite;
-moz-animation: orbita 2s linear infinite;
-o-animation: orbita 2s linear infinite;
}
#keyframes orbita {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<div class="randomName"></div>
I using a vertical sprite sheet in an animation with #keyframe.
I just can't get it to work correctly.
body{
background: brown;
}
.hi {
width: 117px;
height: 180px;
background-image: url("http://i.imgur.com/DxApxaV.png");
-webkit-animation: play .9s steps(8) infinite;
-moz-animation: play .9s steps(8) infinite;
-ms-animation: play .9s steps(8) infinite;
-o-animation: play .9s steps(8) infinite;
animation: play .9s steps(8) infinite;
}
#keyframes play {
from { background-position:0px; }
to { background-position:0px 1080px; }
}
<div class="hi"></div>
I tried using #keyframe with background-position-y axis to no avail.
It should be animation at 1 frame.
You just needed to change the steps to 6.
Basically speaking, steps is the number of sprites you are wanting to show over X time. So in this case, you only have 6, not 9.
I also changed it to use background-position.y.. note that having background-position: 0 0; is also good practice for when you come across more complex, grid sprite sheets.
body{
background: brown;
}
.hi {
width: 117px;
height: 180px;
background-image: url("http://i.imgur.com/DxApxaV.png");
background-position: 0 0;
-webkit-animation: play .9s steps(6) infinite;
-moz-animation: play .9s steps(6) infinite;
-ms-animation: play .9s steps(6) infinite;
-o-animation: play .9s steps(6) infinite;
animation: play .9s steps(6) infinite;
}
#keyframes play {
from { background-position-y:0px; }
to { background-position-y:1080px; }
}
<div class="hi"></div>
I made an CSS slideshow with 3 images animated by keyframes that makes a fade in/out effect. So far, so well. But there's a problem with the animation on the second loop of the slideshow.
Im going to explain my best: the first loop animation works perfectly, but once the first image come back again there's a fade to white on all the slides that I like to avoid.
I don't understand why the first loop works perfectly and then the other loops have this fade to white issue. You can see this problem on the Snippet.
Help is really apreciated!
.imgbox{
display: flex;
align-items: center;
height: 100%;
width: 100%;
background-position: center center;
background-size: cover;
}
#img1{
position: absolute;
z-index: 3;
-webkit-animation: slideshow 15s linear 0s infinite;
-moz-animation: slideshow 15s linear 0s infinite;
-ms-animation: slideshow 15s linear 0s infinite;
-o-animation: slideshow 15s linear 0s infinite;
animation: slideshow 15s linear 0s infinite;
}
#img2{
position: absolute;
z-index: 2;
-webkit-animation: slideshow 15s linear 5s infinite;
-moz-animation: slideshow 15s linear 5s infinite;
-ms-animation: slideshow 15s linear 5s infinite;
-o-animation: slideshow 15s linear 5s infinite;
animation: slideshow 15s linear 5s infinite;
}
#img3{
position: absolute;
z-index: 1;
-webkit-animation: slideshow 15s linear 10s infinite;
-moz-animation: slideshow 15s linear 10s infinite;
-ms-animation: slideshow 15s linear 10s infinite;
-o-animation: slideshow 15s linear 10s infinite;
animation: slideshow 15s linear 10s infinite;
}
#-webkit-keyframes slideshow {
25% { opacity: 1;}
30% { opacity: 0;}
95% { opacity: 0;}
100% { opacity: 1;}
}
#-moz-keyframes slideshow {
25% { opacity: 1;}
30% { opacity: 0;}
95% { opacity: 0;}
100% { opacity: 1;}
}
#-ms-keyframes slideshow {
25% { opacity: 1;}
30% { opacity: 0;}
95% { opacity: 0;}
100% { opacity: 1;}
}
#-o-keyframes slideshow {
25% { opacity: 1;}
30% { opacity: 0;}
95% { opacity: 0;}
100% { opacity: 1;}
}
#keyframes slideshow {
25% { opacity: 1;}
30% { opacity: 0;}
95% { opacity: 0;}
100% { opacity: 1;}
}
<div id="img1" class="imgbox" style="background-image: url('http://img2.netcarshow.com/Ford-GT90_Concept_1995_800x600_wallpaper_01.jpg');">
</div>
<div id="img2" class="imgbox" style="background-image: url('http://img2.netcarshow.com/Mercedes-Benz-SLR_McLaren_2004_800x600_wallpaper_02.jpg');">
</div>
<div id="img3" class="imgbox" style="background-image: url('http://img2.netcarshow.com/Porsche-911_Carrera_4S_2002_800x600_wallpaper_0d.jpg');">
</div>
.imgbox{
display: flex;
align-items: center;
height: 100%;
width: 100%;
background-position: center center;
background-size: cover;
}
#img1{
position: absolute;
z-index: 3;
animation: xfade 15s -0s infinite;
animation-timing-function: ease-in-out;
}
#img2{
position: absolute;
z-index: 2;
animation: xfade 15s -5s infinite;
animation-timing-function: ease-in-out;
}
#img3{
position: absolute;
z-index: 1;
animation: xfade 15s -10s infinite;
animation-timing-function: ease-in-out;
}
#keyframes xfade{
0% {opacity: 0;}
20% {opacity: 1;}
33% {opacity: 1;}
53% {opacity: 0;}
100% {opacity: 0;}
}
I just set up a jsfiddle with an updated version for you.
https://jsfiddle.net/87axbx1o/
Let me know if that works well for you
animation is not working on first load here http://sbarrogrimsby.com/
pizza is scrolled down from right to left under menu (next to handmade fresh all way). but when we refreshed page, it is working.
html code:
css code used:
.grape_pizza
{
width:915px;
height:921px;
position:absolute;
right:-15%;
bottom:-75px;background:url("../images/banner_image.png") no-repeat top center;
-webkit-animation: webkit-circle 2s linear 1;
-moz-animation: moz-circle 2s linear 1;
-o-animation: o-circle 2s linear 1;
-ms-animation: ms-circle 2s linear 1;
-o-animation: circle 2s linear 1;
animation:circle 2s linear 6;
-ms-transform-origin: 50% 50px;
-o-transform-origin: 50% 50px;
-webkit-transform-origin: 50% 50px;
-moz-transform-origin: 50% 50px;
transform-origin: 50% 50px;
border-radius:50%;
}
#-webkit-keyframes webkit-circle {
from{-webkit-transform:rotate(270deg);}
to {-webkit-transform:rotate(360deg);}
}
#-moz-keyframes moz-circle {
from{-moz-transform:rotate(270deg);}
to {-moz-transform:rotate(360deg);}
}
#-ms-keyframes ms-circle {
from{-ms-transform:rotate(270deg);}
to {-ms-transform:rotate(360deg);}
}
#-o-keyframes o-circle {
from{-o-transform:rotate(270deg);}
to {-o-transform:rotate(360deg);}
}
#keyframes circle {
from{transform:rotate(270deg);}
to {transform:rotate(360deg);}
}