I have code which rotates the image 360 degrees infinitely. All things seem fine but the rotation of the image is causing the image to resize i.e., the height of page with increasing and decreasing. I'm not getting why is it happening. The fluctuation of scroll bar shows it.
I've attached a sample snippet which illustrates my problem.
.logo-circle img {
-webkit-animation: spin1 100s infinite linear;
-moz-animation: spin1 100s infinite linear;
-o-animation: spin1 100s infinite linear;
-ms-animation: spin1 100s infinite linear;
animation: spin1 100s infinite linear;
position: absolute;
top: 3%;
left: 27.5%;
overflow: hidden;
}
#keyframes spin1 {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
<div class="logo-circle img-responsive">
<img src = "https://upload.wikimedia.org/wikipedia/en/thumb/0/09/Circle_Logo.svg/1024px-Circle_Logo.svg.png" width = "45%"/>
</div>
The image is not resizing, but when it rotates it takes a larger space because of the corners
You can resolve that by adding overflow:hidden to body
body {
margin: 0;
height: 100vh;
}
.logo-circle {
height: 100%;
overflow: hidden;
position: relative;
}
.logo-circle img {
-webkit-animation: spin1 100s infinite linear;
-moz-animation: spin1 100s infinite linear;
-o-animation: spin1 100s infinite linear;
-ms-animation: spin1 100s infinite linear;
animation: spin1 100s infinite linear;
position: absolute;
top: 3%;
left: 27.5%;
max-height: 95%;
width: auto;
}
#keyframes spin1 {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<div class="logo-circle img-responsive">
<img src="https://upload.wikimedia.org/wikipedia/en/thumb/0/09/Circle_Logo.svg/1024px-Circle_Logo.svg.png" width="45%">
</div>
Maybe it's about img-responsive class from Bootstrap? ... it's use "max-width and height:auto;" So if Your image is not a square, it can be resized.
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 have a question in regards to building an Infinite Scrolling Banner on a website I'm working on.
I made it by putting all my images on one image and having it scroll across the screen above my footer.
2 issues I'm having, the image is overlapping my outside container, I want it to just show up in the designated area for my content. Also my image isn't repeating it will scroll through the whole image and then start over, I was wondering if I can have the image run on repeat and no overlap my container outside it looks bad.
Here is the code I wrote for it, I would really appreciate any help from you guys, and I'd like to thank you in advance for helping me out.
This is the layout for the code.
<div class="photobanner" style="display: inline-block; height: 150px; width: 2500px; overflow: hidden;">
<img class="first" src="https://www.dcnevents.com/wp-content/uploads/2018/01/ScrollingSponsor-1.png" alt="" />
</div>
This is the styling I've done for the code:
#keyframes "bannermove" {
0% {
margin-left: 0px;
}
100% {
margin-left: -2150px;
}
}
#-moz-keyframes bannermove {
0% {
margin-left: 0px;
}
100% {
margin-left: -2150px;
}
}
#-webkit-keyframes "bannermove" {
0% {
margin-left: 0px;
}
100% {
margin-left: -2150px;
}
}
#-ms-keyframes "bannermove" {
0% {
margin-left: 0px;
}
100% {
margin-left: -2150px;
}
}
#-o-keyframes "bannermove" {
0% {
margin-left: 0px;
}
100% {
margin-left: -2150px;
}
}
.photobanner img{
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
p .first{
-webkit-animation: bannermove 30s linear infinite;
-moz-animation: bannermove 30s linear infinite;
-ms-animation: bannermove 30s linear infinite;
-o-animation: bannermove 30s linear infinite;
animation: bannermove 30s linear infinite;
display:inline-block;
}
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>
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);}
}