Marquee with Css3 Animation

Question

i have some problems with my marquee , i need to make it pure css and css3 . so i almost do it , but some errors show up . take alook

http://codepen.io/anon/pen/pJvqLL

my CSS :

.cssmarquee {
  height: 25px;
  width: 100%;
  overflow: hidden;
  position: relative;
  background-color:red;
}

.cssmarquee div {

  width: auto;
  height: 30px;
  position: absolute;
  animation: cssmarquee 5s linear infinite;
    background-color:blue;
    color: #FFF;
}
.cssmarquee div:hover {
animation-play-state: paused;
}

@keyframes cssmarquee {
  0% { left: 100%; }
  100% { left: -100%; }
}

• The problem is the .cssmarquee div not a fixed width . so i can`t pass his fixed width to the @keyframe 100% { left: ???? } , so you need to wait after the 100% width to finish and repeat it again . Can any one help me

Answer 1

Maybe instead of left your could use transform . Like this example

@keyframes cssmarquee {
  100% { transform: translateX(-100%); }
}

UPDATE : Look at this example for left to right. I updated this style:

.cssmarquee div {   
  width: 100%;
  transform:translateX(100%);
}

I gave it a width of 100% and set the default transform to 100%

UPDATE 2:

Look at this example . It returns to using left instead of transform and also uses width:auto