CSS在左侧->右侧和顶部->底部位置之间的过渡

Question

是否可以使用CSS过渡在设置为left: 0px到right: 0px的位置之间进行动画处理，从而使其在屏幕上一直显示？我需要自上而下地完成同样的事情。我是否需要计算屏幕宽度/对象大小？

#nav {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 50px;
    height: 50px;
    -webkit-transition: all 0.5s ease-out;
}

.moveto {
    top: 0px;
    right: 0px;
}

然后使用jQuery的.addClass

Answer 1

如果知道动画元素的宽度/高度，则可以对位置（顶部，底部，左侧，右侧）进行动画处理，然后减去相应的边距。

​.animate {
  height: 100px;
  width: 100px;
  background-color: #c00;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease;
  position: absolute;
  left: 0; /*or bottom, top, right*/
}

然后根据位置进行动画处理...

.animate.move {
  left: 100%;   /*or bottom, top, right*/
  margin-left: -100px; /*or bottom, top, right */
}

[transform: translate(x,y)，该实现可能会更流畅，但我会像这样保持它，这样更容易理解。

演示：http://jsfiddle.net/nKtC6/

Answer 2

这对我来说对铬起作用。翻译的百分比是指所应用元素的边界框的大小，因此它可以完美地将元素移到右下边缘，而不必切换使用哪个属性来指定其位置。

topleft {
  top: 0%;
  left: 0%;
}
bottomright {
  top: 100%;
  left: 100%;
  -webkit-transform: translate(-100%,-100%);
}

Answer 3

在更现代的浏览器（包括IE 10+）中，您现在可以使用calc()：

calc()

Answer 4

对于具有动态宽度的元素，可以使用

.moveto {
  top: 0px;
  left: calc(100% - 50px);
}

来计算水平百分比值。这导致了两种可能的解决方案：

1。选项：在整个视口中移动元素：

转自：

transform: translateX(-100%);

to

transform: translateX(0);

transform: translateX(calc(100vw - 100%));

#viewportPendulum {
  position: fixed;
  left: 0;
  top: 0;
  animation: 2s ease-in-out infinite alternate swingViewport;
  /* just for styling purposes */
  background: #c70039;
  padding: 1rem;
  color: #fff;
  font-family: sans-serif;
}

@keyframes swingViewport {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(100vw - 100%));
  }
}

2。选项：在父容器中移动元素：

转自：

<div id="viewportPendulum">Viewport</div>

to

transform: translateX(0);
left: 0;

left: 100%;
transform: translateX(-100%);

#parentPendulum {
  position: relative;
  display: inline-block;
  animation: 2s ease-in-out infinite alternate swingParent;
  /* just for styling purposes */
  background: #c70039;
  padding: 1rem;
  color: #fff;
  font-family: sans-serif;
}

@keyframes swingParent {
  from {
    transform: translateX(0);
    left: 0;
  }
  to {
    left: 100%;
    transform: translateX(-100%);
  }
}

.wrapper {
  padding: 2rem 0;
  margin: 2rem 15%;
  background: #eee;
}

---

<div class="wrapper">
  <div id="parentPendulum">Parent</div>
</div>

上的演示

注：此方法可以轻松扩展以适用于垂直定位。访问示例Codepen。