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{}
}
Related
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'm trying to animate in elements sequentially in full css3 animations. Seems the very straight forward answer is using animation delay. However I wanted this in loop, any ideas how to make the animation loop infinitely?
I found this fiddle on a similar question. Basically that's the same logic but I just wanted it looped.
This was the similar [question] (https://stackoverflow.com/a/8294491/340888)
Was using this:
#-webkit-keyframes FadeIn {
0% { opacity:0; -webkit-transform:scale(.1);}
85% {opacity:1; -webkit-transform:scale(1.05);}
100% {-webkit-transform:scale(1); }
}
.myClass img { float: left; margin: 20px;
-webkit-animation: FadeIn 1s linear; -webkit-animation-fill-mode:both; }
.myClass img:nth-child(1){ -webkit-animation-delay: .5s }
.myClass img:nth-child(2){ -webkit-animation-delay: 1s }
.myClass img:nth-child(3){ -webkit-animation-delay: 1.5s }
.myClass img:nth-child(4){ -webkit-animation-delay: 2s }
Edit
Just to be clear, I want the animation in a sequential manner, say after the first one animates, it animates the 2nd item, then 3rd.. and so on. I'm thinking about animating around 10 to 12 elements. So they'll animate one after another.
So #Sonu Joshi's answer is incorrect.
You need to make the animation long enough so that all the elements have a chance to animate before the cycle starts again.
In this example, your 4th element only starts animating after 2 seconds. The transition itself is going to take another second, and then you might want a bit of a pause, say another second, before you reanimate the first element. So that's 4 seconds in total.
So you might want something like this: -webkit-animation: Fadein 4s infinite linear.
But you'll also need to adjust the keyframe percentages, dividing each of them by 4, since you still want the transition itself to take only 1 second.
#-webkit-keyframes FadeIn {
0% { opacity:0; -webkit-transform:scale(.1);}
21.25% {opacity:1; -webkit-transform:scale(1.05);}
25% {-webkit-transform:scale(1); }
}
Fiddle example
I'm trying to animate an element rotating like someone starting a top. At first, the element would rotate counter-clockwise before transitioning to rotating clockwise infinitely.
The general CSS I have is here:
div {
animation:
PreRotate 800ms ease-out 0ms 1,
Rotate 500ms linear infinite 800ms;
}
#-keyframes PreRotate {
from { transform:rotate(0deg);}
to { transform:rotate(-360deg);}
}
#-keyframes Rotate {
from { transform:rotate(0deg);}
to { transform:rotate(360deg);}
}
What I expect would happen is that the element would rotate counter clockwise for 800ms once (PreRotate animation) and then rotate clockwise infinitely after 800ms (Rotate animation). From the example http://jsfiddle.net/Fu5V2/6/ though, it seems like every clockwise rotation, the rotation 'hiccups'.
Could someone explain why this is happening and how the desired effect could be achieved? The independent animations seem right but chaining them together messes something up.
I can't tell you exactly why this is happening, but apparently it's caused by the two animations overlapping at some point. If you delay the start of the second animation by something like 50ms, it plays fine:
div {
display:inline-block;
-webkit-animation:
PreRotate 800ms ease-out 0ms 1,
Rotate 500ms linear 850ms infinite;
animation:
PreRotate 800ms ease-out 0ms 1,
Rotate 500ms linear 850ms infinite;
}
#-webkit-keyframes Rotate {
from {-webkit-transform:rotate(0deg);}
to {-webkit-transform:rotate(360deg);}
}
#-webkit-keyframes PreRotate {
from {-webkit-transform:rotate(0deg);}
to {-webkit-transform:rotate(-360deg);}
}
#keyframes Rotate {
from {-webkit-transform:rotate(0deg);}
to {-webkit-transform:rotate(360deg);}
}
#keyframes PreRotate {
from {-webkit-transform:rotate(0deg);}
to {-webkit-transform:rotate(-360deg);}
}
JSFiddle
I am not quite sure how to use CSS3 transitions to do what I want. I'm new to using them so I could really use some help :)
Here is the JSFiddle with what I'm working on.
So, basically the div.portlet is supposed to be a window showing what is in the explode. WHen you click on the portlet, I want it to grow to fill up the div.container. And when you close I want it to shrink back to its normal size.
fade isnt transact property either you need to definde like fadeIn defined below you can do this by
as in your comment
try
div.portlet
{
transition: ease-out 2s;
-moz-transition: ease-out 2s; /* Firefox 4 */
-webkit-transition: ease-out 2s; /* Safari and Chrome */
-o-transition: ease-out 2s; /* Opera */
}
and add z-index:3; to div.portlet and z-index:4 to class open
and jquery
$(".container").on("click", ".portlet", function(){
$(".portlet").css("z-index","3");
$(this).addClass("open");
$(this).css("z-index","333");
});
});
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