CSS 使用平移制作动画会导致不必要的像素偏移

Question

正在尝试创建一个动画，其中四个部分相交形成一个圆。但是，当最后一部分开始移动时，出现了奇怪的像素偏移。

尝试使用 padding-bottom 作为属性并得到相同的结果

这是fiddle https://jsfiddle.net/52vu6e1f/1/

<body class="MW-Body">
    <div class="MW-ContentWrapper">
        <div class="Underlay small-12"></div>
        <div class="Overlay small-12">
            <div class="Circle-Container">
                <div class="Circle-Container-Inner clearfix">
                    <div class="Popup1 Popup1-Animation"></div>
                    <div class="Popup2 Popup2-Animation"></div>
                    <div class="Popup3 Popup3-Animation"></div>
                    <div class="Popup4 Popup4-Animation"></div>
                </div>
            </div>
        </div>
    </div>
</body>

html{font-size: 10px !important;}

body{
    min-width: 350px;
}
.Overlay{display: block}

div[class^="Popup"]{
    width: 0; 
    height: 0; 
    border-left: 15.625rem solid transparent;
    border-right: 15.625rem solid transparent; 
    border-bottom: 15.625rem solid black;
    border-bottom-left-radius: 15.625rem;
    border-bottom-right-radius: 15.625rem;
    transform-origin:top;
    position: absolute;
    top:50%;

    display: block
}

.Circle-Container{}
.Circle-Container-Inner{position:relative;width:31.25rem;height:31.25rem;left: 50%;
    -webkit-transform:translate( -50%, 0%);
    -moz-transform:   translate( -50%, 0%);
    -ms-transform:    translate( -50%, 0%);
    -o-transform:     translate( -50%, 0%);
    transform:        translate( -50%, 0%);
    display: inline-block;
}

.MW-ContentWrapper .Popup1{border-bottom: 15.625rem solid black;transform: rotate(90deg) translate(-200%, 0);}
.MW-ContentWrapper .Popup2{border-bottom: 15.625rem solid red;transform: rotate(180deg) translate(0, 200%);}
.MW-ContentWrapper .Popup3{border-bottom: 15.625rem solid yellow;transform: rotate(270deg) translate(200%, 0);}
.MW-ContentWrapper .Popup4{border-bottom: 15.625rem solid green;transform: rotate(360deg) translate(0, 300%);}

@keyframes SnapInTop {
  0% {
   transform:translate(0, -200%) rotate(180deg);

  }
  100% {
    transform:translate(0, 0)  rotate(180deg);

  }
}
@keyframes SnapInRight {
  0% {
   transform:translate(200%, 0) rotate(270deg);

  }
  100% {
    transform:translate(0, 0)  rotate(270deg);

  }
}
@keyframes SnapInBottom {
  0% {
   transform:translate(0, 200%) rotate(360deg);

  }
  100% {
    transform:translate(0, 0)  rotate(360deg);

  }
}
@keyframes SnapInLeft {
  0% {
   transform:translate(-200%, 0) rotate(90deg);

  }
  100% {
    transform:translate(0, 0)  rotate(90deg);

  }
}
.Popup1-Animation {
  animation-name: SnapInLeft;
  animation-duration: .5s; 
  animation-timing-function: linear; 
  animation-delay: 0;
  animation-direction: alternate;
  animation-fill-mode: forwards;
  animation-play-state: running; 
}
.Popup2-Animation {
  animation-name: SnapInTop;
  animation-duration: .5s; 
  animation-timing-function: linear; 
  animation-delay: .5s;
  animation-direction: alternate;
  animation-fill-mode: forwards;
  animation-play-state: running; 
}
.Popup3-Animation {
  animation-name: SnapInRight;
  animation-duration: .5s; 
  animation-timing-function: linear; 
  animation-delay: 1s;

  animation-fill-mode: forwards;
  animation-play-state: running; 
}
.Popup4-Animation {
  animation-name: SnapInBottom;
  animation-duration: .5s; 
  animation-timing-function: linear; 
  animation-delay: 1.5s;
  animation-fill-mode: forwards;
  animation-play-state: running; 
}


@media only screen and (min-width: 40.063em){
    html{font-size:10px !important;}
}

@media only screen and (min-width: 64.063em){
    html{font-size:12px !important;}
}

@media only screen and (min-width: 90.063em){
    html{font-size:14px !important;}
}

@media only screen and (min-width: 120.063em){
    html{font-size:16px !important;}
}

Answer 1

我尝试更改此行：

.Circle-Container-Inner{position:relative;width:31.25rem;height:31.25rem;left: 50%;

对此：

.Circle-Container-Inner{position:fixed;width:31.25rem;height:31.25rem;left: 50%;

固定位置。所以你可以将整个东西添加到另一个容器中你需要的位置编辑：例如将相对位置添加到 Circe-Container class

Answer 2

发生这种情况是因为内容溢出。使用这个

.Circle-Container{
    overflow:hidden;
}

这是一个有效的 fiddle。

CSS 使用平移制作动画会导致不必要的像素偏移

CSS Animate using translate causes unwanted pixel shift

html

css

animation