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

<snippet name="Animate with Linear Timing Function" description="Transition with Linear Timing Function" preview="code" type="block">

<insertText location="beforeSelection">

<![CDATA[

/* 



Define this in your CSS 

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

.linearAnimObj = Assign this class to the elements to which you want to apply the animation

*/



.linearAnimObj {



    position: relative;



    /* Chrome, Safari*/



    -webkit-animation-name: linearAnimation;



    -webkit-animation-duration: 5s;



    -webkit-animation-timing-function: linear;



    -webkit-animation-delay: 2s;



    -webkit-animation-iteration-count: infinite;



    -webkit-animation-direction: alternate;



    -webkit-animation-play-state: running;



    /* Opera */



    -o-animation-name: linearAnimation;



    -o-animation-duration: 5s;



    -o-animation-timing-function: linear;



    -o-animation-delay: 2s;



    -o-animation-iteration-count: infinite;



    -o-animation-direction: alternate;



    -o-animation-play-state: running;



    /* Mozilla */



    -moz-animation-name: linearAnimation;



    -moz-animation-duration: 5s;



    -moz-animation-timing-function: linear;



    -moz-animation-delay: 2s;



    -moz-animation-iteration-count: infinite;



    -moz-animation-direction: alternate;



    -moz-animation-play-state: running;



    /* Standard syntax */



    animation-name: linearAnimation;



    animation-duration: 5s;



    animation-timing-function: linear;



    animation-delay: 2s;



    animation-iteration-count: infinite;



    animation-direction: alternate;



    animation-play-state: running;



}



/* 



Define the keyframe and changes



*/



/* Chrome, Safari */



@-webkit-keyframes linearAnimation {



    0% {



        left: 0px;



        top: 0px;



    }



    100% {



        left: 200px;



        top: 0px;



    }



}



/* Firefox */



@-moz-keyframes linearAnimation {



    0% {



        left: 0px;



        top: 0px;



    }



    100% {



        left: 200px;



        top: 0px;



    }



}



/* Opera */



@-o-keyframes linearAnimation {



    0% {



        left: 0px;



        top: 0px;



    }



    100% {



        left: 200px;



        top: 0px;



    }



}



/* Standard syntax */



@keyframes linearAnimation {



    0% {



        left: 0px;



        top: 0px;



    }



    100% {



        left: 200px;



        top: 0px;



    }



}]]>

</insertText>

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

</insertText>

</snippet>

