CSS3 Animations: do nothing from 8% to 98%

[Alkadix]

Hello,

I am trying to do a css3 animation on my website, basically it’s for a text banner, with text appearing from right to left, and disappearing from right to left for 15 secs.

So my css animation code look like this :

    animation: animationFrames ease 15s;
    animation-iteration-count: infinite;
    animation-fill-mode:forwards;
    animation-delay: 8s;

My keyframes looks like that :

  0%, 4% {
    transform:  translate(1200px,0px)  ;
  }
  4%, 6% {
    transform:  translate(-370px,0px)  ;
  }
  6%, 8% {
    transform:  translate(-330px,0px)  ;
  }
  8%, 98%{
    transform:  translate(-330px,0px)  ;
  }
  98%, 100%{
    transform:  translate(-660px,0px)  ;
  }

So I want it to freeze and do nothing while on the line : 8%, 98%{transform: translate(-330px,0px) ;}
and then quickly throw the element out to the left with that line : 98%, 100%{transform: translate(-660px,0px) ;}

The problem is it seems to do that :

  8%, 100%{
    transform:  translate(-660px,0px)  ;
  }

Basically it just scrolls my element slowly to the left with no pauses, instead of pausing for pretty much all the time, and then throw it away to the left.

Am I doing something wrong ? How can I do that ?

Thanks

[Beverleyh]

Can you demo it for us in CodePen? It gives us something contextual to play with for live edits.

[Alkadix]

A simple example here : https://codepen.io/anon/pen/VxzbGM

[Pogany]

Hi
You may use 2 animations instead of one.
I’ve made a fork of your pen: https://codepen.io/giaco/pen/gzxxMP?editors=0100

What I’ve changed:
I’ve added the Prefixfree library so I can write the code without prefixes.
I’ve broke your animation in 2 animations.
You may want to change the timing.

I hope this helps.

[Alkadix]

Thanks for your answer !

The thing is I also wanted to repeat the animation infinitely, but with 2 animations on one element and “animation-iteration-count:infinite;”, animations don’t seem to queue and just repeat animation1 and animation2 infinitely without taking either one into account, is it the best option I have to use 2 animations and should I continue to mess with timings to finally have a consistent and flowing animation ?

[Beverleyh]

Your start and stop points are overlapping. Just knock the % increment over a tad on your keyframes so that the numbers don’t repeat and things should behave more like you’d expect…

@keyframes animationFrames {
  0%,  4%   { transform:translate(1200px,0) }
  5%,  6%   { transform:translate(-370px,0) }
  7%,  8%   { transform:translate(-320px,0) }
  9%,  98%  { transform:translate(-320px,0) }
  99%, 100% { transform:translate(-660px,0) }
}

[Alkadix]

Oooow that makes sense, that’s right I didn’t try like that.

Thanks you

[Mamun]

You can try changing your keyframes like this:

@keyframes animationFrames{
0%, 4% {
transform: translate(1200px,0px) ;
}
4%, 6% {
transform: translate(-370px,0px) ;
}
6%, 98% {
transform: translate(-320px,0px) ;
}
100%{
transform: translate(-660px,0px) ;
}
}

[Author]

Posts