I have the CSS below that does a rotate and fade-in and it works just fine. The rotate/fade is timed just like I want it but I'd like a longer duration between the rotate/fade -- like 30s or so. If I increase duration, that slows the rotate/fade too much. How do I set the keyframes to retain the rotate/spin timing but allow 30s between the rotate/fade? I searched but couldn't find an applicable answer. Thank you very much.
#-webkit-keyframes SomeName {
0% { opacity:0; -webkit-transform: rotateY(180deg); }
50% { opacity:0; -webkit-transform: rotateY(180deg); }
75% { opacity:1; -webkit-transform: rotateY(0deg); }
100% { opacity:1; -webkit-transform: rotateY(0deg); }
}
#flipBox img.flippy {
-webkit-animation-name: SomeName;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 10s;
-webkit-animation-direction: alternate;
}
p.s. FYI: This is webkit only, hence the only prefix.
Live Demo
Use this code
animation:SomeName 5s;
-moz-animation:SomeName 5s; /* Firefox */
-webkit-animation:SomeName 5s; /* Safari and Chrome */
-o-animation:SomeName 5s; /* Opera */
Hope this will help you.
Related
I'm trying a technique described on CSS Tricks:
http://css-tricks.com/slide-in-as-you-scroll-down-boxes/
I'm a bit stumped on this one... When I view the technique on the CSS Tricks website in Safari, it works fine... However, when I try the code out, I can't get it to work on Safari... Works fine in Firefox and Chrome.
Anyone have any ideas?
I greatly appreciate some extra eyes on this, because I've been staring at this way too long.
Thanks in advance.
JSFiddle:
http://jsfiddle.net/pjbsL1mk/1/
The code is pretty much verbatim, except that I added "-webkit-" along side the original code to the classes... Also, I'm using jQuery 1.8.3.
.come-in {
-webkit-transform: translateY(150px);
-webkit-animation: come-in 1s ease forwards;
-webkit-animation-delay: 0.2s;
transform: translateY(150px);
animation: come-in 1s ease forwards;
animation-delay: 0.2s;
}
.come-in:nth-child(odd) {
animation-duration: 0.6s; /* So they look staggered */
}
.already-visible {
-webkit-transform: translateY(0);
-webkit-animation: none;
transform: translateY(0);
animation: none;
}
#-webkit-keyframes come-in {
to {
transform: translateY(0);
}
}
#keyframes come-in {
to {
transform: translateY(0);
}
}
You forgot to add -webkit- prefix on some properties:
#-webkit-keyframes come-in {
to {
-webkit-transform: translateY(0); // here
}
}
This should make the animation work. Also add -webkit- here:
.come-in:nth-child(odd) {
-webkit-animation-duration: 0.6s; // here
}
I have a problem with CSS animation. Animation works great in IE10 (and Chrome, Mozilla, Safari), but doesn't work in IE9 (and also IE edge).
This is my CSS:
.tossing07{
-webkit-animation-name: tossing07;
animation-name: tossing07;
-webkit-animation-duration: 0.3s;
animation-duration: 0.3s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
#-webkit-keyframes tossing07 {
0% {
-webkit-transform: rotate(-25deg);
}
50% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(-25deg);
}
}
#keyframes tossing07 {
0% {
transform: rotate(-25deg);
}
50% {
transform: rotate(0deg);
}
100% {
transform: rotate(-25deg);
}
}
It's normal, animation work since Ie10 look at can i use page, sorry
CSS animation is not supported for IE9 or earlier. Thats why your css animation is not working. Even vendor prefixing would not work.
I have been having trouble understanding how css3 rotations work. I have seen many examples and tried to implent my own, but to no avail. My goal is to have a link spin a single character I.e. text >> (+) on click. What I want to achieve is to have the animation start farily slow speed up rapidly then stop all in a couple seconds or less.
I don't know if that is particularly possible with Css3, if not I will use Jquery. However I have tried to wrap my head around the keyframes thing. I know I need a kit for each browser specifically to create the animation and add the attributes. After which I need to set the rules for keyframes and rotation degrees. But every time I try to write the code I get errors almost as if it's a syntax error. (somehere in here apparently.)
#-ms-keyframes spin {
from { -ms-transform: rotate(0deg); }
to { -ms-transform: rotate(360deg); }
}
#-moz-keyframes spin {
from { -moz-transform: rotate(0deg); }
to { -moz-transform: rotate(360deg); }
}
#-webkit-keyframes spin {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
from {
transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}
}
I have spent almost an hour looking at that specific code, not a single syntax error. If anyone that can help with my problem would I would be greatful.
Js Fiddle
This is basically what I am after but I want to click and spin it.
Reduce the duration to speed it up.
animation-duration: 2000ms;
Animation timing function will give you the faster spin near the end of the animation.
animation-timing-function: ease-in;
For this to be a bit more flexible I'd separate your animation CSS3 from the div and into its own class so you can add it on the initial click.
div.spin {
-webkit-animation-name: spin;
-webkit-animation-duration: 2000ms;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in;
-moz-animation-name: spin;
-moz-animation-duration: 2000ms;
-moz-animation-iteration-count: 1;
-moz-animation-timing-function: ease-in;
-ms-animation-name: spin;
-ms-animation-duration: 2000ms;
-ms-animation-iteration-count: 1;
-ms-animation-timing-function: ease-in;
animation-name: spin;
animation-duration: 2000ms;
animation-iteration-count: 1;
animation-timing-function: ease-in;
}
You'll need to use javascript to trigger the animation on click and to restart the animation.
var $div = $("div");
$div.click(function (e) {
// restart animation
$(this).addClass("spin");
var el = $(this),
newone = el.clone(true);
el.before(newone);
$("." + el.attr("class") + ":last").remove();
});
See the full working example here
I can't understand how to run animation for some constant period of time.
Here is the source of animation:
#-webkit-keyframes pulse {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
50% {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
.pulse {
-webkit-animation-name: pulse;
}
So I modify css of the element where I want apply pulse.
-webkit-animation-duration: 10s;
-webkit-animation-delay: 0s;
-webkit-animation-iteration-count: 10;
As I understand docs, the animation should be run 10 times for 10s each. So, 100 seconds at all. But this is wrong. What is the right way to specify animation life as 100 seconds?
Ok, so you say that the timing function you are getting is incorrect, well I won't agree to that, when you are setting an animation duration to 10s that means, 5s for first cycle, and in the next 5s for your div to scale out.
I am using JavaScript count down here, and am also using animation-delay property set to 1 seconds, just to sync with JavaScript countdown which I took from here...
So if you see, the animation ends perfectly at 1 so it works perfectly, if you are expecting to do something else than please comment and I will modify my answer accordingly..
Demo (I've reduced the animation iteration to 2 = 20 seconds)
Note: Use Chrome to see the Demo as OP is using only -webkit and
haven't requested any code for Firefox or Internet Explorer.
#-webkit-keyframes pulse {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
50% {
-webkit-transform: scale(2);
transform: scale(2);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
.pulse {
-webkit-animation-name: pulse;
-webkit-animation-duration: 10s;
-webkit-animation-delay: 1s;
-webkit-animation-iteration-count: 2;
position: absolute;
left: 50%;
font-size: 50px;
top: 10%;
}
I would like to know how to avoid the keyframe animation to be automatically reseted after launching anoher one or visiting another tab of my browser.
#-webkit-keyframes play1 {
0% {
-webkit-transform: translate(0px,0);
}
50% {
-webkit-transform: translate(-60px,0) rotate(-1080deg) scale(1.5);
}
100% {
-webkit-transform: translate(-120px,0) rotate(-2060deg) scale(1);
}
}
.play1 {
-webkit-animation-name: play1;
-webkit-animation-duration: 2s;
-webkit-animation-timing-function: linear;
-webkit-animation-direction: alternate;
}
#-webkit-keyframes play2 {
0% {
-webkit-transform: translate(0px,0);
}
50% {
-webkit-transform: translate(-60px,0) rotate(-1080deg) scale(3);
}
100% {
-webkit-transform: translate(-120px,0) rotate(-2060deg) scale(1);
}
}
.play2 {
-webkit-animation-name: play2;
-webkit-animation-duration: 2s;
-webkit-animation-timing-function: linear;
-webkit-animation-direction: alternate;
}
On this example, if i launch the animation play1 then play2 by adding the respective classes on the elements, the position of the element accoding to the play1 animation is automatically reseted to its initial position (if i visite another tab and come back, all my elements are in their initial position), how to avoid this?
Even worse on mozilla, the animation is reseted when its over.
I don't have this behavior by using the animation-iteration-count: infinite; property, but i just want to play it one time.
The property which enables this is: animation-fill-mode: forwards