JSFiddle - React, Tailwind, and code Playground

by enyojs

CSS

.button {
    max-width:200px;
    overflow-x: -webkit-marquee;
    -webkit-marquee-direction: backwards;
    -webkit-marquee-increment: small;
    -webkit-marquee-repetition: 1;
    -webkit-marquee-speed: fast;
    -webkit-marquee-style: alternate;
}
.button-outer {
    width:100%;
    overflow:visible;
    border: 1px solid black;
}
.button-inner {
    width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
}
.marquee .button-outer {
    -webkit-animation: marquee-outer 5s infinite;
}

@-webkit-keyframes marquee-outer
{
    0%       {width:100%;}
    19.999%  {width:100%;}
    20%      {width:auto;}
    100%     {width:auto;}
}

JavaScript

enyo.kind({
    name: "MySample",
    components: [
        {kind: "onyx.Button", classes:"button marquee", components: [
            {classes:"button-outer", components: [
                {classes:"button-inner", content:"Foosdffasdfsadfasdfsdfsdafsd"}
            ]}
        ]},
        {name:"result"}
    ],
    tap: function() {
        this.$.result.setContent(this.$.control.hasNode().scrollWidth > this.$.control.hasNode().clientWidth);
    }
});

new MySample({fit:true}).write();