﻿<?xml version="1.0" encoding="utf-8"?>
<snippet name="Transition with Ease Timing Function" description="Transition with Ease Timing Function" preview="code" type="block">
<insertText location="beforeSelection">
<![CDATA[/* 

Define this in your CSS 
.easeTransition = Replace it by the name you want to give your transition

*/

.easeTransition {
    /*Add a property and value that you like to transition. Ex: width:200px;*/
    /* For Safari 3.1 to 6.0 */
    -webkit-transition-property:
    /*property*/
    ;
    -webkit-transition-duration: 1s;
    /*Control the transition duration*/
    -webkit-transition-timing-function: ease;
    /*Control the transitionfunction*/
    -webkit-transition-delay: 1s;
    /*Control the transition start delay*/
    /* Opera */
    -o-transition-property:
    /*property*/
    ;
    -o-transition-duration: 1s;
    -o-transition-timing-function: ease;
    -0-transition-delay: 1s;
    /* Firefox */
    -moz-transition-property:
    /*property*/
    ;
    -moz-transition-duration: 1s;
    -moz-transition-timing-function: ease;
    -moz-transition-delay: 1s;
    /* Standard syntax */
    transition-property:
    /*property*/
    ;
    transition-duration: 1s;
    transition-timing-function: ease;
    transition-delay: 1s;
}
/*Pick the action to trigger the animation - Ex: hover */

.easeTransition:hover {
    /*Set the final value for which you would like the property to transition to. Ex: width:500px;*/
}]]>
</insertText>
<insertText location="afterSelection"><![CDATA[]]>
</insertText>
</snippet>
