Why can't I change position with a CSS animation -

i had idea create animation words of tagline start squashed on top of each other @ right , slide left position.

i wrapped each word in tagline in span tag , gave class of "slide". styled slide this:

.slide { right: 0;  animation: slide 5s;  -webkit-animation: slide 5s; } 

and made animation so:

@keyframes slide { 0% {position: absolute;} 100% {position: static;} } @-webkit-keyframes slide { 0% {position: absolute;} 100% {position: static;} } 

i don't understand why doesn't work. position: absolute should squash right (i have position relative on containing div, , squash right when style way, no animation). returning position: static should make them sit normally. reason, there's no animation taking place. ideas?

another version using transitions rather animations - triggered javascript.

this version bit brittle though it's relying on trial , error words line initially. buyer beware :)

css - sets container offscreen initial positions words in tagline (also not cross-browser)

.container {     position: absolute;     left: 100%;     right: 0;     white-space: nowrap;     -webkit-transition: left 1.5s ease; }  .container > span {     position: relative;     -webkit-transition: 1.5s ease; }  /* has enough specificity override nth-child selectors */ div.container.show > span {     left: 0; }  .container > span:nth-child(2) { left: -2em; } .container > span:nth-child(3) { left: -3em; } .container > span:nth-child(4) { left: -4em; }  .show {     left: 0; } 

html

<div id="tagline" class="container">     <span>this</span>     <span> is</span>     <span> a</span>     <span> tagline</span> </div> 

javascript (run unload & not cross-browser)

var tagline = document.getelementbyid('tagline'); tagline.classlist.add('show'); 

working fiddle

for list of animatable properties see: animatable properties