Question

我目前有一个HTML组件，其中包含一个简单的div，其中包含一些文本和卡片上的背景。如果div中的文本对于卡来说太长，我有一个纯CSS动画，可以在鼠标悬停时自动前后滚动文本，以便于阅读。但是，当鼠标停止悬停在div上时，文本将笨拙地捕捉回到其原始位置。我正在寻找一种方法，当鼠标不再悬停在文本上时，它可以很好地滚动回到其原始位置。

问题是，我不确定是否可以找到文本的当前位置，因此可以将其用作CSS动画的起点。我对使用CSS动画有些陌生。最好使用纯CSS解决方案，因为动画的其余部分已经只是CSS，但是如果不是，那么我不介意使用一些JavaScript。

这是我正在使用的简单HTML元素：

      <div className='branch-ribbon-container'><p className='branch-ribbon-text'>{`Branch: ${branch}`}</p></div>

这是我到目前为止拥有的CSS：

.branch-ribbon-container {
  background-color: rgb(72, 74, 212);
  height: 20px;
  transform: translateY(-16px);
  padding-bottom: -10px;
}

.branch-ribbon-text {
  color: rgb(235, 235, 235);
  font-family: Arial, Helvetica, sans-serif;
  text-indent: 1px;
  overflow-x: hidden;
  white-space: nowrap;
  width: fit-content;
  margin-bottom: 0px;
}

.branch-ribbon-text:hover {
  -moz-animation: scrollText 10s linear infinite;
  -webkit-animation: scrollText 10s linear infinite;
  animation: scrollText 10s linear infinite;
}

.branch-ribbon-text:not(:hover) {
  /*Have the text scroll back to the original position here*/
}

@keyframes scrollText {
  0% { 
    -moz-transform: translateX(0%);
    -webkit-transform: translateX(0%);
    transform: translateX(0%) 
  }

  50% {
    -moz-transform: translateX(-97%);
    -webkit-transform: translateX(-97%);
    transform: translateX(-97%); 
  }

  100% { 
    -moz-transform: translateX(0%);
    -webkit-transform: translateX(0%);
    transform: translateX(0%); 
  }
}

有没有一种方法可以使用CSS翻译找到div的当前位置？

0 个答案: