I have some animations I found online. I am able to apply them when I hover the div i've assigned the class to but I can't figure out how to animate when I leave hover.
What I am hoping to get is a control bar which slides up when i hover and slides down when i leave.
HTML:
<div id="controls" class="cAnimated fadeInUp fadeInDown">
<div id="defaultBar">
<div id="progressBar"></div>
</div>
<button id="playButton"><img src="images/icons/play.png" /></button>
<button id="vol" onclick="showSlider()"><img src="images/icons/vol.png" /></button>
<button id="containSlider">
<input type="range" id="vSlider" min="0" max="1" step="0.1" value="0.5"/></button>
<div id='containTime'><span id='timeDisplay'>0:00</span><span>/</span><span id='durationDisplay'>0:00</span></div>
<button id="full"><img src="images/icons/full.png" /></button>
<button id="mute"><img src="images/icons/mute.png" /></button>
</div>
CSS:
.animated:hover {
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-ms-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-duration: 0.9s;
-moz-animation-duration: 0.9s;
-ms-animation-duration: 0.9s;
-o-animation-duration: 0.9s;
animation-duration: 0.9s;
}
.animated.hinge {
-webkit-animation-duration: 2s;
-moz-animation-duration: 2s;
-ms-animation-duration: 2s;
-o-animation-duration: 2s;
animation-duration: 2s;
}
#keyframes fadeInUp {
0% {
opacity: 0;
transform: translateY(5px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.fadeInUp:hover {
-webkit-animation-name: fadeInUp;
-moz-animation-name: fadeInUp;
-o-animation-name: fadeInUp;
animation-name: fadeInUp;
}
#keyframes fadeInDown {
0% {
opacity: 0;
transform: translateY(-20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.fadeInDown {
-webkit-animation-name: fadeInDown;
-moz-animation-name: fadeInDown;
-o-animation-name: fadeInDown;
animation-name: fadeInDown;
}
More code: http://jsfiddle.net/EaC82/
This is much cleaner with CSS transitions:
.fadeInUp {
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-o-transition: all 300ms ease;
-ms-transition: all 300ms ease;
transition: all 300ms ease;
-webkit-transform: translate(0,10px);
-moz-transform: translate(0,10px);
-o-transform: translate(0,10px);
-ms-transform: translate(0,10px);
transform: translate(0,10px);
opacity: 0;
}
.fadeInUp:hover {
-webkit-transform: translate(0,0);
-moz-transform: translate(0,0);
-o-transform: translate(0,0);
-ms-transform: translate(0,0);
transform: translate(0,0);
opacity: 1;
}
Demo: http://jsfiddle.net/k3Y5x/
Related
I've got the following animation. What I'm trying to do is when the animation reaches 50% I want it to stay there for 8 seconds.
If I change animation-duration: 3s; to 8s its is painfully slow.
And the transition-duration: 0.5s; doesn't seem to have any effect whatsoever.
I also tried adding animation-duration: 5s; to 50% {} but that doesn't do anything either.
Any suggestions on how to accomplish this?
html body div#size_cont div#dirt_specs {
-webkit-animation-name: dirt-specs1-anim;
-moz-animation-name: dirt-specs1-anim;
-o-animation-name: dirt-specs1-anim;
animation-name: dirt-specs1-anim;
-webkit-animation-timing-function: ease-in-out;
-moz-animation-timing-function: ease-in-out;
-o-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
transition-duration: 0.5s;
-webkit-animation-duration: 3s;
-moz-animation-duration: 3s;
-o-animation-duration: 3s;
animation-duration: 3s;
transform: scale(1.4,1.4);
opacity: 0;
}
#-webkit-keyframes dirt-specs1-anim {
50% {
transform: scale(1.2,1.2);
opacity: 0.5;
}
100% {
opacity: 0;
}
}
#-moz-keyframes dirt-specs1-anim {
50% {
transform: scale(1.2,1.2);
opacity: 0.5;
}
100% {
opacity: 0;
}
}
#-o-keyframes dirt-specs1-anim {
50% {
transform: scale(1.2,1.2);
opacity: 0.5;
}
100% {
opacity: 0;
}
}
#keyframes dirt-specs1-anim {
50% {
transform: scale(1.2,1.2);
opacity: 0.5;
}
100% {
opacity: 0;
}
}
This is what you need to do in your animation frames:
#keyframes dirt-specs1-anim {
13.6% {
transform: scale(1.2, 1.2);
opacity: 0.5;
}
86.4% {
transform: scale(1.2, 1.2);
opacity: 0.5;
}
100% {
opacity: 0;
}
}
And simply set your animation-duration to 11s.
Explanation:
Since your original animation was 3 seconds long, and your requirement is to include a 8 second delay in the middle, the entire animation becomes 11 seconds.
This means that 1.5s goes into the first transition, 8s goes into the frozen segment, and 1.5s goes into the ending transition.
With that said, you need to get the % at which 1.5s is done out of 11s, which 1.5/11 = 0.136, hence the 13.6%.
The 86.4% is calculated from the reverse, 1 - 1.5/11 = 0.864, and this is needed because you want to maintain this animation state up (i.e., the frozen segment) until the last 1.5s of the animation.
See below for a working example:
div {
height: 150px;
width: 150px;
background: red;
-webkit-animation-name: dirt-specs1-anim;
-moz-animation-name: dirt-specs1-anim;
-o-animation-name: dirt-specs1-anim;
animation-name: dirt-specs1-anim;
-webkit-animation-timing-function: ease-in-out;
-moz-animation-timing-function: ease-in-out;
-o-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-duration: 11s;
-moz-animation-duration: 11s;
-o-animation-duration: 11s;
animation-duration: 11s;
transform: scale(1.4, 1.4);
opacity: 0;
}
#-webkit-keyframes dirt-specs1-anim {
13.6% {
transform: scale(1.2, 1.2);
opacity: 0.5;
}
86.4% {
transform: scale(1.2, 1.2);
opacity: 0.5;
}
100% {
opacity: 0;
}
}
#-moz-keyframes dirt-specs1-anim {
13.6% {
transform: scale(1.2, 1.2);
opacity: 0.5;
}
86.4% {
transform: scale(1.2, 1.2);
opacity: 0.5;
}
100% {
opacity: 0;
}
}
#-o-keyframes dirt-specs1-anim {
13.6% {
transform: scale(1.2, 1.2);
opacity: 0.5;
}
86.4% {
transform: scale(1.2, 1.2);
opacity: 0.5;
}
100% {
opacity: 0;
}
}
#keyframes dirt-specs1-anim {
13.6% {
transform: scale(1.2, 1.2);
opacity: 0.5;
}
86.4% {
transform: scale(1.2, 1.2);
opacity: 0.5;
}
100% {
opacity: 0;
}
}
<div></div>
I want to apply floating effect to some texts. I tried it using marquee.
.bounce {
height: 50px;
overflow: hidden;
position: relative;
}
.bounce p {
position: absolute;
width: 50%;
margin: 0;
line-height: 50px;
text-align: center;
color: #FFF;
opacity: 0.7;
-moz-transform: translateX(50%);
-webkit-transform: translateX(50%);
transform: translateX(50%);
-moz-animation: bouncing-text 25s linear infinite alternate;
-webkit-animation: bouncing-text 25s linear infinite alternate;
animation: bouncing-text 25s linear infinite alternate;
}
#keyframes bouncing-text {
0% {
-moz-transform: translateX(50%);
-webkit-transform: translateX(50%);
transform: translateX(50%);
}
100% {
-moz-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
<div class="bounce">
<p>SOFT LANDSCAPING</p>
<br />
<p>HARD LANDSCAPING</p>
<br />
</div>
This is for bouncing. I want to make the text float like in the water.
Please help me to find a solution. If any other way please let me know.
You can achieve this using css3 animation-name property.
HTML:
<div class="floating">
Floating effect like water
</div>
CSS :
.floating {
-webkit-animation-name: Floatingx;
-webkit-animation-duration: 3s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
-moz-animation-name: Floating;
-moz-animation-duration: 3s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: ease-in-out;
margin-left: 30px;
margin-top: 5px;
}
#-webkit-keyframes Floatingx {
from {-webkit-transform:translate(0, 0px);}
65% {-webkit-transform:translate(0, 15px);}
to {-webkit-transform: translate(0, -0px);}
}
#-moz-keyframes Floating {
from {-moz-transform:translate(0, 0px);}
65% {-moz-transform:translate(0, 15px);}
to {-moz-transform: translate(0, -0px);}
}
Here is working fiddle.
For more on how animation-name works, check this out : animate-name property.
You could do it with hover.css. You have to use the code from the :hover selector and add it to the element's style itself to make it work.
.hvr-bob {
-webkit-animation-name: hvr-bob-float, hvr-bob;
animation-name: hvr-bob-float, hvr-bob;
-webkit-animation-duration: .3s, 1.5s;
animation-duration: .3s, 1.5s;
-webkit-animation-delay: 0s, .3s;
animation-delay: 0s, .3s;
-webkit-animation-timing-function: ease-out, ease-in-out;
animation-timing-function: ease-out, ease-in-out;
-webkit-animation-iteration-count: 1, infinite;
animation-iteration-count: 1, infinite;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-direction: normal, alternate;
animation-direction: normal, alternate;
}
Check the JSFiddle. Don't forget to add hover.css / hover-min.css.
So I want to rotate an icon in place using css.
I've tried this
.rotate-icon-gif {
-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);
-webkit-transform-origin: 30px 22px;
}
to { -webkit-transform: rotate(360deg);
-webkit-transform-origin: 30px 22px;
}
}
#keyframes spin {
from {
transform:rotate(0deg);
transform-origin: 55% 50%;
}
to {
transform:rotate(360deg);
transform-origin: 55% 50%;
}
}
But it won't rotate in place - it rotates about some other center.
I've looked at the dimensions of the div that has this -
It's 60 x 30, with 15 padding on top. Hence, I've tried to make the transform-origin on 30px and 22px offsets.
It's still not working - how should I go about fixing this?
There are two methods of achieving this. Firstly, you can edit the image so the center lies directly on the axis of rotation.
First Method
Using cropped image. (No CSS added, deleted obsolete transition-origin)
See snippet:
.rotate-icon-gif {
-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);
}
}
<img src="http://i.imgur.com/tPLLoew.png" class="rotate-icon-gif">
Second Method
You can use transform-origin: x y; Here, you need to find the x and y coordinates of the axis using Paint or Photoshop like this: (You need to find the coordinates of intersection of black line)
See snippet :
.rotate-icon-gif {
-webkit-animation-name: spin;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: spin;
-moz-animation-duration: 4s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: spin;
-ms-animation-duration: 4s;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
animation-name: spin;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#-ms-keyframes spin {
from {
-ms-transform: rotate(0deg);
transform-origin: 42px 35px;
}
to {
-ms-transform: rotate(360deg);
transform-origin: 42px 35px;
}
}
#-moz-keyframes spin {
from {
-moz-transform: rotate(0deg);
-moz-transform-origin: 42px 35px;
}
to {
-moz-transform: rotate(360deg);
-moz-transform-origin: 42px 35px;
}
}
#-webkit-keyframes spin {
from {
-webkit-transform: rotate(0deg);
-webkit-transform-origin: 42px 35px;
}
to {
-webkit-transform: rotate(360deg);
-webkit-transform-origin: 42px 35px;
}
}
#keyframes spin {
from {
transform: rotate(0deg);
transform-origin: 42px 35px;
}
to {
transform: rotate(360deg);
transform-origin: 42px 35px;
}
}
<img src="http://i.stack.imgur.com/GZ2CV.png" class="rotate-icon-gif">
NOTE - From my other answer : link
<img class="image" src="" alt="" width="120" height="120">
Cannot get this animated image to work, it is supposed to do a 360 degrees rotation.
I guess something's wrong with the CSS below, as it just stays still.
.image {
float: left;
margin: 0 auto;
position: absolute;
top: 50%;
left: 50%;
width: 120px;
height: 120px;
margin-top: -60px;
margin-left: -60px;
-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);
}
}
}
Here is a demo. The correct animation CSS:
.image {
position: absolute;
top: 50%;
left: 50%;
width: 120px;
height: 120px;
margin:-60px 0 0 -60px;
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s 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);
}
}
<img class="image" src="http://i.stack.imgur.com/pC1Tv.jpg" alt="" width="120" height="120">
Some notes on your code:
You've nested the keyframes inside the .image rule, and that's incorrect
float:left won't work on absolutely positioned elements
Have a look at caniuse: IE10 doesn't need the -ms- prefix
To achieve the 360 degree rotation, here is the Working Solution.
The HTML:
<img class="image" src="your-image.png">
The CSS:
.image {
overflow: hidden;
transition-duration: 0.8s;
transition-property: transform;
}
.image:hover {
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
You have to hover on the image and you will get the 360 degree rotation effect.
PS: Add a -webkit- extension for it to work on chrome and other webkit browers. You can check the updated fiddle for webkit HERE
I have a rotating image using the same thing as you:
.knoop1 img{
position:absolute;
width:114px;
height:114px;
top:400px;
margin:0 auto;
margin-left:-195px;
z-index:0;
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
overflow:hidden;
}
.knoop1:hover img{
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
}
try this easy
.btn-circle span {
top: 0;
position: absolute;
font-size: 18px;
text-align: center;
text-decoration: none;
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
}
.btn-circle span :hover {
color :silver;
}
/* rotate 360 key for refresh btn */
#-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); } }
<button type="button" class="btn btn-success btn-circle" ><span class="glyphicon">↻</span></button>
if you want to flip image you can use it.
.image{
width: 100%;
-webkit-animation:spin 3s linear infinite;
-moz-animation:spin 3s linear infinite;
animation:spin 3s linear infinite;
}
#-moz-keyframes spin { 50% { -moz-transform: rotateY(90deg); } }
#-webkit-keyframes spin { 50% { -webkit-transform: rotateY(90deg); } }
#keyframes spin { 50% { -webkit-transform: rotateY(90deg); transform:rotateY(90deg); } }
The another method to rotate an object in the background using css3, check out the below css3 code here:
.floating-ball-model-3 > span {
animation-name: floating-ball-model-3;
animation-duration: 7s;
animation-iteration-count: infinite;
animation-timing-function: linear;
-webkit-animation-name: floating-ball-model-3;
-webkit-animation-duration: 7s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: floating-ball-model-3;
-moz-animation-duration: 7s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: floating-ball-model-3;
-ms-animation-duration: 7s;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
-o-animation-name: floating-ball-model-3;
-o-animation-duration: 7s;
-o-animation-iteration-count: infinite;
-o-animation-timing-function: linear;
}
#keyframes floating-ball-model-3 {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
Here this should help you
The below jsfiddle link will help you understand how to rotate a image.I used the same one to rotate the dial of a clock.
http://jsfiddle.net/xw89p/
var rotation = function (){
$("#image").rotate({
angle:0,
animateTo:360,
callback: rotation,
easing: function (x,t,b,c,d){
return c*(t/d)+b;
}
});
}
rotation();
Where:
• t: current time,
• b: begInnIng value,
• c: change In value,
• d: duration,
• x: unused
No easing (linear easing):
function(x, t, b, c, d) { return b+(t/d)*c ; }
HTML
<div class="photos">
<img src="images/p1.jpg" />
<img src="images/p2.jpg" />
.............
</div>
CSS
.photos img:hover {
-webkit-transform: rotate(360deg) scale(1.5);
-moz-transform: rotate(360deg) scale(1.5);
-o-transform: rotate(360deg) scale(1.5);
transform: rotate(360deg) scale(1.5);
z-index: 10;}
why is the above CSS rotate property applied only to p1.jpg ?
Because you're only hovering on p1.jpg the CSS selector will only be fired on the image you are hovering.
If you just wan't each image to rotate seperatly, add these lines to your css.
-webkit-transition: all 1.2s linear;
-moz-transition: all 1.2s linear;
-o-transition: all 1.2s linear;
-ms-transition: all 1.2s linear;
transition: all 1.2s linear;
Unfortunately, what you're asking for will require some JavaScript to make happen.
Rotate works. Angle of 360 degrees brings the image in the same position. Use transform with transition or change the angle value.
So, your code will be something like:
.photos img {
-webkit-transition: -webkit-transform 1.2s linear;
-moz-transition: -moz-transform 1.2s linear;
-o-transition: -o-transform 1.2s linear;
-ms-transition: -ms-transform 1.2s linear;
transition: transform 1.2s linear;
overflow:hidden;
}
.photos img:hover {
-webkit-transform: rotate(360deg) scale(1.5);
-moz-transform: rotate(360deg) scale(1.5);
-o-transform: rotate(360deg) scale(1.5);
-ms-transform: rotate(360deg) scale(1.5);
transform: rotate(360deg) scale(1.5);
z-index: 10;
}
this link can help you..
.elem{
-webkit-transition-property: -webkit-transform;
-webkit-transition-duration: 1s;
-moz-transition-property: -moz-transform;
-moz-transition-duration: 1s;
}
.elem:hover {
-webkit-animation-name: rotate;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: rotate;
-moz-animation-duration: 2s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
}
#-webkit-keyframes rotate {
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(360deg);}
}
#-moz-keyframes rotate {
from {-moz-transform: rotate(0deg);}
to {-moz-transform: rotate(360deg);}
}
There was no issue with your code. The rotate was working on all the elements of the div. The only reason you could not see it was because you did not have a delay or duration for the 'transformation'.
I have used the same code that 'Dragos Sandu' has used. Only change I suggest is the "ease-in-out" for the duration. specially when the change is only 1.2 seconds. This make the change "easy on the eye".
CSS
.photos img:hover {
transform: rotate(360deg) scale(1.5);
-webkit-transform: rotate(360deg) scale(1.5);
-moz-transform: rotate(360deg) scale(1.5);
-o-transform: rotate(360deg) scale(1.5);
z-index: 10;
-webkit-transition: all 1.2s ease-in-out;
-moz-transition: all 1.2s ease-in-out;
-o-transition: all 1.2s ease-in-out;
-ms-transition: all 1.2s ease-in-out;
}
Working Demo