如何使宽度从左侧而不是右侧开始缩小？答案

【问题标题】：How to make width start shrinking from the Left instead of right?如何使宽度从左侧而不是右侧开始缩小？
【发布时间】：2018-03-11 10:14:15
【问题描述】：

1- 我试图通过将其容器（位置：固定）宽度从 100% 设置为 0% 来使图像消失，但它从右侧开始，我想让它从左侧开始。我尝试了很多事情——比如改变页面方向或设置 div 正确：0px;而不是左：0px； - 但它没有用。我该怎么做？

2- 我希望 div 在宽度缩小时具有圆形形状，我使用了

border-bottom-right-radius: 500px;
border-top-right-radius: 500px;

为了实现这一点，但在动画结束时它不采用圆形。什么是让它保持一个圆圈的好方法？

document.getElementsByClassName("sick")[0].style.animation = "move3 3s linear forwards";

.sick {
  position: fixed;
  overflow: hidden;
  top: 0;
  left: 0;
  width: 150%;
  height: 100%;
  z-index: 999;
  background: url('http://cfile10.uf.tistory.com/image/2649725057B9A2BB0CE4EE') no-repeat;
  border-bottom-right-radius: 500px;
  border-top-right-radius: 500px;
}

@keyframes move3 {
  0% {
    width: 100%;
    /* Firefox 16+, IE 10+, Opera */
    height: 100%;
  }
  100% {
    width: 0%;
    /* Firefox 16+, IE 10+, Opera */
    height: 100%;
  }
}

.explain {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: yellow;
  text-align: center;
}

<div class="sick">

</div>
<div class="explain">
  <h1>Site Here</h1>
  <h2>Concept</h2>
</div>

https://jsfiddle.net/kalidzakaria/xzs1r9qp/

【问题讨论】：

嗨，欢迎来到 Stack Overflow！我将您的小提琴转换为“snippit”（问题编辑器中的<> 按钮，您可以编辑问题以查看它），这将使回答者在一个地方看到您的代码，并将其复制到他们的答案中。跨度>

标签： javascript css animation width css-shapes

【解决方案1】：

您需要为边距和宽度设置动画才能获得我认为您想要的效果。

document.getElementsByClassName("sick")[0].style.animation = "move3 3s linear forwards";

.sick {
  position: fixed;
  overflow: hidden;
  top: 0;
  left: 0;
  width: 150%;
  height: 100%;
  z-index: 999;
  background: url('http://cfile10.uf.tistory.com/image/2649725057B9A2BB0CE4EE') no-repeat;
  border-bottom-left-radius: 500px;
  border-top-left-radius: 500px;
}

@keyframes move3 {
  0% {
    margin-left: 0%;
    width: 100%;
    /* Firefox 16+, IE 10+, Opera */
    height: 100%;
  }
  100% {
    margin-left: 100%;
    width: 0%;
    /* Firefox 16+, IE 10+, Opera */
    height: 100%;
  }
}

.explain {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: yellow;
  text-align: center;
}

<div class="sick">

</div>
<div class="explain">
  <h1>Site Here</h1>
  <h2>Concept</h2>
</div>

【讨论】：

【解决方案2】：

动画left属性：

document.getElementsByClassName("sick")[0].style.animation = "move3 3s linear forwards";

.sick {
  position: fixed;
  overflow: hidden;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  z-index: 999;
  background: url('http://cfile10.uf.tistory.com/image/2649725057B9A2BB0CE4EE') no-repeat;
  border-bottom-left-radius: 500px;
  border-top-left-radius: 500px;
}

@keyframes move3 {
  0% {
    left: 0%;
    /* Firefox 16+, IE 10+, Opera */
    height: 100%;
  }
  100% {
    left: 100%;
    /* Firefox 16+, IE 10+, Opera */
    height: 100%;
  }
}

.explain {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: yellow;
  text-align: center;
}

<div class="sick">

</div>
<div class="explain">
  <h1>Site Here</h1>
  <h2>Concept</h2>
</div>

【讨论】：

你没有明白我想在这里实现什么。请看动画，然后提出相同但从左侧开始的内容。

【解决方案3】：

坐标总是从左上角开始。

使用关键帧，我们可以将图像的坐标以与宽度变小的相同的速度向右移动。

您已经使用border-bottom-right-radius & 应用了圆形效果 border-top-right-radius，我只是将 'right' 更改为 'left'。

document.getElementsByClassName("sick")[0].style.animation = "move3 3s linear forwards";"move3 3s linear forwards";

.sick {
  position: fixed;
  overflow: hidden;
  top: 0%;
  left: 0%;
  width: 150%;
  height: 100%;
  z-index: 999;
  background: url('http://cfile10.uf.tistory.com/image/2649725057B9A2BB0CE4EE') no-repeat;
  border-bottom-left-radius: 500px;
  border-top-left-radius: 500px;
}
@keyframes move3 {
  0% {
    width: 100%;
    /* Firefox 16+, IE 10+, Opera */
    height: 100%;
    left: 0%;
  }
  100% {
    width: 0%;
    /* Firefox 16+, IE 10+, Opera */
    height: 100%;
    left: 100%;
  }
}
.explain {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: yellow;
  text-align: center;
}

<div class="sick">

</div>
<div class="explain">
  <h1>Site Here</h1>
  <h2>Concept</h2>
</div>

【讨论】：