Smart marquee

dabblet.css

/**
 * Smart marquee
 */
html, body {
//background: #f06;
//background: linear-gradient(45deg, #f06, yellow);
min-height: 100%;
}

.marquee {
  position: relative;
  width: 450px;
  margin: 0 auto;
  white-space: nowrap;
  box-sizing: border-box;
  border: solid 1px rgba(255,255,255, 0.5);
  overflow: hidden;
}

.marquee .content {
  display: inline-block;
  min-width: 100%;
  //background: rgba(0,0,255, 0.3);
  animation: 7s 5s 1 marquee-content;
}

.box {
	display: block;
	max-width: 100%;
	//background: #fff;
	animation: 7s 5s 1 marquee-box;
}

@keyframes marquee-content {
  0% { transform: translateX(0); }
  35% { transform: translateX(-100%); }
  65% { transform: translateX(-100%); }
  100% { transform: translateX(0); }
}

@keyframes marquee-box {
  0% { transform: translateX(0); }
  35% { transform: translateX(100%); }
  65% { transform: translateX(100%); }
  100% { transform: translateX(0); }
}

@keyframes hide-controls {
  0% { transform: translateY(0); }
  5% { transform: translateY(100%); }
  95% { transform: translateY(100%); }
  100% { transform: translateY(0); }
}

.marquee .box,
.marquee .content {
  transition: transform 1s;
}

.left,
.right,
.center {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 30%;
  z-index: 10;
  animation: 8.3s 4s hide-controls;
}

.left {
  left: 0;
  background: rgba(0,255,0, 0.3);
}

.right {
  right: 0;
  background: rgba(0,255,255, 0.3);
}

.center {
	width: auto;
	left: 30%;
	right: 30%;
	background: rgba(255,255,255, 0.3);
}
.left:hover ~ .box {
	//animation: none;
}
.left:hover ~ .box .content {
	//animation: none;
}
.right:hover ~ .box {
	transform: translateX(100%);
	//animation: none;
}
.right:hover ~ .box .content {
	transform: translateX(-100%);
	//animation: none;
}
.center:hover ~ .box {
	transform: translateX(50%);
	//animation: none;
}
.center:hover ~ .box .content {
	transform: translateX(-50%);
	//animation: none;
}

dabblet.html

<p class="marquee">
   
	   <i class="left"></i>
	   <i class="center"></i>
	   <i class="right"></i>
	   <span class="box">
	      <span class="content">
	          Для взрослых и детей! Научим играть на гитаре с нуля за 2 месяца, или вернем деньги!
	      </span>
	   </span>
</p>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}