﻿<?xml version="1.0" encoding="utf-8"?>
<snippet name="CSS3 Keyframe Animation Syntax " description="Create an CSS3 animation using the following syntax" preview="code" type="block">
<insertText location="beforeSelection">
<![CDATA[/* 

Define this in your CSS 
Animation-Title = Replace it by the name you want to give your animation

*/

@-webkit-keyframes Animation-Title {
    0% {
        /* Add some property like - color: #1abc9c;*/
    }
    50% {
        /* Add some property like - color: #1abc9c;*/
    }
    100% {
        /* Add some property like - color: #1abc9c;*/
    }
}
@-moz-keyframes Animation-Title {
    0% {
        /* Add some property like - color: #1abc9c;*/
    }
    50% {
        /* Add some property like - color: #1abc9c;*/
    }
    100% {
        /* Add some property like - color: #1abc9c;*/
    }
}
@-o-keyframes Animation-Title {
    0% {
        /* Add some property like - color: #1abc9c;*/
    }
    50% {
        /* Add some property like - color: #1abc9c;*/
    }
    100% {
        /* Add some property like - color: #1abc9c;*/
    }
}
@keyframes Animation-Title {
    0% {
        /* Add some property like - color: #1abc9c;*/
    }
    50% {
        /* Add some property like - color: #1abc9c;*/
    }
    100% {
        /* Add some property like - color: #1abc9c;*/
    }
}
.animation {
    -webkit-animation: Animation-Title 3s infinite;
    -moz-animation: Animation-Title 3s infinite;
    -o-animation: Animation-Title 3s infinite;
    animation: Animation-Title 3s infinite;
}]]>
</insertText>
<insertText location="afterSelection"><![CDATA[]]>
</insertText>
</snippet>
