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>
Related
I have this:
.about5 {
animation: fade 4s ease forwards, warp 1s linear;
animation-delay: 2s;
}
#keyframes rotate {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(95deg);
}
}
#keyframes fade {
0% {
opacity: 1;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#keyframes warp {
50% {
transform: translateZ(-10px) rotateX(60deg) rotateZ(29deg) rotateY(-180deg);
}
}
<div class="about5">About</div>
<div class="about">About text etc</div>
Why, when I have separated multiple animations by a comma, will the second animation:
#keyframes warp {
50% {
transform: translateZ(-10px) rotateX(60deg)
rotateZ(29deg) rotateY(-180deg);
}
}
#media (min-width: 768px) {.about {
animation:
spin 20s linear infinite, warp 2s linear infinite; animation.
delay: 4s;}}
not take effect?
I want aboutelement to spin and translateZ but it's not working. Is this because of the comma in the wrong place?
It works ok, your problem must be in another place:
.about5 {
animation: fade 16s ease forwards infinite, warp 4s linear infinite;
animation-delay: 2s;
}
#keyframes fade {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#keyframes warp {
50% {
transform: translateZ(-10px) rotateX(60deg) rotateZ(29deg) rotateY(-180deg);
}
<div class="about5">About</div>
<div class="about">About text etc</div>
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 would like to make a simple animation, when the page loads, my logo should animate from the left side of the box to the right side. I have tried many versions, but haven't succeeded yet.
HTML
<body>
<div>
<img src="logo.png" alt="logo" style="width:170px;height:120px;">
</div>
</body>
CSS
div
{
width:640px;
height:175px;
background:blue;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
position:absolute;
}
div img
{
-webkit-transform: translate(3em,0);
-moz-transform: translate(3em,0);
-o-transform: translate(3em,0);
-ms-transform: translate(3em,0);
}
Try using keyframes.
div {
width: 50px;
height: 40px;
background: blue;
position: relative;
left: 500px;
-webkit-animation: slideIn 2s forwards;
-moz-animation: slideIn 2s forwards;
animation: slideIn 2s forwards;
}
#-webkit-keyframes slideIn {
0% {
transform: translateX(-900px);
}
100% {
transform: translateX(0);
}
}
#-moz-keyframes slideIn {
0% {
transform: translateX(-900px);
}
100% {
transform: translateX(0);
}
}
#keyframes slideIn {
0% {
transform: translateX(-900px);
}
100% {
transform: translateX(0);
}
}
<div></div>
You need to use animation instead of transition. Transition effects are triggered on certain events, for example a click which adds a class or a hover.
div img {
animation: example 1s ease-in-out forwards;
}
#keyframes example {
from {transform: transition(0,0)}
to {transform: transition(3em,0)}
}
Now you would of course have to add the prefixes for that, webkit, moz, etc.
For basic knowledge about keyframe animation in css3:
http://www.w3schools.com/css/css3_animations.asp
I'm relatively new to CSS. I saw a lot of similar topics but I couldn't find a solution to this problem so I'll ask away.
I'm trying to create a photobanner with a keyframe animation where the images scroll to the left and scale with img:hover. The translation transform works fine and the scale transform works fine however, the latter only works if I remove the css for the keyframe animation. How can I get both transformation to work at the same time?
My CSS is as follows:
.photobannerContainer {
margin: 0 auto;
width: 90%;
overflow: hidden;
}
.photobanner {
height: 480px;
width: 8000px; /* To contain all the images end-to-end. */
}
.photobanner img {
height:100%;
transition: all .2s ease;
/*If I remove these lines then the scale transformation will work.*/
-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;
}
.photobanner img:hover {
transform: scale(1.1);
-ms-transform: scale(1.1);
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
}
#keyframes bannermove {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-3726px);
}
}
#-moz-keyframes bannermove {
0% {
-moz-transform: translateX(0);
}
100% {
-moz-transform: translateX(-3726px);
}
}
#-webkit-keyframes bannermove {
0% {
-webkit-transform: translateX(0);
}
100% {
-webkit-transform: translateX(-3726px);
}
}
#-ms-keyframes bannermove {
0% {
-ms-transform: translateX(0);
}
100% {
-ms-transform: translateX(-3726px);
}
}
#-o-keyframes bannermove {
0% {
-o-transform: translateX(0);
}
100% {
-o-transform: translateX(-3726px);
}
}
The HTML is set up as follows:
<div class="photobannerContainer">
<div class="photobanner">
<img src="url"/>
<img src="url"/>
<img src="url"/>
<img src="url"/>
<img src="url"/>
<img src="url"/>
<img src="url"/>
<img src="url"/>
<img src="url"/>
</div>
</div>
Thank you.
i have the problem today,and i dont know the reason too,but i solved it by add a extra div tag out side animation-div tag,and put transition in the outside div
like:
html
<div class="extra-div">
<div class="animation-div">
</div>
</div>
CSS
.extra-div{
transition: all .2s ease;
}
.extra-div:hover{
transform: scale(1.9);
}
.animation-div {
animation: myAnime 0.2s ease-out
}