位置为右：自动向右：0的跨度的CSS动画不会动画
[英]CSS Animation of span with position right: auto to right: 0 won't animate
问题描述
I have a span that is positioned absolutely in a div. 
我的跨度绝对位于div中。 The span is wider than the div, with an overflow of hidden, so I want to animate the span to the position right: 0; 跨度比div宽，具有隐藏的溢出，因此我想使跨度动画到right: 0;的位置right: 0; similar to a marquee effect. 类似于字幕效果。
How do I get it to slide from the starting position, to the position of right: 0; 我如何使其从起始位置滑动到right: 0;位置right: 0; ? ？
CSS 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 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 的jsfiddle
3 个解决方案
解决方案1
1 2014-11-20 14:31:19
As Far I know you can't animate using an auto value. 据我所知，您无法使用auto值制作动画。 One option can be use transform property instead. 一种选择是改为使用transform属性。 Check this: 检查一下：
.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>
解决方案2
0 2014-11-20 14:38:10
By using jQuery animate: 通过使用jQuery动画：
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();
Fiddle: http://jsfiddle.net/WM9nQ/18/ 小提琴： http : //jsfiddle.net/WM9nQ/18/
解决方案3
0 2014-11-20 15:51:33
I have made the animation working. 我已经使动画工作了。
Note: I have used :after selector to hide the overflowing text; 注意：我使用了:after选择器来隐藏溢出的文本； refer the css style. 参考css样式。
DEMO: http://jsfiddle.net/nvishnu/WM9nQ/29/ 演示： http : //jsfiddle.net/nvishnu/WM9nQ/29/
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.