I have a 4 part CSS3 animation playing on click - but the last part of the animation is meant to take it off the screen.
However, it always goes back to its original state once it has played. Anyone know how I can stop it on its last css frame (100%), or else how to get rid of the whole div it is in once it has played.
#keyframes colorchange {
0% { transform: scale(1.0) rotate(0deg); }
50% { transform: rotate(340deg) translate(-300px,0px) }
100% { transform: scale(0.5) rotate(5deg) translate(1140px,-137px); }
}
You're looking for:
animation-fill-mode: forwards;
More info on MDN and browser support list on canIuse.
If you want to add this behaviour to a shorthand animation property definition, the order of sub-properties is as follows
animation-name - default none
animation-duration - default 0s
animation-timing-function - default ease
animation-delay - default 0s
animation-iteration-count - default 1
animation-direction - default normal
animation-fill-mode - you need to set this to forwards
animation-play-state - default running
Therefore in the most common case, the result will be something like this
animation: colorchange 1s ease 0s 1 normal forwards;
See the MDN documentation here
-webkit-animation-fill-mode: forwards; /* Safari 4.0 - 8.0 */
animation-fill-mode: forwards;
Browser Support
Chrome 43.0 (4.0 -webkit-)
IE 10.0
Mozilla 16.0 ( 5.0 -moz-)
Shafari 4.0 -webkit-
Opera 15.0 -webkit- (12.112.0 -o-)
Usage:-
.fadeIn {
animation-name: fadeIn;
-webkit-animation-name: fadeIn;
animation-duration: 1.5s;
-webkit-animation-duration: 1.5s;
animation-timing-function: ease;
-webkit-animation-timing-function: ease;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
}
#keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
The best way seems to put the final state at the main part of css. Like here, i put width to 220px, so that it finally becomes 220px. But starting to 0px;
div.menu-item1 {
font-size: 20px;
border: 2px solid #fff;
width: 220px;
animation: slide 1s;
-webkit-animation: slide 1s; /* Safari and Chrome */
}
#-webkit-keyframes slide { /* Safari and Chrome */
from {width:0px;}
to {width:220px;}
}
Isn't your issue that you're setting the webkitAnimationName back to nothing so that's resetting the CSS for your object back to it's default state. Won't it stay where it ended up if you just remove the setTimeout function that's resetting the state?
I just posted a similar answer, and you probably want to have a look at:
http://www.w3.org/TR/css3-animations/#animation-events-
You can find out aspects of an animation, such as start and stop, and then, once say the 'stop' event has fired you can do whatever you want to the dom. I tried this out some time ago, and it can work, but I'd guess you're going to be restricted to webkit for the time being (but you've probably accepted that already). Btw, since I've posted the same link for 2 answers, I'd offer this general advice: check out the W3C - they pretty much write the rules and describe the standards. Also, the webkit development pages are pretty key.
Nobody actualy brought it so, the way it was made to work is animation-play-state set to paused.
I learned today that there is a limit you want to use for the fill-mode. This is from an Apple dev. Rumor is * around * six, but not certain.
Alternatively, you can set the initial state of your class to how you want the animation to end, then * initialize * it at from / 0% .
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.
hey guys i have a difficulty adding animations dynamically , I am basically just a HTML/CSS guy , who avoids JS but uses Jquery occasionally , I know how to write jquery code though . so baically my difficulty is that i have thos bootstrap carasoul fiddle here :
now i have created a CSS-3 animation for the images in the carasoul The animation code is below :
#keyframes scalebg {
0%{
-ms-transform:scale(1);
-o-transform:scale(1);
-moz-transform:scale(1);
-webkit-transform:scale(1);
transform:scale(1);
}
100% {
-ms-transform:scale(1.3);
-o-transform:scale(1.3);
-moz-transform:scale(1.3);
-webkit-transform:scale(1.3);
transform:scale(1.3);
}
}
.scalebg {
-webkit-animation-duration: 5s;
-o-animation-duration: 5s;
animation-duration: 5s;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-animation-name: scalebg;
-o-animation-name: scalebg;
animation-name: scalebg;
-webkit-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-o-animation-direction: alternate;
animation-direction: alternate;
}
The issue i am having ::
now what i would really like to do is when each slide appears i would immediately like the class scalebg to be appeared to the <img> tag in that particulate slide , the problem is how do i detect which perticular slide has slided in and how do i add the class scalebg only to that perticular slide ?? Thats the challenge that i am facing ..
the bootrap documentation does say that the bootstrap carasoul exposes 2 events :
slide.bs.carousel :: This event fires immediately when the slide
instance method is invoked.
slid.bs.carousel :: This event is fired when the carousel has
completed its slide transition.
but i am not sure how i can use these events to accomplish what i want . can somebody please guide me .
P.S. ::
as of now the effect works because i have added the following code to the animation :
animation-iteration-count: infinite;
but thats not how i would like the animation to be .
Thank you.
Alex-z.
You can use e.relatedTarget for the element to be active.
$('#myCarousel').on('slid.bs.carousel', function (e) {
$('.item').find('img').removeClass('scalebg');
$(e.relatedTarget).find('img').addClass('scalebg');
})
Fiddle Demo
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.
I'm working at a portfolio to show when I apply for my next study.
Since we're living in 2012, it has tons of fancy animations and CSS3 junk, just to give them the 'We need this guy' feeling. I'm having a little problem at the moment.
This is a small part of a specific element:
/* This is the CSS of the elements with the id called 'fadein' */
#fadein {
-moz-animation-duration: 2s;
-moz-animation-name: item;
-moz-animation-delay: 4.5s;
-webkit-animation-duration: 5s;
-webkit-animation-name: item;
-webkit-animation-delay: 4.5s;
opacity:0;
-webkit-opacity:0;
}
#-webkit-keyframes item {
from {
-webkit-opacity: 0;
}
to {
-webkit-opacity: 1;
}
}
Please note that I left out the Firefox keyframes, since they are quite the same.
Right, ugly-formatted CSS that makes elements with the id 'fadein'... fade in.
The problem is, the elements disappear again after the animation is finished.
This turns ugly-formatted Css into unusable Css.
Does anybody have any idea how to keep the changed style after the animation?
I guess this question has been asked before and I'm pretty sorry for that if so.
Try with:
#fadein {
-webkit-animation-fill-mode: forwards; /* Chrome 16+, Safari 4+ */
-moz-animation-fill-mode: forwards; /* FF 5+ */
-o-animation-fill-mode: forwards; /* Not implemented yet */
-ms-animation-fill-mode: forwards; /* IE 10+ */
animation-fill-mode: forwards; /* When the spec is finished */
}
Duopixels answer is the right way, but not totally cross-browser, however, this jquery plugin enables animation callbacks and you can style the elements how you like in the callback function: https://github.com/krazyjakee/jQuery-Keyframes
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).