If you have comma-separated values to declare multiple CSS3 animations, how can you restart the whole animation itself? First run slideUp, then run fadeOut (made possible with the animation-delay property), then restart all that.
.mySelector {
myAnimation:
-webkit-animation: slideUp 0.5s ease-in-out 0 1 normal forwards running,
fadeOut 1s ease-in-out 2s 1 normal forwards running;
}
You can do this by removing and adding the element again:
var elm = document.querySelector(".mySelector");
var newone = elm.cloneNode(true);
elm.parentNode.replaceChild(newone, elm);
https://css-tricks.com/restart-css-animation/
You need to add to animation property:
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
for full reference check the documentation.
Related
I am using CSS & HTML to flip the image on hover, but how can I flip image for 1 second after loading?
You can set a keyframe animation on a 1-second delay. The forwards makes sure the style from the animation is kept.
.flip {
animation: flip-animation .25s 1s forwards;
-webkit-animation: flip-animation .25s 1s forwards; /* for less modern browsers */
}
#keyframes flip-animation {
// code to flip the
from {}
to{}
}
I'm working with ngAnimate to show animations on screen transitions in my angular app. We are using ui-router.
What I want is to have the login screen slide upwards off the screen to reveal the next screen, after the user logs in successfully. How can I apply the .ng-leave class to only the login screen?
Here's the useful code I've got so far:
login-directive.html:
<div class="login-slide" id="login-slide">
<div class="viewport-1">
<header></header>
<background></background>
<login-form callLogin="login(username, password)"></login-form>
<version-footer></version-footer>
</div>
styles.css:
#keyframes slideOutUp {
0% {
transform: translate(0px, 400px);
}
100% {
transform: translate(0, -600px);
}
}
.login-slide.ng-leave {
-webkit-animation: slideOutUp 3s ease;
-moz-animation: slideOutUp 3s ease;
-o-animation: slideOutUp 3s ease;
animation: slideOutUp 3s ease;
}
#login-slide.ng-leave {
-webkit-animation: slideOutUp 3s ease;
-moz-animation: slideOutUp 3s ease;
-o-animation: slideOutUp 3s ease;
animation: slideOutUp 3s ease;
}
From everything I've seen, this should be enough to get the login-slide class to "slide" away when the login is complete because the login screen would be leaving the DOM at that time.
I'm also very open to using a combo of ng-class, ng-if, or any other directives if that would help.
Thanks!
A couple things:
1) You need to use some type of angular directive on the element you're trying to animate. In this case it looks like ng-view would be your best option since you're using ui-router. Here's a good example.
2) .ng-leave is the state of the element at the start of the animation. You need to have its finished state as well: .ng-leave-active. (Also in the example above)
Hope that helps.
I have a simple CSS3 animation here.
#FadeIn3 {
animation-delay: 20s;
-webkit-animation-delay: 20s;
animation: FadeIn 3s;
-webkit-animation: FadeIn 3s;
}
I guess I don't have to link the animation itself, because it works perfectly.
Also, the HTML is fine, everything works but the animation-delay.
The order is incorrect, you need to place animation-delay after animation which is shorthand property, and hence it resets the delay timer.
The order of animation shorthand is as follows...
The order is important within each animation definition: the first value that can be parsed as a <time> is assigned to the animation-duration, and the second one is assigned to animation-delay.
Credits: Mozilla Developer Network
So, you are defining that after the animation-delay property, and thus, animation resets the delay to 0
Demo (Wont work)
Demo 2 (Switched the order of properties defined)
Note: I've minimized the timer to 3s delay so that you can see the
effect faster.
Advice: Always declare prefixed properties before declaring standard ones, so instead of writing like
animation-delay: 20s;
-webkit-animation-delay: 20s;
Have an habit of writing the properties like
-webkit-animation-delay: 20s;
animation-delay: 20s;
I came across a puzzling issue, where the computed style of an attribute has a different value than the element's style.
A few words first to describe my situation
I am animating the background-color property of an element and when the animation ends,
I retrieve the computed bgcolor value and apply it to the element's style. This works fine
However, if I try now to alter the bgcolor nothing happens, although the value is indeed set on the element, as the developer tools report.
At this point if you toggle (through the browser's developer tools) between style and computed style, there is a discrepancy between what the 2 report, with the computed style taking precedence of course.
I have created a test script on fiddle that depicts the situation
http://jsfiddle.net/d2S3d/14/
Attaching also some sample css cause stackoverflow does not let me to submit the post without it
.animate{
animation-name: bg_kf;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 0s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
animation-direction: normal;
-webkit-animation-name: bg_kf;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 0s;
-webkit-animation-iteration-count: 1;
-webkit-animation-fill-mode: forwards;
-webkit-animation-direction: normal;
-moz-animation-name: bg_kf;
-moz-animation-duration: 5s;
-moz-animation-timing-function: linear;
-moz-animation-delay: 0s;
-moz-animation-iteration-count: 1;
-moz-animation-fill-mode: forwards;
-moz-animation-direction: normal;
-o-animation-name: bg_kf;
-o-animation-duration: 5s;
-o-animation-timing-function: linear;
-o-animation-delay: 0s;
-o-animation-iteration-count: 1;
-o-animation-fill-mode: forwards;
-o-animation-direction: normal;
}
#keyframes bg_kf {
from {background-color:#FFFFFF}
to {background-color:red}
}
#-moz-keyframes bg_kf {
from {background-color:#FFFFFF}
to {background-color:red}
}
#-webkit-keyframes bg_kf {
from {background-color:#FFFFFF}
to {background-color:rgba(255, 140, 74, 0.16)}
}
#-o-keyframes bg_kf {
from {background-color:#FFFFFF}
to {background-color:rgba(255, 140, 74, 0.16)}
}
Any help appreciated
regards
The problem here is that the animation properties you have defined in .animate keep the background color red, regardless of what the actual inline style rule specifies. This is why toggling the inline style doesn't seem to have any effect.
If you were to remove the .animate class right after you apply the inline style, everything will once again be back to normal:
$("#sample").bind('animationend webkitAnimationEnd MSAnimationEnd oAnimationEnd', function(){
var computedBg = $(this).css('background-color');
$(this).css('background-color', computedBg);
$(this).removeClass('animate');
});
Here is a demonstration (try clicking the button after the animation has completed): http://jsfiddle.net/vcfDj/
You've set animation-fill-mode "forwards". The effect of that is to hold the animated CSS properties at the values they were when the animation ended (regardless of other style settings). Setting it to "none" will fix your problem!
I'm trying to
PLAY animation on hover.
PAUSE animation on hover out (i.e don't go back to frame 0).
Is it not possible to use -webkit-animation-play-state: paused; on a parent div?
See an example here, when you hover out it goes back to frame 0.
I don't want to use JS.
example jsfiddle
set the animation on #tech with play state paused
#tech {
-webkit-animation-play-state:paused;
-webkit-animation: moveSlideshow 10s linear infinite;
}
then change play-state to running on hover
#tech:hover{
-webkit-animation-play-state:running;
}
I was looking for this as well, and #MikeM's answer got me where I needed to go, and with #HellGate's comment on that answer concerning Chrome:
you need the pause state after the animation else it does not work
I was interested in how to pause animation on a PNG sprite sheet when it was inactive, and continue/resume on hover, so the accepted answer helped in that regard.
Here is a demo showing how this can be done on a PNG Sprite Sheet (credits to the sprite, and original CSS go to Guil Hernandez and his awesome blog post here): CodePen.
The important CSS parts:
.monster {
width: 190px;
height: 240px;
margin: 2% auto;
background: url('http://treehouse-code-samples.s3.amazonaws.com/CSS-DD/codepen/blog/monster.png') left center;
-webkit-animation: monsterAnimation .8s steps(10) infinite;
animation: monsterAnimation .8s steps(10) infinite;
-webkit-animation-play-state: paused; /* Chrome, Safari, Opera */
animation-play-state: paused;
}
.monster:hover {
-webkit-animation-play-state: running;
animation-play-state: running;
}
#keyframes monsterAnimation {
100% { background-position: -1900px; }
}
Check the JSFiddle here: http://jsfiddle.net/fRzwS/373/.
The animation doesn't stop because the late definition of animation overwrites the value of property animation-play-state. According to the W3C specification, animation:
The 'animation' shorthand property is a comma-separated list of
animation definitions, each of which combines seven of
the animation properties into a single component value.
And the seven properties are:
<single-animation> = <single-animation-name> || <time>
|| <single-animation-timing-function>
|| <time> || <single-animation-iteration-count> || <single-animation-direction>
|| <single-animation-fill-mode> || <single-animation-play-state>
It is similar to the properties background and background-color.
So in the original code:
#tech {
-webkit-animation-play-state: paused;
-webkit-animation: moveSlideshow 10s linear infinite;
}
Property animation-play-state is set to be paused. However, the late property animation OVERWRITES this value by its default value running. So, you can either define the property animation-play-state later (http://jsfiddle.net/fRzwS/373/):
#tech {
-webkit-animation: moveSlideshow 10s linear infinite;
-webkit-animation-play-state:paused;
}
Or you can simply use (http://jsfiddle.net/fRzwS/374/):
-webkit-animation: moveSlideshow 10s linear infinite paused;
Here is another example which works on both Chrome and Firefox: http://jsfiddle.net/MaY5A/694/
I don't have enough reputation to comment other answers. Well. #MikeM 's way works but he did a little mistake. Look:
#tech {
-webkit-animation-play-state:paused;
-webkit-animation: moveSlideshow 10s linear infinite;
}
This doesn't work and this shouldn't work. Animation shorthand note overrides animation-play-state. You need reorder these strings to get it working