Html/css keyframe transition not working in IE and Firefox properly

Question

I want to create a banner with 6 frames, without the css stylesheet and use only style tags in html.

I posted the 3rd and 4th since they are different and that can be seen.

My problem is that in firefox it stops on the 4th(1-2-3-4-4-4) frame and doesn't continue to the 5th and 6th and in IE i can see only the 1st,2nd and it jumps to the 5th frame.

3rd frame

This is the 4th frame. I used z-index in the animation because it has the clickable button and without z-index it just wouldn't be clickable

And this is the style from 5th frame (to see the difference from the 4th)

Plus I'd like to have smoother transitions. The first 3 go quite smooth, but are slower that I'd like and 4-6 are instant transitions. I'd like to have "a middle way" between these 2.

1-3 style transition are the same, 4-5 can be seen and the 6 has just a higher index than 5.

Thanks.

Persijn · Accepted Answer

How does keyframe animation work?

Animation short hand:
animation: NAME, DURATION, TIMING-FUNCTION, DELAY, ITERATIONCOUNT, DIRECTION, FILL-MODE, PLAY-STATE

Your animation:
animation: frame3-animation 30s infinite ease-in;
frame3-animation = NAME
30s = DURATION
infinite = ITERATION-COUNT
ease-in = TIMING-FUNCTION

Your questions

(eg. What you demand in your question)

Plus I'd like to have smoother transitions.

I do not know what you consider smoother transitions.
What do you want to transition?
What keyframe/frame are you talking about?
What do you consider to be a smooth transition?

The first 3 go quite smooth, but are slower that I'd like

This i can help you with:
If you want a keyframe animation to go faster set a shorter duration on the keyframe:

animation: NAME DURATION ITERATIONCOUNT; 
animation: frame3-animation 5s infinite ease-in;
animation: frame3-animation 2s infinite ease-in;
etc.

4-6 are instant transitions. I'd like to have "a middle way" between these 2.

Then you have to set the DURATION of the animation larger then 0s to avoid getting an instant transition and smaller then 30s.

What I'm guessing your having problems with

You are using z-index in keyframe-animation and opacity,
So my guess is that you are animating some element to appear and disappear.

When using the z-index in a animation it will happen instantly.

.frame {
  display: inline-block;
  border: 10px dotted pink;
  padding: 50px;
}
.bubble {
  position: relative;
  display: inline-block;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  opacity: 1;
}
.red {
  left: 10%;
  background-color: red;
  animation: shuffle 2s infinite;
}
.blue {
  left: -10%;
  background-color: blue;
  animation: shuffle2 2s infinite;
}
@keyframes shuffle {
  0% {
    opacity: 1;
    z-index: 10;
  }
  50% {
    opacity: 0.5;
    z-index: 0;
  }
  100% {
    opacity: 1;
    z-index: 10;
  }
}
@keyframes shuffle2 {
  0% {
    z-index: 0;
  }
  50% {
    z-index: 10;
  }
  100% {
    z-index: 0;
  }
}

In the example above i adjusted the keyframe so that exactly when the red circle becomes transparent the z-index changes. When this is done you can see that the blue circle jumps behind the red one. And having the z-index higher will make it clickable eg. pointer-events will work on the element.

For future reference here are some points from How do i ask good questions:

Not all questions benefit from including code. But if your problem is with code you've written, you should include some. But don't just copy in your entire program!
If it is possible to create a live example of the problem that you can link to (for example, on http://sqlfiddle.com/ or http://jsbin.com/) then do so

Html/css keyframe transition not working in IE and Firefox properly

Answers (1)

How does keyframe animation work?

Your questions

(eg. What you demand in your question)

What I'm guessing your having problems with

Related Questions