的jsfiddle

Question

我的跨度绝对位于div中。跨度比div宽，隐藏溢出，所以我想将跨度设置为right: 0;的动画，类似于选框效果。

如何让它从起始位置滑动到right: 0;的位置？

CSS

.auto-option__name-container {
    display: inline-block;
    margin-left: 20px;
    margin-top: 20px;
    @include font-paragraph;
    overflow-x: hidden;
    position: relative;
    height: 1.618em;
    width: 11em;
    background-color: red;
}

.animateLongName{
    -webkit-animation: marquee 2s ease-in-out infinite;
    position: absolute;
    background-color: rgba(255,255,255,0.4);
    white-space: nowrap;
  }

@-webkit-keyframes marquee {
    0%    { right: auto; }
    100%  { right: 0px; }
  }

HTML

<body> 
 <div class="auto-option__name-container">
     <span class="animateLongName">
         This is a really long name that won't fit in the div
     </span>
 </div>
</body>

的jsfiddle

http://jsfiddle.net/WM9nQ/16/

Answer 1

据我所知，您无法使用auto值制作动画。一个选项可以是使用transform属性。检查一下：

.auto-option__name-container {
  display: inline-block;
  margin-left: 20px;
  margin-top: 20px;
  @include font-paragraph;
  overflow-x: hidden;
  position: relative;
  height: 1.618em;
  width: 11em;
  background-color: red;
}
.animateLongName {
  -webkit-animation: marquee 4s ease-in-out infinite;
  position: absolute;
  background-color: rgba(255, 255, 255, 0.4);
  white-space: nowrap;
}
@-webkit-keyframes marquee {
  0% {
    transform: translateX(100%)
  }
  100% {
    transform: translateX(-100%)
  }
}

<div class="auto-option__name-container">
  <span class="animateLongName">
         This is a really long name that won't fit in the div
     </span>
</div>

Answer 2

使用jQuery animate：

var longName = $(".animateLongName");

var parent = longName.parent();
var difference = parent.width() - longName.width();
var margin = 10;

function animateSpan() {

   longName.animate({ left: difference-margin}, { duration: 5000, complete: function(){animateSpanBack()} });

}

function animateSpanBack() {

   longName.animate({ left: margin}, { duration: 5000, complete: function(){animateSpan()} });

}

if (difference < 0)  animateSpan();

小提琴： http://jsfiddle.net/WM9nQ/18/

Answer 3

我让动画工作了。
注意：我使用了:after选择器来隐藏溢出的文本;参考css风格。

DEMO：http://jsfiddle.net/nvishnu/WM9nQ/29/

具有位置右侧的跨度的CSS动画：从右到右：0赢得动画

CSS

HTML

的jsfiddle

3 个答案: