javascript - 自动文本来回弹跳 CSS，如长文本标签的选取框

Question

我需要在具有长文本的标签上显示自动移动文本功能(就像具有替代行为的选取框一样)。

如您所见，由于 ObjectListItem 控件的默认行为，sap.m.ObjectAttribute 中的 Created On: 28 Nov, 2017 标签刚刚被包装。我正在寻找可以使包装文本前后移动的 CSS，就像具有替代行为的选取框一样，这样我就可以看到整个展开的文本前后弹跳。

请引用example , 在这种情况下，当您将鼠标悬停在 div 上时，标签开始向左滚动，当您将鼠标从 div 上移开时，它会滚动回其初始点。

我正在寻找像这样但具有自动效果的 CSS。因此，一旦我应用到任何可能的长文本标签，标签就会自动开始前后滚动。

请帮我解决这个问题。

另一个基于 marquee 的例子

body {
  background-color: lightgrey;
}

.blue-btn {
  position: absolute;
  left: 35%;
  top: 40%;
}

.blue-btn a {
  color: white;
  text-decoration: none;
  margin-top: 0em;
  text-align: center;
  display: inline-block;
  /* important */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.blue-btn,
.first-link {
  -moz-transition: 3.3s;
  transition: 3.3s;
  -moz-transition-timing-function: linear;
  transition-timing-function: linear;
}

.blue-btn {
  height: 64px;
  font: normal normal 700 1em/4em Arial, sans-serif;
  overflow: hidden;
  width: 200px;
  background-color: #3b5998;
}

.blue-btn:hover {
  background-color: #003D99;
}

.blue-btn a:hover {
  text-decoration: none;
}

.first-link {
  margin-left: 0em;
}

.blue-btn:hover .first-link {
  margin-left: -300px;
}

<div class="blue-btn">
  <a class="first-link" href="">Thisisanextreamlylongtext,kindoflikeanamecouldbe</a>
</div>

Answer 1

使用无限动画自动滚动.link:

body {
  margin: 0;
  background-color: lightgrey;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.container {
  padding: 15px;
  background-color: #3b5998;
  width: 200px;
  font-family: Arial,sans-serif;
  font-weight: 700;
  line-height: 1.5;
  overflow: hidden;
  width: 200px;
}
.link {
  color: white;
  text-decoration:none;
  text-align: center;
  white-space: nowrap;
  display: inline-flex;
  line-height: 2;
}
.link_animated {
  animation: backAndForth 5s linear infinite;
}
@keyframes backAndForth {
  0% { transform: translateX(0); }
  10% { transform: translateX(0); }
  45% { transform: translateX(calc(-100% + 200px)); }
  55% { transform: translateX(calc(-100% + 200px)); }
  90% { transform: translateX(0); }
  100% { transform: translateX(0); }
}

<div class="container">
  <a class="link link_animated" href="">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      </a>
</div>