i´am using keyframes to animate the Feature Slider of the website.
Carousel is working fine. Animations as well except with IE10.
Keyframne - This will determine the movement of down to up.
#-webkit-keyframes downup { from { opacity:0; top:500px;}to {top:0;opacity:.9;}}
#-moz-keyframes downup { from { opacity:0; top:500px;}to{top:0;opacity:.9;}}
#keyframes downup{ from { opacity:0; top:500px;}to {top:0;opacity:.9;}}
.updown {
position: relative;
opacity:0;
animation:downup 1s forwards;
-webkit-animation:mymove 1s forwards;
-moz-animation:mymove 1s forwards;}
IE10 shows the firsts 4 content in the loop but when he starts again at first slides de info .updown are not showed. You can check the slider under constrution here: http://ndsim.esec.pt/nova/index.html
Any help would be awesome thanks.
SOLUTION
its working now. i ´had some bootstrap conflict class´s… separated them and now its working.. was making like this
<div id=”myCarousel” class=”carousel slide fade-in one”>
and changed to
<div id=”myCarousel” class=”carousel slide”>
<div class=”fade-in one”>
dunno what happened for sure but was some sort of IE conflict.
Related
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% .
I have this hover effect http://codepen.io/anon/pen/dMbEdq but problem is that after animation finishes, the hover disappear. I need that hover to stay. Any suggestion?
<div class="hover15">
<figure><img src="http://nxworld.net/codepen/css-image-hover-effects/pic03.jpg" /></figure>
</div>
Use following Code :
transition-duration: 100s;
Use the following code where ever you want animation to hold or stay for sometime. And if you want it to loop or play # click events kindly refer to KeyFrames.
Use like this :
#keyframes hover {
0% {
// normal styles
}
100% {
// hover styles
}
}
.class {
animation-name: hover;
animation-duration: 1ms;
animation-fill-mode: backwards;
animation-play-state: paused;
}
.class:active,
.class:focus,
.class:hover {
//hover style you define
}
Reference click here to see the effect
I'm trying to apply an animation to a group within an SVG element. However, I'm finding that it isn't applied or is being overridden, as it's crossed out in Chrome Developer Tools. That said, I have no idea what could be causing it.
Animation code:
.ghost {
animation: float 3s ease infinite;
}
#keyframes float {
50% {
transform: translate(100px, 100px);
}
}
I'd post the HTML (the problem might be there) but it's incredibly verbose because of all the SVG paths. Link to a Codepen instead: ghost
Thank you so much! I have no idea what could be causing the issue at this point.
You're missing your vendor prefixes. Example:
.ghost {
-webkit-animation: float 3s ease infinite;
}
#-webkit-keyframes float {
50% {
-webkit-transform: translate(100px, 100px);
}
}
For an easy fix, try adding Prefix-free in CodePen's CSS editor. Here it is with Prefix-free enabled:
Codepen
I'm trying to animate (fade-in) 3 buttons. This is my html:
<aside>
<p><i class="icon-facebook"></i> Share</p>
<p><i class="icon-twitter"></i> Tweet</p>
<p><i class="icon-envelope"></i> Mail</p>
</aside>
and this is my css (the class .aside-check gets applied by javascript)
.aside-check {
animation: fadein 2s;
}
#keyframes fadein {
from {opacity:0;}
to {opacity:1;}
}
What I would like now, is to give every paragraph a little delay, I tried
p:nth-child(1) {animation-delay:2s}
p:nth-child(2) {animation-delay:3s}
p:nth-child(3) {animation-delay:4s}
but that doesn't work. Unfortunately I don't know what I did wrong...:/
Well, first you need to apply the animation to the paragraphs not the aside. Always remember, animations don't inherit. Second, don't forget your webkit prefixes! It's a pain but webkit browsers still require -webkit- before all animation properties and keyframe definitions. Without it your animation won't work on, Chrome, Safari, Android, etc. (If you can't remember if you need prefixes take a look at caniuse.com http://caniuse.com/#feat=css-animation)
Also note that if you want the paragraphs to be hidden then revealed you will want to define them with an opacity of 0 and then set the 'animation-fill-mode' to forwards so that the properties in the 'to' frame stick after the animation finishes.
I made a little JS fiddle with a working example, hope it helps!
http://jsfiddle.net/Ashwell/HqBZU/
Here are the important bits:
The animations applied to the paragraphs with the fill-mode set and starting opacity.
.aside-check > p{
animation: fadein 2s;
-webkit-animation: fadein 2s;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
opacity: 0;
}
You'll also need the webkit key frames
#-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
And don't forget to add -webkit-animation-delay: 2s; to each of the nth-child selectors with the respected delay time!
I hope this answer isn't coming too late!
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