﻿<?xml version="1.0" encoding="utf-8"?>

<snippet name="Animate a Background changing color" description="Animate a Background changing color" preview="code" type="block">

<insertText location="beforeSelection">

<![CDATA[/* 



Define this in your CSS 

.bgColor = Replace it by the name you want to give your animation

.bgAnimObj = Assign this class to the object you want to apply the effect

*/



.bgAnimObj {

    background: #1abc9c;

    -webkit-animation: bgColor 5s;

    /* Chrome, Safari */

    -moz-animation: bgColor 5s;

    /* Firefox */

    -o-animation: bgColor 5s;

    /* Opera */

    animation: bgColor 5s;

}

/* 



Define the keyframe and changes



*/



/* Chrome, Safari */



@-webkit-keyframes bgColor {

    from {

        background: #1abc9c;

    }

    to {

        background: #ebebeb;

    }

}

/* Firefox */



@-moz-keyframes bgColor {

    from {

        background: #1abc9c;

    }

    to {

        background: #ebebeb;

    }

}

/* Opera */



@-o-keyframes bgColor {

    from {

        background: #1abc9c;

    }

    to {

        background: #ebebeb;

    }

}

/* Standard syntax */



@keyframes bgColor {

    from {

        background: #1abc9c;

    }

    to {

        background: #ebebeb;

    }

}]]>

</insertText>

<insertText location="afterSelection"><![CDATA[]]>

</insertText>

</snippet>

