Hello,

I 'm trying to set an effect in text to put it in textFIeld widget or TextLabel widget  but it's not working.Is it possible?

Here's my code.

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

Thanks

Hi Michael,

EGL uses CSS and yes you can use the CSS provided in the example.

Set a CSS class on the TextLabel and define the class in the CSS file.

package ruihandlers;// RUI Handlerimport com.ibm.egl.rui.widgets.GridLayout;import com.ibm.egl.rui.widgets.TextLabel;import com.ibm.egl.rui.widgets.GridLayoutData;////handler TestCssAnimation type RUIhandler {initialUI = [ ui ],onConstructionFunction = start, cssFile="css/TestRichUI.css", title="TestCssAnimation"}            ui GridLayout{ columns = 3, rows = 4, cellPadding = 4, children = [ tl ] };        tl TextLabel{ layoutData = new GridLayoutData{ row = 1, column = 1 }, text="Breaking news", class="animate" };                function start()        end     end

CSS file TestRichUI.css:

.animate {  position:relative;  background:white;  overflow:hidden;   text-align:center;  font-size: 18pt}.animate:before {  content:'';  top:0;  bottom:0;  width:100%;  box-shadow:0 0  8em  5em white, inset 0 0 3em 5em white ;  position:absolute;  left:100%;  animation: slide 4s infinite alternate linear;}@keyframes slide {  0% {    left:0;  }}

Ortwin

    BIg_box Box{           columns = 1, layoutData = new GridLayoutData{row = 1, column = 1},children=[typetext ]    };        typetext GridLayout{rows = 1, columns = 1,cellPadding = 4,children=[tl]};        tl Box{layoutData = new GridLayoutData{row = 1, column = 1},children=[tl_sub]};        tl_sub TextLabel{text="Breaking news",class="animate"};  

but I get this static result like the attached picture.

I tried to configure why using inspect element and I found that  line  "animation: slide 4s infinite alternate linear;"

has a warning "invalid property value".  Probably that's the reason but how can I fix it?

I fixed it. 

I 've changed the css for Chrome browser but now the problem is that last word is disappearing  very quickly and it isn't

very clear what it's written  . Here's the code:

.animate {  position:relative;  background:white;   overflow:hidden;   text-align:center;  font-size: 15pt}.animate:before {  content:'';  top:0;  bottom:0;  width:100%;  box-shadow:0 0  8em  5em white, inset 0 0 3em 5em white ;  position:absolute;  left:100%;   -webkit-animation: slide 4s infinite alternate linear;  animation: slide 4s infinite alternate linear;}@keyframes slide {  0% {    left:0;  } }@-webkit-keyframes slide {  0% {    left:0;  }}