如何制作从右到左宽度从0%到100%的动画？

Question

我想制作一个从右到左的 DIV 动画。我知道如何从左到右，但我不确定如何从右到左。

下面是从左到右的动画代码::

.wrapper {
  border: 1px solid black;
}

.contents {
  background: #c3c;
  overflow: hidden;
  white-space: nowrap;
  display: inline-block;
  width: 100%;
}

.wrapper:hover .contents {
  transition: width 1s ease-in-out;
  width: 0%;
}

<div class="wrapper">
  <div class="contents">These are the contents of this div</div>
</div>

谁能指出我正确的方向？

Answer 1

考虑 clip-path，你可以很容易地有任何方向

.wrapper {
  border: 1px solid black;
}

.contents {
  background: #c3c;
  overflow: hidden;
  display: inline-block;
  width:100%;
  transition: clip-path 1s ease-in-out;
  clip-path:inset(0);
}

.wrapper:hover .contents {
  clip-path:inset(0 100% 0 0); /* top "right" bottom left*/
}

.wrapper.alt:hover .contents {
  clip-path:inset(0 0 0 100%); /* top right bottom "left"*/
}

<div class="wrapper">
  <div class="contents">These are the contents of this div</div>
</div>
<div class="wrapper alt">
  <div class="contents">These are the contents of this div</div>
</div>

或者简单地依靠文本对齐：

.wrapper {
  border: 1px solid black;
}
.wrapper.alt {
  text-align:right;
}

.contents {
  background: #c3c;
  overflow: hidden;
  white-space: nowrap;
  display: inline-block;
  width: 100%;
  text-align:left;
  transition: width 1s ease-in-out;
}

.wrapper:hover .contents {
  width: 0%;
}

<div class="wrapper">
  <div class="contents">These are the contents of this div</div>
</div>
<div class="wrapper alt">
  <div class="contents">These are the contents of this div</div>
</div>

如何制作从右到左宽度从0%到100%的动画？

How to make animation of width from 0 to 100% from right to left?

css

css-transitions