Question

我有以下HTML：

.container {
  width: auto;
  height: 32px;
  background-color: gray;
  display: inline-block;
  padding: 4px 8px;
  min-width: 400px;
  position: absolute;
}

.box {
  padding: 0 6px;
  height: 100%;
  left: 0;
  background-color: red;
  width: auto;
  display: inline-block;
  line-height: 32px;
}

<div class="container">
  <div class="box">HELLO</div>
</div>

我只想在CSS中从右到左为div设置动画。问题是内部box的宽度有所变化（由于翻译）。

如果我可以制作类似于

的动画

from {
  right: 0;
}

to {
  left: 0;
}

这正是我所需要的，但是不幸的是，这不起作用。

如何仅使用CSS为内部div设置从左到右的宽度变化的动画。外部div的宽度也有所不同。

编辑：

我希望内部div永远不要移到外部div之外。

这不是重复的，因为内部和外部容器的宽度是可变的/未知的。

Answer 1

您可以从right:100%开始并完成到right:0%

编辑我通过使用2种不同的方法来实现这一点：

通过更改right属性并使用calc()来防止装箱进入容器之外
使用包装宽度等于容器宽度减去包装盒宽度的包装纸，并将translateX属性用于动画。

.container{
background-color:#ccc;
width:400px;
position:relative;
height:50px;
}

.big{
 width:600px;
}

.test1 .box{
 position:absolute;
 width:100px;
 height:100%;
 right:calc(100% - 100px);
 background-color:red;
 animation:to-right-1 1s linear forwards;
}

.test2 .wrapper{
position:relative;
width:calc(100% - 100px);
height:100%;
animation:to-right-2 1s linear forwards;
}

.test2 .box{
width:100px;
height:100%;
background-color:red;
}

@keyframes to-right-1{
  from{
    right:calc(100% - 100px);;
  }
  to{
    right:0px;
  }
}
@keyframes to-right-2{
  from{
    transform:translateX(0%);
  }
  to{
    transform:translateX(100%);
  }
}

<div class="test1">
  <div class="container">
    <div class="box">Hello</div>
  </div>

  <div class="container big">
    <div class="box">Hello</div>
  </div>
</div>

<div class="test2">
  <div class="container">
    <div class="wrapper"><div class="box">Hello</div></div>
  </div>

  <div class="container big">
      <div class="wrapper"><div class="box">Hello</div></div>
  </div>
</div>

Answer 2

在课堂上定义左右后。

transition-property: right, left;
transition-duration: 2s;
-webkit-transition-property: right, left; /* Safari */
-webkit-transition-duration: 2s;

权利可以像

right:calc(100% - 400px)

并使用它来使它变大。

@-webkit-keyframes big {
    from { -webkit-transform: scale(.1,.1); }
    to { -webkit-transform:  scale(1,1); }
}
@keyframes big {
    from { transform: scale(.1,.1); }
    to { transform: scale(1,1); }

将此小提琴用作参考http://jsfiddle.net/MiKr13/aL7t2jvr/ }

Answer 3

您可以使用关键帧动画对它们进行动画处理。

.container {
  width: auto;
  height: 32px;
  background-color: gray;
  display: inline-block;
  padding: 4px 8px;
  min-width: 400px;
  position: absolute;
}

.box {
  padding: 0 6px;
  height: 100%;
  left: 0;
  background-color: red;
  width: 50px;
  display: inline-block;
  line-height: 32px;
}

  .navr{position:absolute; z-index:55; text-align:center; margin:0 auto; bottom:0%; cursor:pointer;}

.navr {
-webkit-animation-name: bump; 
-webkit-animation-duration: 0.3s; 
-webkit-animation-iteration-count: 1; 
animation-name: bump;
animation-duration: 2s;
animation-iteration-count: 1;
position:absolute;
left:0;
}

@keyframes bump {
0%   {right:-100%;}
   
100% {right:85%;}
}

<div class="container">
  <div class="box navr">HELLO</div>
</div>

Answer 4

如果您使用变体宽度，则可以使用元素的宽度来放置它们。

这里的类.animated的宽度为50px;，因此我们可以将其位置从left:100%移到left:50px而不是给left:0

因为元素.animate的位置为absolute。这就是为什么我们在这里给出宽度作为位置的原因。

    .container {
    	position: relative;
    	width: 80%;
    	height: 50px;
    	border: 1px solid black;
    }

    .animated {
    	position: absolute;
    	width: 50px;
    	height: 100%;
    	background-color: red;
    	animation: .5s linear 0s slide 1;
    }

    @keyframes slide {
      from { left: 100%; }
      to {
        left: 50px;
        transform: translateX(-100%);
      }
    }

    <div class=container>
    <div class=animated>hello
    </div></div>

从右向左对div进行动画处理，仅使用CSS宽度

4 个答案: