My Device is Slow on Running CSS Transition Code

Question

I am trying to code HTML but for some reasons, my device is unable to run CSS codes smoothly. You can check the code which is written in CodePen.

html {
  height: 100%;
}

body {
  background: linear-gradient(150deg, rgb(30, 30, 30) 0%, rgb(20, 20, 20) 100%);
}

.parent {
  margin-left: auto;
  margin-right: auto;
  top: 50px;
  width: 230px;
  height: 90px;
  position: relative;
}

#child {
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  top: 0;
  left: 0;
}

.button-frame {
  margin-left: auto;
  margin-right: auto;
  background: none;
  display: inline-block;
  width: 230px;
  height: 90px;
}

.path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: frame 4s ease-in-out;
  animation-fill-mode: forwards;
}

@keyframes frame {
  from {
    stroke-dashoffset: 1000;
  }
  to {
    stroke-dashoffset: 0;
  }
}

.button {
  margin-left: 5px;
  margin-top: 5px;
  display: inline-block;
  background: none;
  cursor: pointer;
  text-decoration: none;
  border: none;
  background-color: white;
  width: 220px;
  height: 80px;
  animation: butt 3s ease-in-out;
  font-size: 24px;
  animation-fill-mode: forwards;
  transition: 1s;
}

@keyframes butt {
  from {
    margin-top: 30px;
    opacity: 0%;
  }
  to {
    margin-top: 5px;
  }
}

button:hover {
  font-size: 26px;
  text-shadow: 4px 4px 2px #999999;
}

<div class="parent">
  <svg class="button-frame">
    <polygon class="path" points="0,0 200,0 230,30 230,60 230,90 30,90 0,60" style="fill:none;stroke:white;stroke-width:3px"/>
    <text x="" y="" text-anchor="black" fill="white" font-size="">Click here<text>
  </svg>

  <div id="child"><button class="button">Figure More</button></div>
</div>

I have tested it on other devices, and in all of them it was smooth but the transition in my device is laggy. It feels like there is not enough fps.

I have tried to turn extensions off or try it on other browsers(including opera, edge and firefox), but the result did not change. Also, I have reactivated "Use hardware acceleration when available but it has no benefit.

I would be grateful if you help me.

Can offer you a hammer to whack that device with and you can go get another one — charlietfl, Apr 12 '21 at 02:10
:) No please it is quite a good device. The graphic card(Nvidia GTX 950) CPU(core i5) and RAM(16GB DDR3) are fine. It is strange that these animations are laggy. Most animations and transitions work fine but these do not. — Parsa, Apr 12 '21 at 02:29
@Parsa Does this: https://codepen.io/manaskhandelwal1/pen/oNBEpEg look laggy or not! — Manas Khandelwal, Apr 12 '21 at 02:48
@ManasKhandelwal I appreciate your response. The CodePen link you have sent has no lag(it is better to say that it is not detectable) because it is 0.2s which is too fast but when I increase it to 1s it will be laggy. Transitions and animations that I use margin or font size are laggy. when I increase the duration to 1s it feels that the font gets bigger in three frames. It is fine on all other devices and they are very smooth but this device is the only one that has lag — Parsa, Apr 12 '21 at 10:47
@Parsa The fact is there is no lag. It's just the animation that is made to have a laggy effect. Your animations are short but the amount of time you are giving for them to happen is high and that is why it feels laggy. Transform will be better to use, for more info you can read [this](https://www.html5rocks.com/en/tutorials/speed/high-performance-animations/). Also [this](https://medium.com/@ArthurFinkler/css-animations-translate-vs-absolute-positioning-and-background-position-dd39fbdeade5) and [this](https://stackoverflow.com/questions/20586143/css-animation-vs-transition) — Manas Khandelwal, Apr 12 '21 at 11:38
@ManasKhandelwal I appreciate the information you have provided. — Parsa, Apr 12 '21 at 13:04

score 0 · Accepted Answer · answered Apr 12 '21 at 03:01

0

Why don't you use transform: translateY() for better transitioning fps. translate offer you a smooth transition when you want to animate the element positioning.

answered Apr 12 '21 at 03:01

Deka Thomas

38
7

Hello, Thanks for your respone. I have tried "transform: scale and translateY" and it works fine and smooth. But still, it makes me cruise that what causes this lag on my device while it works fine on other devices. Also, I will be grateful if I am informed why the transform works better compare to other types of transitions such as margin, font-size and so on. (the link alone would be perfect) Thanks alot – Parsa Apr 12 '21 at 10:27
I forget the exact reason why transform is better for smooth transitioning animation than other properties. Maybe you can check this one https://developer.mozilla.org/en-US/docs/Web/Performance/Animation_performance_and_frame_rate – Deka Thomas Apr 14 '21 at 03:24
sorry for the late response. I appreciate your help and the sources you sent. – Parsa Apr 22 '21 at 18:04

My Device is Slow on Running CSS Transition Code

1 Answers1