Step examples

by tea4two

HTML

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function -->

<div class="parent"> 
  <div class="jump-start">jump-start</div>
  <div class="jump-end">jump-end</div>
  <div class="jump-both">jump-both</div>
  <div class="jump-none">jump-none</div>
  <div class="start">start</div>
  <div class="end">end</div>
  <div class="step-start">step-start</div>
  <div class="step-end">step-end</div>
</div>

CSS

.parent > div[class] { 
    animation-name: changeme;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    margin-bottom: 4px;
}
@keyframes changeme {
   0% {
      min-width: 12em; 
      width: 12em;
      background-color: black; 
      border: 1px solid red; 
      color: white;
   }
   25% {
     background-color: royalblue;
     color: #fff;
   }
   50% {
     background-color: yellow;
     color: #000;
   }
   100% {
      width: 90vw; 
      min-width: 24em; 
      background-color: magenta; 
      color: yellow;
      border: 1px solid orange; 
   }
}
.jump-start {
   animation-timing-function: steps(5, jump-start);
}
.jump-end {
   animation-timing-function: steps(5, jump-end);
}
.jump-none {
   animation-timing-function: steps(5, jump-none);
}
.jump-both {
   animation-timing-function: steps(5, jump-both);
}
.start { 
   animation-timing-function: steps(5, start); 
} 
.end { 
   animation-timing-function: steps(5, end); 
}
.step-start {
   animation-timing-function: step-start;
}
.step-end {
   animation-timing-function: step-end;
}