My Device is Slow on Running CSS Transition Code [closed]

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.

Answer

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.