CSS border color switch animation: “from” color not correct

by

According to the documenation steps(2,start) will give this timing output:

enter image description here

So you will spend 0 time on the first state, half the time on the 50% (light blue) and half the time on the 100% (blue). You will have a similar logic using end instead of start where you will spend 0 time on the last state. Actually what you are looking for is the frames function but it’s actually under draft and using frames(2) you will do exactly what you want:

enter image description here

An easy fix is to change the values of the keyframes to force each color to stay half the animation without using steps

.switch {
  width: 100px;
  height: 100px;
  border: 5px solid white;
  animation: switch-animation 2s infinite linear;
}

@keyframes switch-animation {
  0%,50% {
    border-color: white;
  }
  50.1%,100% {
    border-color: blue;
  }
}
<div class="switch"></div>

More Related Contents:

  1. How to keep origin in center of image in scale animation?
  2. How to make blinking/flashing text with CSS 3
  3. Placing border inside of div and not on its edge
  4. How can I create a marquee effect?
  5. border curved css – circle with curved end
  6. Rotate objects around circle using CSS?
  7. Imitating a blink tag with CSS3 animations
  8. How to increase space between dotted border dots
  9. HTML5 / CSS3 Circle with Partial Border
  10. Borders disappear in Chrome when I zoom in
  11. Animating Linear Gradient using CSS
  12. left-right movement.. css only very generic
  13. Giving a border to an HTML table row,
  14. Slanted diagonal line in html or css?
  15. Border with a transparent centred arrow
  16. How to make a border overlay child div?
  17. How can I apply a border only inside a table?
  18. How to Animate Gradients using CSS
  19. How to run the CSS3 animation to the end if the selector is not matching anymore?
  20. Ring-shaped process spinner with fading gradient effect around the ring
  21. CSS animate custom properties/variables
  22. infinite loop slider using keyframes css3
  23. Border around specific rows in a table?
  24. CSS Inset Borders
  25. How to keep styles after animation?
  26. Removing the Bevel Effect on the Corner of Borders
  27. Create wavy borders in CSS for top and bottom borders
  28. How to collect and manipulate data in HTML using
  29. 100% Min Height CSS layout
  30. Equal space between flex items

Leave a Comment