1. Home
  2. Css
  3. Animation percentage keyframes
#css#animation

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

<style>
    @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;
    }
</style>
<a class="link-2" href="#animate-outline" id="animate-outline" name="animate-outline">Click here to try it out!</a>
Output:

Click here to try it out!

copy
Full Css cheatsheet
Sitemap Git repository