Css cheatsheet > Animation from to

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.

#css#animation


                


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

        

Click here to try it out!

copy