回転されたテキストで要素の幅をアニメートしてみます。要素を回転させた場合のFireFoxのCSS幅遷移の欠落
アニメーションはChrome、IE-11、Safariではスムーズに見えますが、FireFoxでは不安定です。
垂直div幅のアニメーションをよりスムーズに、きれいにするにはどうすればよいですか? rotate(90.3deg);
へ
SNIPPET
rotate(90deg);
を変更
function animate() {
var e = document.getElementById('rotbox1');
\t if (e.style.width == '120px') e.style.width = '200px'; else e.style.width = '120px';
e = document.getElementById('rotbox2');
\t if (e.style.width == '120px') e.style.width = '200px'; else e.style.width = '120px';
}
animate();
setInterval(animate, 2000);
.wrp-v {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-transform-origin: right;
transform-origin: right;
padding-right: 30px;
position: absolute;
right: 30%;
bottom: 20%;
height: 40px;
}
.wrp-h {
padding-right: 30px;
position: absolute;
right: 30%;
bottom: 20%;
height: 40px;
}
.rotbox {
background: green;
color: white;
display: inline-block;
text-align: center;
height: 40px;
width: 200px;
line-height: 40px;
border-radius: 20px;
font-size: 16px;
-webkit-transition: width 2.0s ease;
transition: width 2.0s ease;
}
<div class="wrp-v">
<div class="rotbox" id="rotbox1">Hello world</div>
</div>
<div class="wrp-h">
<div class="rotbox" id="rotbox2">Hello world</div>
</div>
これは... https://bugzilla.mozilla.org/show_bug.cgi?id=739176 – darham
は常にjQueryのアニメーションを使用することができます少し良く –