CSS Keyframes

[Thr33]

I have been trying to get some CSS working but i've come to a hurdle where it works locally but not within vbulletin.

The code uses translate to animate the title so when it's too long for the container it will bounce left to right.

vBulletin 4.2.5

template: forumhome_forumbit_level2_post

<div class="radio-ani" style="color: {vb:raw sctrack.state};">{vb:raw sctrack.track}</div>

template: additional.css

.radio-ani {
  overflow: hidden;
  width: 15rem;
  white-space: nowrap;
}

.radio-ani > * {
  display: inline-block;
  position: relative;
  animation: 5s linear 0s infinite alternate move;
  box-sizing: border-box;
  padding: .8rem 1rem;
}

@keyframes move {
  0%,
  25% {
    transform: translateX(0%);
    left: 0%;
  }
  75%,
  100% {
    transform: translateX(-100%);
    left: 100%;
  }
}