0
4つのセクションが交差して円を描くアニメーションを作成しようとしています。しかし、最後のセクションが移動を開始すると、奇妙なピクセルシフトがあります。CSS translateを使用したアニメーションで不要なピクセルシフトが発生する
プロパティとしてパディング下を使用してみました。ここで同じ結果
を得ましたがフィドル 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;}
}
「奇妙なピクセルシフト」とは何ですか？それはどのブラウザで起こりますか？ –
「奇妙なピクセルシフト」とはどういう意味ですか？理解できません。最後のセクションでシフトしているのは、グラフ全体です。スクロールバーが消えてグラフの位置がずれるためです。解決策としてスクロールバーを隠すだけです。 –