CSS

  
// wrap要素は高さを指定しておかないと、モバイル時に謎の高さオーバーになってしまう。
.marquee { width:100%; padding:0.5em; overflow:hidden; margin-bottom:10px; position:relative; height: 42px; }
.marquee p { height: 2rem!important; margin:0; display:inline-block; white-space:nowrap; }

.marquee p:after {
content:"";
white-space:nowrap;
padding-right:50px;
}

.marquee p.on {
margin:0;
padding-left: 100%;
display:inline-block;
white-space:nowrap;
	-webkit-animation-name:marquee;
	-webkit-animation-timing-function:linear;
	-webkit-animation-duration:10s;
	-webkit-animation-iteration-count:infinite;
	-moz-animation-name:marquee;
	-moz-animation-timing-function:linear;
	-moz-animation-duration:10s;
	-moz-animation-iteration-count:infinite;
	-ms-animation-name:marquee;
	-ms-animation-timing-function:linear;
	-ms-animation-duration:10s;
	-ms-animation-iteration-count:infinite;
	-o-animation-name:marquee;
	-o-animation-timing-function:linear;
	-o-animation-duration:10s;
	-o-animation-iteration-count:infinite;
	animation-name:marquee;
	animation-timing-function:linear;
	animation-duration:10s;
	animation-iteration-count:infinite;
}
@-webkit-keyframes marquee {
  from   { -webkit-transform: translate(0%);}
  99%,to { -webkit-transform: translate(-100%);}
}
@-moz-keyframes marquee {
  from   { -moz-transform: translate(0%);}
  99%,to { -moz-transform: translate(-100%);}
}
@-ms-keyframes marquee {
  from   { -ms-transform: translate(0%);}
  99%,to { -ms-transform: translate(-100%);}
}
@-o-keyframes marquee {
  from   { -o-transform: translate(0%);}
  99%,to { -o-transform: translate(-100%);}
}
@keyframes marquee {
  from   { transform: translate(0%);}
  99%,to { transform: translate(-100%);}
}

  
  

javascript

  

// nAn.resize.marquee = function(){}

_$YN.changesizerun.marquee = function(){
  $('.marquee').each(function() {
    let  $this = $(this);
    let $p = $this.find('p');
    var $mW = $this.outerWidth(true);
    var $pW = $p.outerWidth(true);
    $p.removeClass('on');
    if ($pW > $mW) $p.addClass('on');
  });
};