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);}
}
Related
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.
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 want to create "roll in" effect with image of 8-ball. I want this animation to load on page load and to end then ball reaches text layer that's in the middle (of revolution slider).
On codepen I found similar thing that I have used and achieved result at some point but animation goes infinite. The question is, how to achieve that ball stops when it reaches text layer?
This is what I've got so far:
.circle {
display: block;
width: 100px;
height: 100px;
background: none;
border-radius: 50%;
/* Animation to spin and move the sphere */
-webkit-animation: spin 1000ms linear infinite, moveLeftToRight 5s linear infinite;
-moz-animation: spin 1000ms linear infinite, moveLeftToRight 5s linear infinite;
-ms-animation: spin 1000ms linear infinite, moveLeftToRight 5s linear infinite;
animation: spin 1000ms linear infinite, moveLeftToRight 5s linear infinite;
-webkit-transition: all 1s ease;
transition: all 1s ease;
position: absolute;
left: 0;
}
/* Spinning the sphere using key frames */
#-ms-keyframes spin {
from {
-ms-transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg);
}
}
#-moz-keyframes spin {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
#keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
#-webkit-keyframes spin {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
/* Move sphere from left to right */
#-moz-keyframes moveLeftToRight {
0% {
left: -100px;
}
50% {
left: 50%;
}
}
#-ms-keyframes moveLeftToRight {
0% {
left: -50px;
}
50% {
left: 50%;
}
}
#keyframes moveLeftToRight {
0% {
left: -100px;
}
50% {
left: 50%;
}
}
#-webkit-keyframes moveLeftToRight {
0% {
left: -100px;
}
50% {
left: 50%;
}
}
<img class="circle" src="https://i.imgur.com/1KfVzUa.png" />
You need to add the fill-mode to freeze the animation state at the end of the animation.
-webkit-animation-fill-mode: forwards;
forwards leaves the animation in the state of the last frame
backwards leaves the animation at the start
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>
Hello I have an image inside a div, and when that div is hovered over I would like the image to "swing" smoothly.
I am very close, I have the image swinging but I cant get it to loop smoothly, it pauses after the animation is done for a small amount of time.
Can anyone help me finish the animation where it loops smoothly without any pauses?
Thanks!
Here is the code:
<div class="box">
<img class="sp-icon-1" src="http://p4cdn4static.sharpschool.com/UserFiles/Servers/Server_19477/Image/anchor.jpg">
</div>
#keyframes swinging{
0%{transform: rotate(0deg);}
25%{transform: rotate(10deg);}
75%{transform: rotate(-10deg);}
100%{transform: rotate(0deg);}
}
.box:hover img {
-webkit-transform-origin: 50% 0;
transform-origin: 50% 0;
-webkit-animation: swinging 2s ease-in-out forwards infinite;
animation: swinging 2s ease-in-out forwards infinite;
}
And the jsfiddle
here
You can easly achieve that by changing the animation from ease-in-out to linear
#keyframes swinging{
0%{transform: rotate(0deg);}
25%{transform: rotate(10deg);}
75%{transform: rotate(-10deg);}
100%{transform: rotate(0deg);}
}
.box img {
width: 300px;
height: auto;
}
.box:hover img {
-webkit-transform-origin: 50% 0;
transform-origin: 50% 0;
-webkit-animation: swinging 2s linear forwards infinite;
animation: swinging 2s linear forwards infinite;
}
<div class="box">
<img class="sp-icon-1" src="http://p4cdn4static.sharpschool.com/UserFiles/Servers/Server_19477/Image/anchor.jpg"></div>
Or in addiction you can try playing with cubic-bezier(P0, P1, P2, P3) for making your own animation
#keyframes swinging {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(10deg);
}
75% {
transform: rotate(-10deg);
}
100% {
transform: rotate(0deg);
}
}
.box img {
width: 300px;
height: auto;
}
.box:hover img {
-webkit-transform-origin: 50% 0;
transform-origin: 50% 0;
-webkit-animation: swinging 2s cubic-bezier(0.25, 0.25, 0.25, 0.5) forwards infinite;
animation: swinging 2s cubic-bezier(0.25, 0.25, 0.25, 0.5) forwards infinite;
}
<div class="box">
<img class="sp-icon-1" src="http://p4cdn4static.sharpschool.com/UserFiles/Servers/Server_19477/Image/anchor.jpg"></div>
Did a few edits. Changed the % transform & animation.
#keyframes swinging {
0% {
transform: rotate(-10deg);
}
50% {
transform: rotate(10deg);
}
100% {
transform: rotate(-10deg);
}
}
.box img {
width: 300px;
height: auto;
}
.box:hover img {
-webkit-transform-origin: 50% 0;
/* for Safari and older Chrome */
transform-origin: 50% 0;
-webkit-animation: swinging 2s ease-in-out forwards infinite;
animation: swinging 2s ease-in-out forwards infinite;
}
<div class="box">
<img class="sp-icon-1" src="http://p4cdn4static.sharpschool.com/UserFiles/Servers/Server_19477/Image/anchor.jpg"></div>