Dmitry Dmitry - 10 months ago 73
CSS Question

CSS width transition choppy in FireFox if element rotated

Try to animate width of element with text which was rotated.

Animation looks smoothly in Chrome, IE-11, Safari but choppy in FireFox.

How to make vertical div width animation more smoothly and clean?

SNIPPET



function animate() {
var e = document.getElementById('rotbox1');
if (e.style.width == '120px') e.style.width = '200px'; else e.style.width = '120px';
e = document.getElementById('rotbox2');
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>




Answer Source

Maybe you could use writing-mode instead transform :

function animate() {
  var e = document.getElementById('rotbox1');
  if (e.style.height == '120px') e.style.height = '200px';
  else e.style.height = '120px';
  e = document.getElementById('rotbox2');
  if (e.style.width == '120px') e.style.width = '200px';
  else e.style.width = '120px';
}

animate();

setInterval(animate, 2000);
.wrp-v {
  text-align: center;
  -webkit-writing-mode: vertical-lr;
  /* old Win safari */
  writing-mode: vertical-lr;
  writing-mode: tb-lr;
  direction: ltr;
  padding-right: 30px;
  position: absolute;
  right: 30%;
  bottom: 30%;
}
.wrp-h {
  padding-right: 30px;
  position: absolute;
  right: 30%;
  bottom: 20%;
}
.rotbox {
  background: green;
  color: white;
  display: inline-block;
  text-align: center;
  height: 40px;
  line-height: 40px;
  border-radius: 20px;
  font-size: 16px;
  -webkit-transition: width 2.0s ease;
  transition: width 2.0s ease;
}
#rotbox1 {
  height: 200px;
  -webkit-transition: height 2.0s ease;
  transition: height 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>