1. Home
  2. Css
  3. Animation from to

A simple example of the CSS animation using 'from' and 'to' keyframes. First, the animation states are being set within the @keyframe attribute. You need to give it a reference name, 'glow' in the example. In the second block the animation is being triggered by calling it's name in the 'animation-name' tag. The animation-duration allows to set the time elapsed between 'from' and 'to' keyframes.

    @keyframes glow {
        from {outline-color: red;}
        to {outline-color: blue;}
    .link:target {
        outline: 3px solid transparent;
        animation-name: glow;
        animation-duration: 3s;
<a class="link" href="#animate" id="animate" name="animate">Click here to try it out!</a>

Click here to try it out!

Full Css cheatsheet