自动文本弹回和第四个CSS像选框为长文本标签

Question

我要求在带有长文本的标签上显示自动移动文字功能（就像具有替代行为的字幕）。

正如您所见，由于ObjectListItem控件的默认行为，sap.m.ObjectAttribute中的 Created On：2017年11月28日标签刚刚被包装。我正在寻找可以使包装文本前后移动的 CSS ，就像具有替代行为的字幕一样，这样我就可以看到整个未打开的文本正面和背面弹跳。

请参考example，当你将鼠标悬停在div上时，标签开始向左滚动，当你从div中取走鼠标时，它将滚动回到它的初始点。

我正在寻找像这样的CSS但具有自动效果。因此，一旦我申请了任何可能带有长文本的标签，标签就会自动自动开始向前和向前滚动。

请帮助我。

基于marquee

的另一个例子

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

＆＃13;

＆＃13;

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); }
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;