CSS timer to execute actions in steps

css animation steps
css keyframes
css multiple animations
css steps bar
css transition
css multiple animations after each other
css chain animations
css animation-delay

I'm not sure that what I'm asking for can be done at all. If it can't that'd be the answer.

EDIT: The example below is a concrete case. However my question is primarily how to do anything in steps as opposed to gradually.

How can I use CSS without JavaScript to scroll a div in steps? i.e. What I have is a div that is 3 times as wide as its container div, and I want the container to scroll the inner div every couple of seconds. First to show the first third, then the second, then the third, and then return to the first. And so on.

<div style="width:100%; height:100px;  overflow-y:hidden; overflow-x:auto; ">
    <div style="width:300%; height:100px;">abc</div>
</div>

I was looking into animation but that seems to be for gradual movement. Is there a way to make it 'jump' as I've outlined above?

I'm not too sure if this might help but you can do percentages in the keyframes to get something like this, which you could apply to a gallery for example. So the timer here is 9s divided by 3.

.box {
    width: 100px;
    height: 100px;
    background: red;
    position: relative;
    -webkit-animation: mymove 9s infinite;
    animation: mymove 9s infinite;
}

@-webkit-keyframes mymove {
    0% {left: 0px;}
    20%{left: 0px;}
    40% {left: 100px;}
    60%{left:100px;}
    80%{left:200px;}
    100% {left: 200px;}
}

@keyframes mymove {
    0% {left: 0px;}
    20%{left: 0px;}
    40% {left: 100px;}
    60%{left:100px;}
    80%{left:200px;}
    100% {left: 200px;}
}
<div class="box"></div>

Using Multi-Step Animations and Transitions, CSS animations are rad and the concept is fairly simple. Name the animation, define the movement in @keyframes and then call that animation  CSS Clock. A clock is ideal for demonstrating steps(). We need the clock’s hands to rotate, but not in smooth and continuous movements. Using steps() will allow us to create a motion mimicking that of hands on a real clock. There’s a bit of math involved when using steps(), but it’s not too painful.

Here i set multiple background to the div to mimic more content.

As the previous answer showed if your desired end result is for the div to scroll to the second half wait a bit then move to next etc.., adding more breakpoints to the animation should do it. keep in mind that the animation is merely a visual effect.

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
}

.parent {
    
    width: 90%;
    margin:0 auto;
    height: 100px;
    overflow: hidden;
    position: relative;
}

.kid>* {
    flex: 1;
    border: 1px solid;
}

.kid {
    display: flex;
    position: absolute;
    background: linear-gradient(to right, red, red), linear-gradient(to right, orange, orange), linear-gradient(to right, yellow, yellow);
    background-position: 0% 0, 50% 0, 100% 0;
    background-size: calc(100%/3) 100%, calc(100%/3) 100%, calc(100%/3) 100%;
    background-repeat: no-repeat;
    width: 300%;
    height: 100px;
    animation: mymove 5s infinite;
}

@keyframes mymove {
    0% {
        left: 0%;
    }

    30% {
        left: 0%;
    }

    40% {
        left: -100%;
    }

    60% {
        left: -100%;
    }

    70% {
        left: -200%;
    }
    
    80% {
        left: -200%;
    }

    100% {
        left: 0%;
    }
}
<div class="parent">
  <div class="kid">
    <p>I'm a P Tag</p>
    <div>I'm a div Tag</div>
    <h1>I'm a h1 Tag</h1>
  </div>
</div>

Keyframe Animation Syntax, Or, you could always tell the animation to run twice (or any even The steps() function controls exactly how many keyframes will render in the  Create the Timer. To create a Timer in your module, do the following: In the module tree, under the Process tab, right-click on the Timer folder and select Add Timer.; Choose the action to execute when the timer runs or select (New Server Action) to create a new action.

To have an animation give the appearance of being paused at certain times, keep the attributes you're animating exactly the same between keyframe percentages:

0% {
  color: green;
}
10% {
  color: red;
}
90% {
  color: red;
}
100% {
  color: blue;
}

The above keyframes will animate from green to red at 10% completion, but then stay red until 90%, giving the appearance that the animation is completing in steps. We can do something similar with your sliding div:

.container {
  width: 100%;
  height: 100px;
  overflow: hidden;
  position: relative;
}

.inner {
  display: flex;
  width: 300%;
  height: 100px;
  color: white;
  position: absolute;
  top: 0;
  left: 0;
  animation: slide 9s ease infinite;
}

@keyframes slide {
  0% {
    left: 0;
  }
  25.333% {
    left: 0;
  }
  33.333% {
    left: -100%;
  }
  58.666% {
    left: -100%;
  }
  66.666% {
    left: -200%;
  }
  92% {
    left: -200%;
  }
  100% {
    left: 0;
  }
}

.inner div {
  width: 33.333%;
}

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}

.green {
  background-color: green;
}
<div class="container">
  <div class="inner">
    <div class="red">
      A
    </div>
    <div class="blue">
      B
    </div>
    <div class="green">
      C
    </div>
  </div>
</div>

How to Use steps() in CSS Animations, Combining it with steps() in the animation makes the action appear as if A pure CSS clock; Some energy efficient pure CSS cars; Advancing  If you want to make a delay (execute action after X seconds), change 0 to your number of milliseconds. If you need delay only, change 1000 to Timeout.Infinite . Of course, you have to block thread: Console.ReadKey(); or. autoEvent.WaitOne() if you use AutoResetEvent explicitly

Web Information Systems Engineering – WISE 2015: 16th , If the event depends on other actions (e.g. download a file), it will be placed in the its execution, returns to the queue (in a position higher than the CSS event), and If the event is a periodic timer event (e.g. using setInterval function), it will be 4.3 Rendering Engine Processing Steps and Thread Model Figure 7a shows  See the Pen meWoyy by CSS-Tricks (@css-tricks) on CodePen. That’s the concept of multi-step animations in a nutshell: more than one change taking place in the animation from start to finish. Keyframes are interpolated and tweened, unless you don’t want them to be. Notice the colors above fade into one another in each of the steps.

How To Create a Form With Multiple Steps, Form Wizard - Multi Step Form: One "tab" for each step in the form: --> Step 2​) Add CSS: and run a function that displays the correct step indicator: Here is something i was playing around with a while ago. It uses a combination of SVG, css transitions and javascript. You should be able to rip it apart and use as a starting point /** * The setTimeout({},0) is a workaround for what appears to be a bug in StackSnippets. * It should not be required.

jQuery Effect delay() Method, The delay() method sets a timer to delay the execution of the next item in the queue. Syntax. $(selector).delay(speed,queueName). Parameter, Description. speed  Transitions in CSS are applied to an element and specify that when a property changes it should do so over gradually over over a period of time. Animations are different. When applied, they just run and do their thing. They offer more fine-grained control as you can control different stops of the animations.

Comments
  • Don't think you can do it using scroll, although you can move it with position absolute, and animate the left and right position.
  • @ZohirSalakCeNa That'd be fine. My question is primarily how to do anything in steps.
  • I think that better approach is to have 3 different div's with 100% width and as mentioned by @ZohirSalakCeNa position them absolutely and keep second and third ones out of screen, then use CSS animation to move them one by one in to the visible area, or use visibility attribute to make immediate rendering
  • @Banzay Fine. But how would I do that? I edited my question to make it clear that my main challenge here is how to do anything in steps (as opposed to gradually) using CSS but not JaveScript.
  • @ispiro, please would you show what you achieved and where you stuck?
  • While this answer might need some tweaking for other real case scenarios, this is the proper solution :)
  • Thanks, you are right. I'm really tired and headed into bed now, so I encourage anyone to build upon this :)
  • Thank you very much. So the key is to have 2 keyframes of the same value, which then stops the animation until the next keyframe. I accepted this answer because it was the most succinct.
  • You can drop 5, 40 and 95% step.
  • All answers were great. But I can only can only choose one. Thank you very much for your answer!
  • Might wanna add alternate to the animation.
  • @ZohirSalakCeNa OP says "show the first third, then the second, then the third, and then return to the first." Adding alternate would cause the second slide to show after both the first and the third, which is not the order that is requested.
  • All answers were great. But I can only can only choose one. Thank you very much for your answer!