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?

here is your answer: http://stackoverflow.com/a/6538329/1428241 — Barlas Apaydin, Jul 23 '14 at 23:14

score 39 · Answer 1 · edited Jun 20 '20 at 09:12

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

score 9 · Answer 2 · answered Sep 28 '13 at 12:56

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 :)

score 4 · Answer 3 · answered Mar 02 '12 at 17:59

I made it using the -webkit-animation-fill-mode: forwards; property, that stops the animation at 100% without returning the element to the original state. I made up a fiddle with a working example, you can check it out here.

Although in the fiddle you can find a better example, I basically did this (Assuming absolute positioned elements):

.hiding {
    -webkit-animation: slide-one-pager 2s;
    -webkit-animation-fill-mode: forwards;
}

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

It just jumps from 0 to -100 in the middle of the transition (49% -> 50% as you 'suggested' :P), and stays there at 100%. As said, with -webkit-animation-fill-mode: forwards; the element will stay as in 100% without going back to it's original state.

I don't know if it'll work in your scenario, but I believe there'd be an easy solution if it doesn't.

When I googled animation-fill-mode I found just the right solution for my problem. It's the animation-timing-function, more specifically the "steps" value. It jumps from one state to the other, without any transition whatsoever. If you want, make a new answer so I can accept it :) Cheers! — Nikolay Dyankov, Mar 02 '12 at 20:41
Thanks Nikolay! but you gave the right answer, not me! I appreciate the offer anyway :D I'm glad you solved your problem! — scumah, Mar 05 '12 at 09:39

score 1 · Answer 4 · answered Aug 27 '17 at 23:09

1

You can use this:

animation: typing 1s cubic-bezier(1,-1, 0, 2) infinite;

answered Aug 27 '17 at 23:09

Mohammadreza Zandi

199
2
4

CSS Animations - change a property without a transition?

4 Answers4

Example CSS:

Linked