CSS宽度动画方向

Question

我正在尝试设置span元素的宽度。

这就是我的HTML + CSS + jQuery的样子：

.tt {
	position: absolute;
	width: 55px;
	height: 3px;
	background-color: #999997;
	top: 0;
	right: 10px;
	opacity: 0;	
}

.tt-expand {
	width: 55px;
	opacity: 1;	
	animation: 1s ease tt-expand;  
}

@keyframes tt-expand {

	0% {
	width: 0;
	}
	100% {
	width: 55px;
	}

}

.relative {
    display: inline-block;
    position: relative;
    padding: 20px 28px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<script>
jQuery(document).ready(function($) {

setTimeout(function(){
	$( '.tt' ).addClass( 'tt-expand' );
}, 1000 );

});
</script>

<div class="relative">
		<h2>Heading</h2>
		<span class="tt"></span>
</div>

问题：

该线条从从右到左动画。

首选结果：

理想情况下，该线应该从从左到右

动画显示

问题

如何让我的SPAN元素的宽度从左到右动画？

谢谢。

Answer 1

当您使用right定位元素时，其width会从右侧增长，因此您需要将其定位在左侧，此处使用CSS Calc完成，left: calc(100% - 10px - 55px); < / p>

.tt {
  position: absolute;
  width: 55px;
  height: 3px;
  background-color: #999997;
  top: 0;
  left: calc(100% - 10px - 55px);
  opacity: 0;
}

.tt-expand {
  width: 55px;
  opacity: 1;
  animation: tt-expand 1s ease;
}

@keyframes tt-expand {
  0% {
    width: 0;
  }
  100% {
    width: 55px;
  }
}

.relative {
  display: inline-block;
  position: relative;
  padding: 20px 28px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<script>
  jQuery(document).ready(function($) {

    setTimeout(function() {
      $('.tt').addClass('tt-expand');
    }, 1000);

  });
</script>

<div class="relative">
  <h2>Heading</h2>
  <span class="tt"></span>
</div>

如果出于某种原因不能使用CSS Calc，你可以这样做，你可以在其中设置宽度和右值的动画

.tt {
  position: absolute;
  width: 55px;
  height: 3px;
  background-color: #999997;
  top: 0;
  right: 10px;
  opacity: 0;
}

.tt-expand {
  width: 55px;
  opacity: 1;
  animation: tt-expand 1s ease;
}

@keyframes tt-expand {
  0% {
    width: 0;
    right: 65px;
  }
  100% {
    width: 55px;
    right: 10px;
  }
}

.relative {
  display: inline-block;
  position: relative;
  padding: 20px 28px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<script>
  jQuery(document).ready(function($) {

    setTimeout(function() {
      $('.tt').addClass('tt-expand');
    }, 1000);

  });
</script>

<div class="relative">
  <h2>Heading</h2>
  <span class="tt"></span>
</div>

Answer 2

将left:50%分配给班级.tt-expand应该有帮助，如下所示，因为position parent is relative，如果您尚未将position:relative分配给{{1} }}元素然后这不起作用，实际上它可以工作但parent或从页面中心执行aligns。

border animation

jQuery(document).ready(function($) {
setTimeout(function(){
$('.tt').addClass( 'tt-expand' );
}, 1000 );
});

 .tt {
    position: absolute;
    width: 55px;
    height: 3px;
    background-color: #999997;
    top: 0;
    right: 10px;
    opacity: 0;	
}
.tt-expand {
    width: 55px;
    opacity: 1;	
    animation: 1s ease tt-expand;
    right:0;
    left:50%;/*Add this*/
}

@keyframes tt-expand {
0% {
   width: 0;
}
100% {
    width: 55px;
}
}
.relative {
    display: inline-block;
    position: relative;
    padding: 20px 28px;
}