GWT CSS3 Marquee Animation.

ApplicationResources.java

import com.google.gwt.core.client.GWT;
import com.google.gwt.resources.client.ClientBundle;
import com.google.gwt.resources.client.CssResource;

public interface ApplicationResources extends ClientBundle {

  public ApplicationResources INSTANCE = GWT.create(ApplicationResources.class);

  public interface AppStyles extends CssResource {
    String marquee();
  }

  @Source("styles.gss")
  public AppStyles styles();

}

HtmlAnimationTest.java

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.HTML;
import com.google.gwt.user.client.ui.RootPanel;

public class HtmlAnimationTest implements EntryPoint {

  @Override
  public void onModuleLoad() {
    // only do once
    ApplicationResources.INSTANCE.styles().ensureInjected();
    
    HTML html = new HTML("<span>The fox jumped over the moon. The chicken crossed the road.</span>");
    // css3 to html
    html.setStyleName(ApplicationResources.INSTANCE.styles().marquee());

    RootPanel.get().add(html, 50, 50);
  }

}

styles.gss

.marquee {
    width: 150px;
    margin: 0 auto;
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
    border: 1px solid gray;
}

.marquee span {
    display: inline-block;
    padding-left: 100%;
    animation: marquee 15s linear infinite;
}

.marquee span:hover {
    animation-play-state: paused;
}

@keyframes marquee {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(-100%, 0); }
}

Example: