.example
li{width:12em;text-align:center;padding:1em;background:#d8d8d8;margin:5px}@-webkit-keyframes 'ani1'{0%{-webkit-transform:translate(0,0)}25%{-webkit-transform:translate(75%,100%)}50%{-webkit-transform:translate(50%,50%)}75%{-webkit-transform:translate(25%,100%)}100%{-webkit-transform:translate(100%, 0%)}}.ani1:hover
li{-webkit-animation-name:'ani1';-webkit-animation-duration:1s;-webkit-animation-direction:alternate;-webkit-animation-iteration-count:infinite}.ani2:hover
li{-webkit-animation:'ani1' 1s 0.5s infinite alternate}.ani1
.ease{-webkit-animation-timing-function:ease}.ani1
.linear{-webkit-animation-timing-function:linear}.ani1 .ease-in{-webkit-animation-timing-function:ease-in}.ani1 .ease-out{-webkit-animationn-timing-function:ease-out}.ani1 .ease-in-out{-webkit-animation-timing-function:ease-in-out}.ani2
li.ease{-webkit-animation-timing-function:ease}.ani2
li.linear{-webkit-animation-timing-function:linear}.ani2 li.ease-in{-webkit-animation-timing-function:ease-in}.ani2 li.ease-out{-webkit-animationn-timing-function:ease-out}.ani2 li.ease-in-out{-webkit-animation-timing-function:ease-in-out}.tra1
li{-webkit-transition-duration:1s}.tra1:hover
li{-webkit-transform:translate(100%, 0)}.tra1
.ease{-webkit-transition-timing-function:ease}.tra1
.linear{-webkit-transition-timing-function:linear}.tra1 .ease-in{-webkit-transition-timing-function:ease-in}.tra1 .ease-out{-webkit-transition-timing-function:ease-out}.tra1 .ease-in-out{-webkit-transition-timing-function:ease-in-out}