Create a newsticker with Webkit

I’m trying to create a newsticker using a Label or an HtmlPanel.
For animation i’m using the WebKit KeyFrames CSS

The idea is to dinamycally create the required HTML, set the property (Text for Label or HTML for HtmlPanel), set the CSS for the Control.
But i’m not able to obtain the animation.

Using the HtmlPanle the CSS is not loaded by the CSS property with “Cannot read properties of undefined (reading ‘split’)

The Html is the following

<div class=”ticker-wrap” style=”background-color:red;” >
<div class=”ticker” >
<div class=”ticker__item”>News number one!</div>
<div class=”ticker__item” style=”background-color:yellow; color:red;” ><b>News number 2</b> bla bla bla bla bla.</div>
<div class=”ticker__item” style=”background-color:red; color:white;” >New number 3.</div>
</div>
</div>

and the CSS3 is the following
CSS ———————————————–

$duration: 30s;
@-webkit-keyframes ticker {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
visibility: visible;
}
100% {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}
@keyframes ticker {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
visibility: visible;
}
100% {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}
.ticker-wrap {
position: relative;
bottom: 0;
width: 100%;
overflow: hidden;
height: 6rem;
/*background-color: rgba(#000, 0.9); */
padding-left: 100%;
box-sizing: content-box;
.ticker {
display: inline-block;
height: 6rem;
line-height: 6rem;
white-space: nowrap;
padding-right: 100%;
box-sizing: content-box;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-name: ticker;
animation-name: ticker;
-webkit-animation-duration: $duration;
animation-duration: $duration;
&__item {
display: inline-block;
padding: 0 2rem;
font-size: 4rem;
color: white;
}
}
}