CSS Анимация с использованием перевода вызывает нежелательный сдвиг пикселей

Пытается создать анимацию, где четыре секции пересекаются, чтобы создать круг. Однако, когда последний раздел начинает двигаться, происходит странный сдвиг пикселей.CSS Анимация с использованием перевода вызывает нежелательный сдвиг пикселей

Пробовал с помощью дополнени-дно как свойство и получил тот же результат

Вот скрипку 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;} 
}

источник

2017-01-12 KMG221

Что такое «странный сдвиг пикселей»? В каких браузерах это происходит? –

Что значит «странный сдвиг пикселей»? Я не понимаю. Единственное, что сдвигается во время последнего раздела, это весь график, и это потому, что полоса прокрутки исчезает, поэтому положение графика смещается. Просто скройте полосу прокрутки в качестве решения. –

Это происходит из-за переполнения содержимого. Используйте это

.Circle-Container{ 
    overflow:hidden; 
}

Работает fiddle.

источник

2017-01-12 02:12:04 ab29007

Я попытался изменить эту строку:

.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%;

положение фиксировано. поэтому вы можете добавить все это в другой контейнер с нужным положением EDIT: например, добавление относительного положения в класс Circe-Container

источник

2017-01-12 02:10:27 Ardeshir81

CSS Анимация с использованием перевода вызывает нежелательный сдвиг пикселей

ответ

Смежные вопросы