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
Related
I have been trying to do a simple animation in CSS. The app logo is supposed to move 200px to the right and then return, smoothly, to it's original position. To do this I have written this for the animations:
/* LOGO MAIN STYLE */
.App-logo {
height: 40vmin;
pointer-events: none;
}
/* ANIMATION FOR THE LOGO */
.App-logo {
animation-fill-mode: forwards, none;
animation-name: move-right, move-left;
animation-delay: 0s, 1s;
animation-duration: 1s, 1s;
animation-iteration-count: infinite, infinite;
animation-timing-function: ease-in-out, ease-in-out;
}
#keyframes move-right {
from {
transform: translateX(0%);
}
to {
transform: translateX(200px);
}
}
#keyframes move-left {
from {
transform: translateX(0%);
}
to {
transform: translateX(-200px);
}
}
The problem I am having is that the first animation never actually plays, it just skips to the second.
/* LOGO MAIN STYLE */
.App-logo {
height: 40vmin;
pointer-events: none;
}
/* ANIMATION FOR THE LOGO */
.App-logo {
animation-name: move-right;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
#keyframes move-right {
0%{
transform: translateX(0%);
}
50% {
transform: translateX(200px);
}
100% {
transform: translateX(0px);
}
}
/* LOGO MAIN STYLE */
.App-logo {
height: 40vmin;
pointer-events: none;
}
/* ANIMATION FOR THE LOGO */
.App-logo {
animation-name: move-right;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
#keyframes move-right {
0%{
transform: translateX(0%);
}
50% {
transform: translateX(200px);
}
100% {
transform: translateX(0px);
}
}
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>
How do I do the inverse animation when I "hover off" the .child element (css3 only if possible)?
Fiddle
HTML:
<div class="child">
<i class="fa fa-video-camera spin" style="font-size:22px;"></i>
</div>
CSS:
.child:hover .spin{
-webkit-animation: spin 0.2s linear;
-moz-animation: spin 0.2s linear;
-o-animation: spin 0.2s linear;
animation: spin 0.2s linear;
}
#-moz-keyframes spin {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
#-webkit-keyframes spin {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
The easiest way would be to use transition instead of keyframes:
.child .spin {
transition: transform .2s linear;
}
.child:hover .spin{
transform: rotate(360deg);
}
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="child">
<i class="fa fa-video-camera spin" style="font-size:22px;"></i>
</div>
Comes with auto-reverse built in. Much less code.
Don't use animation, use transition
<div class="camera"></div>
<style>
.camera{
height: 100px;
width: 50px;
background-color: red;
transition: 2s;
}
.camera:hover{
transform: rotate(360deg);
}
</style>
Fiddle
Well, you can do that. But you'll need a default animation too.
.child{
margin-top:20px;
margin-left:20px;
}
.child .spin{
-webkit-animation: spin 0.5s ease-in-out;
-moz-animation: spin 0.5s ease-in-out;
-o-animation: spin 0.5s ease-in-out;
animation: spin 0.5s ease-in-out;
}
.child:hover .spin{
-webkit-animation: spinh 0.5s ease-in-out;
-moz-animation: spinh 0.5s ease-in-out;
-o-animation: spinh 0.5s ease-in-out;
animation: spinh 0.5s ease-in-out;
}
#-moz-keyframes spin {
from {
-moz-transform: rotate(360deg);
}
to {
-moz-transform: rotate(0deg);
}
}
#-webkit-keyframes spin {
from {
-webkit-transform: rotate(360deg);
}
to {
-webkit-transform: rotate(0deg);
}
}
#keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
#-webkit-keyframes spinh {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#keyframes spinh {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
<div class="child">
<i class="fa fa-video-camera spin" style="font-size:22px;"></i>
</div>
See the working example.
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
}
I would like to spin my div when I hover on it and as it spin I want to make it bigger like zoom in.
So far I have this:
[html]
div class="myMsg">
<p id="welly" style="color: #009">Welcome to Y3!<br><br><br>Thanks for stopping by!</p>
</div>
[css]
.myMsg {
background: white;
width: 800px;
height : 500px;
margin: 100px auto;
border: 1px solid black;
opactiy: 0.5;
-webkit-transform: rotate(360deg); /* Safari and Chrome */
-webkit-transform: scale(.1,.1) skew(45deg) translateX(-300px);
box-shadow: 0px 0px 200px grey;
}
.myMsg:hover {
opacity: 1;
-webkit-transform: rotate(360deg); /* Safari and Chrome */
-webkit-transform: scale(1,.1 skew(0deg);
box-shadow: 0px 0px 200px grey;
}
so I want it to spin before scaling to regular size
Any help is appreciated
First, to show that it can be done.
Now that that's out of the way, let's get down to the nitty gritty and show you how to do it.
First, you'll want to use animation to animate the properties and get the rotation effect. Sadly, a transition won't be enough since transitioning between 0 and 360 means you aren't going anywhere. So, animate your properties from one to the other on the hover. Your code will end up looking something like this:
#keyframes spin {
from { transform: scale(.1,.1) skew(0deg) rotate(0deg); }
to { transform: scale(1,1) skew(0deg) rotate(360deg); }
}
.myMsg:hover {
animation: spin 1s forwards;
}
The #keyframes defines the animation that will happen, and you want to transform from one set of properties to the final one. Then, you set your :hover to play that animation. The relevant properties for the animation are animation-name, animation-duration, and animation-fill-mode (which say that it should have the same properties as the last frame when it is done animating. Webkit requires prefixes, so you'll want to put those in too.
In addition to this, I also placed a transition: transform 1s; on the .myMsg class so that it would animate back after the mouse moves away. But do note that Webkit doesn't seem to play nice with the interaction between the two, so it is a bit choppy and less than ideal. But, with experimental properties like this, sometimes you get what you get.
Some side notes:
Your CSS isn't cross browser compatible, you should clean it up a bit
You're defining 1 transform property, and then immediately overriding it. All transforms need to go in the same declaration. They can't be combined like that
Define an infinite css animation with keyframes for spinning and switch to it on the hover. Use transition for the size (height/width) properties and change them on hover in css also.
Example: http://jsfiddle.net/6guCd/
div {
margin: 100px;
width: 100px;
height: 100px;
background: #f00;
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-ms-transition: all 200ms ease;
transition: all 200ms ease;
}
div:hover {
margin: 50px;
width: 200px;
height: 200px;
-webkit-animation-name: spin;
-webkit-animation-duration: 4000ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: spin;
-moz-animation-duration: 4000ms;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: spin;
-ms-animation-duration: 4000ms;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
animation-name: spin;
animation-duration: 4000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#-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); }
}
#-webkit-keyframes spin {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
from {
transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}
}