1. Home
  2. Css
  3. Animation percentage keyframes

Animation example using percentage based keyframes. Each percentage value represents a point in the animation length

    @keyframes outline-color {
        0%   {outline-color: red;}
        25%  {outline-color: yellow;}
        50%  {outline-color: blue;}
        100% {outline-color: green;}
    .link-2:target {
        outline: 3px solid transparent;
        animation-name: outline-color;
        animation-duration: 4s;
<a class="link-2" href="#animate-outline" id="animate-outline" name="animate-outline">Click here to try it out!</a>

Click here to try it out!

Full Css cheatsheet