CSS Animations - change a property without a transition?

Question

I have a case where I need an element to appear for a second and then disappear, and I must not use javascript for it, so I'm trying to make it work with CSS.

Here's an example:

@-webkit-keyframes slide-one-pager {     0% { left: 0; }     50% { left: 100px; }     100% { left: 0; } } 

So in this example the property will gradually transition from 0 to 100 and back to 0. However, I need to get rid of that transition, so the property stays at 0 and gets to 100 as soon as it hits 50%. It doesn't work if I say left: 0; at 49%, because there is still a transition.

Another example, slightly more different than my original question, but if I find a solution for it it will do as well:

@-webkit-keyframes slide-one-pager {     0% { display: none; }     50% { display: block; }         75% { display: block; }     100% { display: none; } } 

Here I want to show an element for a period of time. No, using opacity is not an option, because the element is still there and is still clickable, and I need access to elements below. Unfortunately the "display" property doesn't seem to accept animating. If anyone can think of a solution how to show and hide an element with an animation (without transition!) I will be extremely grateful.

Any ideas?

Answer 1

You can use step-start or step-end (graphs) in your animation configuration so the curve will act like a "steps" (not curvy) so there will be no visual transition between frames, thus the animation will just "jump" between frames.

Example CSS:

animation:1s move infinite step-end; 

The above example will call the move keyframes (which I didn't write because it's irrelevant), and will loop on the frames endlessly with the "step" argument which was described earlier, without a transitioned curve.

@keyframes foo{   0%{ margin-left:0 }   50%{ margin-left:50% } }  div{   width: 50px;   height: 50px;   background: black;   border-radius: 50%;   animation:1s foo infinite; }  input:checked + div{    animation-timing-function: step-end;  }

<label>   <input type='checkbox' checked /> Disable Animation transition    <div></div> </label>

👉 Cool demo using this technique

Answer 2

I searched the same thing as you actually. You can set a greatful parameters in animation, called animation-timing-function allowing you to set perfectly and mathematicaly the animation : With bezier curve values or, if, like me, you're not that good mathematician, a parameter call "step()". For an example, in none shorthand writing :

.hiding {       animation-name:slide-one-pager;       animation-duration:2s;       animation-timing-function:steps(1); } 

By default, the value of this parameter is set to 0, meaning no steps. You can read more about this interesting feature here : https://developer.mozilla.org/en-US/docs/Web/CSS/timing-function

And here a shorthand notation for your animation:

.hiding {       animation:slide-one-pager 2s steps(1); } 

For me, it works fine at least on firefox 23.0.1.

Even if I think you solved the problem since one year, maybe could help some people like me here :)