CSS 宽度动画方向答案

【问题标题】：CSS Width Animation DirectionCSS 宽度动画方向
【发布时间】：2017-04-08 20:10:59
【问题描述】：

我正在尝试为 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 元素的宽度从左到右设置动画？

谢谢。

【问题讨论】：

标签： jquery html css animation css-animations

【解决方案1】：

当你使用right定位一个元素时，它的width从右边开始增长，所以你需要把它定位在左边，这里使用CSS Calc，left: calc(100% - 10px - 55px);完成

.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>

【讨论】：

太棒了！正是我想要的:)

【解决方案2】：

将left:50% 分配给.tt-expand 类应该会有所帮助，如下所示，这是因为parent is relative 的position，如果您没有将position:relative 分配给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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="relative">
<h2>Heading</h2>
<span class="tt"></span>
</div>

【讨论】：