How to prevent CSS3 transitions from reversing back?
For example: when i use
div
{
-webkit-transition:-webkit-transform 2s;
}
div:hover
{
-webkit-transform:rotate(360deg);
}
Whenever I move my mouse out it is rotating back,how to prevent it? SO that it only rotates forward when I place my mouse on the div and doesn't rotate back when my mouse leaves the div?
You have probably solved this already but in case you have not here is the solution to your particular problem of a 360 degree roll.
div
{
-webkit-transition: all 0.0s ;
-moz-transition: all 0.0s ;
-o-transition: all 0.0s ;
transition: all 0.0s;
}
div:hover
{
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
transform: rotate(360deg);
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
}
You can use CSS animations instead and set the animation-fill-mode property to forwards which will persist the end state.
Here's a quick demo. As you can see it only rotates 360 degrees and then stops (Is this want you want?). If you want it to keep rotating as long as you have the mouse over the div, then you can change forwards to infinite and set the animation-timing-function to linear (to keep a consistent speed).
Like this:
animation: rotate 2s linear infinite;
But it won't look good when you hover out, since it breaks the animation & I don't think there is a fix for this. I hope this helped. If not, maybe a JavaScript solution, as mentioned in the other answer, would be better.
And here's the code from the demo.
HTML
<div class="box"></div>
CSS
.box {
width: 100px;
height: 100px;
background: #333;
}
.box:hover {
-webkit-animation: rotate 2s forwards;
animation: rotate 2s forwards;
}
#-webkit-keyframes rotate {
100% { -webkit-transform: rotate(360deg); }
}
#keyframes rotate {
100% { transform: rotate(360deg); }
}
Also with Javascript an CSS Animation will be reversing back (animated rotating backwards as many times as it has been turned forward before), if you for example have an image element rotated for a few times by clicking through a foto gallery and then try to close it using visibility:hidden;
The solution i found was to disable the CSS animation first, before changing the elements settings or hiding the element. This way it will not reverse:
document.getElementById("picture").style.transition = "none 0s linear";
That's how :hover works. It's only effective while your mouse is over the element. To do something more permanent, you would need JavaScript.
Related
My css:
.App-logo {
animation: rotating infinite 10s linear;
height: 40vmin;
}
.App-logo:hover {
animation-timing-function: ease-out;
animation-iteration-count: 100;
animation-delay: 2s;
}
#keyframes rotating {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
It should slow down on hover and get speed without hovering but what it does a little off i wanted it to do
I think the problem that i don't actually know how to save a state of the keyframe and apply it to another animation to ease out and then in, but this just an assumption.
You aren't able to save keyframe states using only CSS to transition between them, unfortunately. If you want to transition between them, you'd need to use something like Javascript to track states and manipulate data at any point in time.
I have transform scale on image, and set on hover duration 5s, but when I move mouse from image my image don'thave ease out duration of 5s , i think you understand me.
http://jsfiddle.net/oqa88vdo/
HTML
<img src="http://spmhire.com/wp-content/uploads/2014/11/rolls-royce.jpg">
CSS
img{
width:150px
}
img:hover{
transform: scale(2,3);
transition: transform 1500ms ease;
}
i tried to set
transition: 500ms ease-out 1s; but not working
You need to apply the transition to the element itself, rather than the :hover psuedo-class:
img {
width:150px;
transition: transform 1500ms ease-in-out;
}
img:hover{
transform: scale(2,3);
}
See: http://jsfiddle.net/oqa88vdo/3/
The reasoning behind this is that CSS transitions define how changes to the element will be applied going forward. You first set the transition behavior on the element, then any CSS that changes will use that transition behaviour.
The developer guides at Mozilla cover this very well, it's worth a read.
You need to set the parameters in the non hover style as well, like so:
https://jsfiddle.net/oqa88vdo/
img{
width:150px;
transform: scale(1,1);
transition:transform 1500ms ease;
}
img:hover{
transform: scale(2,3);
transition: transform 1500ms ease;
}
<img src="http://spmhire.com/wp-content/uploads/2014/11/rolls-royce.jpg">
I'd like to delay some clouds from starting on http://therealrohanm.me/Falcon-Hacks-Website/, neither animate delay nor transition delay seem to work. How would I accomplish this?
View the code here: https://github.com/Meeshbhoombah/meeshbhoombah.github.io
Check This Fiddle: http://jsfiddle.net/0cmonc5q/
#animated-cloud-background .cloud.cloud-1 {
top: 10%;
-webkit-animation: animateCloud 10s linear infinite;
-moz-animation: animateCloud 10s linear infinite;
animation: animateCloud 10s linear infinite;
-webkit-transform: scale(0.65);
-moz-transform: scale(0.65);
transform: scale(0.65);
z-index: -5;
animation-delay: 2s;
-webkit-animation-delay: 2s;
}
#animated-cloud-background .cloud {
position: absolute;
top: 0;
left: -128px;
}
The animation delay is working, but it needs to be placed after the animations for your style.. Problem with this is that it also delays the first frame, So it appears on the screen until the delay has happened. I've fixed this by giving the cloud elements a -left position.. in this case 128 the width of the image.
And this fiddle: http://jsfiddle.net/0cmonc5q/1/
Shows each image having a different delay (1 to 5 seconds), i've given them all the same animation time/rate so they all move but shows the delay in effect.
This is my code:
http://jsfiddle.net/NVk2N/2/
I'm trying to fade the large background image in. I tried this:
#cover {
background: url(http://bootstrapguru.com/preview/cascade/images/carousel/imageOne.jpg) no-repeat center center fixed;
background-size: cover;
height:100%;
width: 100%;
position:fixed;
opacity:0;
transition: opacity 2s;
}
however the image never appears. What am I doing wrong?
James
You actually need an animation of the opacity, in which you set animation-fill-mode: forwards so the last frame continues to apply after the final iteration of the animation.
Updated fiddle: http://jsfiddle.net/NVk2N/7/
#cover {
...
-webkit-animation: 2s show;
-moz-animation: 2s show;
-ms-animation: 2s show;
animation: 2s show;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-ms-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#-webkit-keyframes show {
from { opacity: 0 }
to { opacity: 1 }
}
#-moz-keyframes show {
from { opacity: 0 }
to { opacity: 1 }
}
#-ms-keyframes show {
from { opacity: 0 }
to { opacity: 1 }
}
#keyframes show {
from { opacity: 0 }
to { opacity: 1 }
}
(of course you need to use vendor prefixes where necessary)
Note: If you need to fade-in only the background image (and not the whole element) you could load the background inside an absolute positioned pseudoelement (e.g. #cover:before) with a negative z-index and just apply the animation to the psuedoelement itself:
Here's an example on codepen: http://codepen.io/anon/pen/EJayr/
Relevant CSS
#cover {
position: relative;
width : ...;
height : ...;
}
#cover:before {
content : "";
position: absolute;
z-index : -1;
top : 0;
left : 0;
width : 100%;
height : 100%;
background: url(...) top left no-repeat;
-webkit-animation: 5s show;
-moz-animation: 5s show;
-ms-animation: 5s show;
animation: 5s show;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-ms-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
Animations on pseudoelements work fine on every modern browser (except in Chrome < 26 — as reported on issue #54699 — but not really a problem, since the current version at this moment is 34.0.1847.116)
you need to use some js code to trigger the animation property. just add a new class for #cover with opacity:1 and on body load assign this class to cover.
example
<body onload="document.getElementById('cover').classList.add('showed');">
To trigger a transition you actually need a trigger.
You are setting a opacity of "0" and this is what you get: 0 opacity.
The transition would work if the declaration of opacity would change from 0 to 1.
That is what transitions do.
The solution of Fabrizio Calderan with the Animation should do the job.
Working with the other answers that have been given will give you a fade on all the elements within that element so this will no achieve your desired result.
The best way to do this is to:
1) Create a div with a z-index of 1 which holds your background image and what you want to fade
2) Create another div with a z-index of 10 which holds your content which you dont want to fade and position it over the background div with position absolute.
3) Animate the background image with jquery animate
I hope this helps and that will give you your desired outcome!
I believe you may use keyframes and animations to get the job done.
It's not possible with purely css to fade only the background image. Reference: How to fade in background image by CSS3 Animation
The answer there explains that you may use <img> inside a <div> that you apply the fade animation on as there is no other way without anything but css.
I have this animation which I use for a div appear on screen so it comes from the bottom and stays at its final position.
#-webkit-keyframes slide {
from { opacity: 0; -webkit-transform: translateY(500px); }
to { opacity: 1; -webkit-transform: translateY(0); }
}
.module {
-webkit-animation: slide .4s 0 1 normal ease none;
}
I was thinking if it is possible that when I assign class='done' for that div it could take the same animation and play it reversely simulating the same effect hiding the div.
like:
.module.done {
-webkit-animation: slide .4s 0 1 alternate ease none;
}
but it seems it always start from the 1 iteration in the second case I would like to reverse the animation so it could start from the original position and then slide up 500px
Is it possible to achieve using the same animation or do I have to create a new one with inverted values?
Thanks
This specific use case works best with CSS transitions, plus you get free Opera and FF 3.5+ support. This is the basic syntax:
#notice {
-vendor-transition: -webkit-transform 2s ease;
}
#notice.pop {
-vendor-transform: translateY(50px);
}
When you add or remove .pop, the animation is automatically done for you.
Check out the working example:
http://jsfiddle.net/qLKzX/
I believe you can do this by setting the animation-delay to an appropriate negative value (so it starts at the first reversal).