为什么min-width属性打破了这个css动画无限自动播放旋转木马？

时间：2018-02-15 23:45:15

标签： html css html5 css3 css-animations

为什么添加min-width会破坏动画的平滑度？

如果代码段使用以下代码，它可以完美地工作（不跳转）

.quotes-famous__quote {
  background: #efefef;
  height: 500px;
  width: 456px;
  margin: 0 32px;
}

问题是我需要一个456px的最小宽度，这会导致它破裂。为什么呢？

.quotes-famous__quote {
  background: #efefef;
  height: 500px;
  width: 456px;
  min-width: 456px;
  margin: 0 32px;
}

为什么min-width会导致这个动画中断，跳跃并且看起来不像无限旋转木马？

body {
  align-items: center;
  background: #E3E3E3;
  display: flex;
  height: 100vh;
  justify-content: center;
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-456px * 2));
  }
}
.quotes-famous {
  background: white;
  box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.125);
  height: 500px;
  margin: auto;
  overflow: hidden;
  position: relative;
  width: 960px;
}
.quotes-famous::before, .quotes-famous::after {
  background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%);
  content: "";
  height: 500px;
  position: absolute;
  width: 200px;
  z-index: 2;
}
.quotes-famous::after {
  right: 0;
  top: 0;
  transform: rotateZ(180deg);
}
.quotes-famous::before {
  left: 0;
  top: 0;
}

.quotes-famous__track {
  animation: scroll 2s linear infinite;
  display: flex;
  width: calc(456px * 4);
}

.quotes-famous__quote {
  background: #efefef;
  height: 500px;
  width: 456px;
  min-width: 456px;
  margin: 0 32px;
}
<div class="quotes-famous">
   <div class="quotes-famous__track">
      <div class="quotes-famous__quote">
         <p class="quotes-famous__text">AAAAA AAAAAAAAAAAA AA A A A A A A AAAAAAAA AAAAAAAAA AAAAAAAAAAAA AA A A A A A A AAAAAAAA AAAA.</p>
      </div>
      <div class="quotes-famous__quote">
         <p class="quotes-famous__text">Phasellus dictum leo enim, a dignissim erat vestibulum at. Sed vitae libero id mauris ullamcorper elementum. Praesent at accumsan ipsum. Quisque sit amet posuere mauris. Proin ac vulputate odio, quis faucibus sem. Cras nec consectetur neque.</p>
      </div>
      <div class="quotes-famous__quote">
         <p class="quotes-famous__text">Sed sagittis ligula ut est faucibus egestas.</p>
      </div>
      <div class="quotes-famous__quote">
         <p class="quotes-famous__text">Fusce convallis, risus et luctus tempus, urna orci accumsan tortor, accumsan euismod arcu lectus vitae neque. Nulla tincidunt, augue non efficitur euismod, nunc diam feugiat turpis, convallis lacinia velit enim et nisl. Sed at suscipit augue. Curabitur sed dolor metus. Nunc augue eros, aliquet sed mi ac, pulvinar fermentum mauris. Cras condimentum sapien tellus, nec efficitur odio imperdiet vitae.</p>
      </div>
      <div class="quotes-famous__quote">
         <p class="quotes-famous__text">AAAAA AAAAAAAAAAAA AA A A A A A A AAAAAAAA AAAAAAAAA AAAAAAAAAAAA AA A A A A A A AAAAAAAA AAAA.</p>
      </div>
      <div class="quotes-famous__quote">
         <p class="quotes-famous__text">Phasellus dictum leo enim, a dignissim erat vestibulum at. Sed vitae libero id mauris ullamcorper elementum. Praesent at accumsan ipsum. Quisque sit amet posuere mauris. Proin ac vulputate odio, quis faucibus sem. Cras nec consectetur neque.</p>
      </div>
      <div class="quotes-famous__quote">
         <p class="quotes-famous__text">Sed sagittis ligula ut est faucibus egestas.</p>
      </div>
      <div class="quotes-famous__quote">
         <p class="quotes-famous__text">Fusce convallis, risus et luctus tempus, urna orci accumsan tortor, accumsan euismod arcu lectus vitae neque. Nulla tincidunt, augue non efficitur euismod, nunc diam feugiat turpis, convallis lacinia velit enim et nisl. Sed at suscipit augue. Curabitur sed dolor metus. Nunc augue eros, aliquet sed mi ac, pulvinar fermentum mauris. Cras condimentum sapien tellus, nec efficitur odio imperdiet vitae.</p>
      </div>
  </div>
</div>

2 个答案:

答案 0 :(得分：3)

这是一个计算问题。考虑到4个元素的宽度及其边距，您需要调整变换的body { align-items: center; background: #E3E3E3; display: flex; height: 100vh; justify-content: center; } @keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(calc((-456px * 4) - (8 * 32px))); } } .quotes-famous { background: white; box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.125); height: 500px; margin: auto; overflow: hidden; position: relative; width: 960px; } .quotes-famous::before, .quotes-famous::after { background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); content: ""; height: 500px; position: absolute; width: 200px; z-index: 2; } .quotes-famous::after { right: 0; top: 0; transform: rotateZ(180deg); } .quotes-famous::before { left: 0; top: 0; } .quotes-famous__track { animation: scroll 4s linear infinite; display: flex; width: calc(456px * 4); } .quotes-famous__quote { background: #efefef; height: 500px; width: 456px; min-width: 456px; margin: 0 32px; }，如下所示：

<div class="quotes-famous">
   <div class="quotes-famous__track">
      <div class="quotes-famous__quote">
         <p class="quotes-famous__text">AAAAA AAAAAAAAAAAA AA A A A A A A AAAAAAAA AAAAAAAAA AAAAAAAAAAAA AA A A A A A A AAAAAAAA AAAA.</p>
      </div>
      <div class="quotes-famous__quote">
         <p class="quotes-famous__text">Phasellus dictum leo enim, a dignissim erat vestibulum at. Sed vitae libero id mauris ullamcorper elementum. Praesent at accumsan ipsum. Quisque sit amet posuere mauris. Proin ac vulputate odio, quis faucibus sem. Cras nec consectetur neque.</p>
      </div>
      <div class="quotes-famous__quote">
         <p class="quotes-famous__text">Sed sagittis ligula ut est faucibus egestas.</p>
      </div>
      <div class="quotes-famous__quote">
         <p class="quotes-famous__text">Fusce convallis, risus et luctus tempus, urna orci accumsan tortor, accumsan euismod arcu lectus vitae neque. Nulla tincidunt, augue non efficitur euismod, nunc diam feugiat turpis, convallis lacinia velit enim et nisl. Sed at suscipit augue. Curabitur sed dolor metus. Nunc augue eros, aliquet sed mi ac, pulvinar fermentum mauris. Cras condimentum sapien tellus, nec efficitur odio imperdiet vitae.</p>
      </div>
      <div class="quotes-famous__quote">
         <p class="quotes-famous__text">AAAAA AAAAAAAAAAAA AA A A A A A A AAAAAAAA AAAAAAAAA AAAAAAAAAAAA AA A A A A A A AAAAAAAA AAAA.</p>
      </div>
      <div class="quotes-famous__quote">
         <p class="quotes-famous__text">Phasellus dictum leo enim, a dignissim erat vestibulum at. Sed vitae libero id mauris ullamcorper elementum. Praesent at accumsan ipsum. Quisque sit amet posuere mauris. Proin ac vulputate odio, quis faucibus sem. Cras nec consectetur neque.</p>
      </div>
      <div class="quotes-famous__quote">
         <p class="quotes-famous__text">Sed sagittis ligula ut est faucibus egestas.</p>
      </div>
      <div class="quotes-famous__quote">
         <p class="quotes-famous__text">Fusce convallis, risus et luctus tempus, urna orci accumsan tortor, accumsan euismod arcu lectus vitae neque. Nulla tincidunt, augue non efficitur euismod, nunc diam feugiat turpis, convallis lacinia velit enim et nisl. Sed at suscipit augue. Curabitur sed dolor metus. Nunc augue eros, aliquet sed mi ac, pulvinar fermentum mauris. Cras condimentum sapien tellus, nec efficitur odio imperdiet vitae.</p>
      </div>
  </div>
</div>
{{1}}

答案 1 :(得分：0)

试试这个：

在此处查看https://jsfiddle.net/j5nuc7s1/5/

我做了2次更改： 1）增加了新课程 2）将p更改为div 

body {
  align-items: center;
  background: #E3E3E3;
  display: flex;
  height: 100vh;
  justify-content: center;
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-456px * 2));
  }
}
.quotes-famous {
  background: white;
  box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.125);
  height: 500px;
  margin: auto;
  overflow: hidden;
  position: relative;
  width: 960px;
}
.quotes-famous::before, .quotes-famous::after {
  background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%);
  content: "";
  height: 500px;
  position: absolute;
  width: 200px;
  z-index: 2;
}
.quotes-famous::after {
  right: 0;
  top: 0;
  transform: rotateZ(180deg);
}
.quotes-famous::before {
  left: 0;
  top: 0;
}

.quotes-famous__track {
  animation: scroll 2s linear infinite;
  display: flex;
  width: calc(456px * 4);
}

.quotes-famous__quote {
  background: #efefef;
  height: 500px;
  width: 456px;      
  margin: 0 32px;
  overflow:hidden;
}
/* added new */
.quotes-famous__quote .quotes-famous__text{
  min-width: 456px;      
}

<div class="quotes-famous">
   <div class="quotes-famous__track">
      <div class="quotes-famous__quote">
         <div class="quotes-famous__text">AAAAA AAAAAAAAAAAA AA A A A A A A AAAAAAAA AAAAAAAAA AAAAAAAAAAAA AA A A A A A A AAAAAAAA AAAA.</div>
      </div>
      <div class="quotes-famous__quote">
         <div class="quotes-famous__text">Phasellus dictum leo enim, a dignissim erat vestibulum at. Sed vitae libero id mauris ullamcorper elementum. Praesent at accumsan ipsum. Quisque sit amet posuere mauris. Proin ac vulputate odio, quis faucibus sem. Cras nec consectetur neque.</div>
      </div>
      <div class="quotes-famous__quote">
         <div class="quotes-famous__text">Sed sagittis ligula ut est faucibus egestas.</div>
      </div>
      <div class="quotes-famous__quote">
         <div class="quotes-famous__text">Fusce convallis, risus et luctus tempus, urna orci accumsan tortor, accumsan euismod arcu lectus vitae neque. Nulla tincidunt, augue non efficitur euismod, nunc diam feugiat turpis, convallis lacinia velit enim et nisl. Sed at suscipit augue. Curabitur sed dolor metus. Nunc augue eros, aliquet sed mi ac, pulvinar fermentum mauris. Cras condimentum sapien tellus, nec efficitur odio imperdiet vitae.</div>
      </div>
      <div class="quotes-famous__quote">
         <div class="quotes-famous__text">AAAAA AAAAAAAAAAAA AA A A A A A A AAAAAAAA AAAAAAAAA AAAAAAAAAAAA AA A A A A A A AAAAAAAA AAAA.</div>
      </div>
      <div class="quotes-famous__quote">
         <div class="quotes-famous__text">Phasellus dictum leo enim, a dignissim erat vestibulum at. Sed vitae libero id mauris ullamcorper elementum. Praesent at accumsan ipsum. Quisque sit amet posuere mauris. Proin ac vulputate odio, quis faucibus sem. Cras nec consectetur neque.</div>
      </div>
      <div class="quotes-famous__quote">
         <div class="quotes-famous__text">Sed sagittis ligula ut est faucibus egestas.</div>
      </div>
      <div class="quotes-famous__quote">
         <div class="quotes-famous__text">Fusce convallis, risus et luctus tempus, urna orci accumsan tortor, accumsan euismod arcu lectus vitae neque. Nulla tincidunt, augue non efficitur euismod, nunc diam feugiat turpis, convallis lacinia velit enim et nisl. Sed at suscipit augue. Curabitur sed dolor metus. Nunc augue eros, aliquet sed mi ac, pulvinar fermentum mauris. Cras condimentum sapien tellus, nec efficitur odio imperdiet vitae.</div>
      </div>
  </div>
</div>
相关问题
最新问题