JS Bin Transform and transition perfs // source https://jsbin.com/xuvexuf

<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Transform and transition perfs">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<style id="jsbin-css">
body {
  background-color: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: Roboto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.box {
  flex: 1;
  height: 100px;
  width: 100px;
  background-color: #009688;
  border-radius: 3%;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
  transition: transform 0.5s ease-in-out;
  color: white;
  font-size: 3.6rem;
  margin-bottom: 10px;
  margin-top: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.box:hover {
  transform: scale(1.5) rotate(360deg);

}

.box:hover ~ .text {
    margin-top: 40px;
}

.text {
  font-size: 20px;
  color: #333;
  transition: margin-top 0.5s ease-in-out;
}
</style>
</head>
<body>
  <div class="box">A</div>
  <div class="text">Hello World</div>

const slide = [
  {transform: 'translateY(200px) scale(2)'},
  {transform: 'translateY(0px) scale(1)'},
];

const el = document.querySelector('.text');

document.querySelector('.box').addEventListener('click', () => {
  console.log(1);

el.animate(slide, {
    duration: 300,
    iterations: 1,
    fill: 'forwards'
  });
});
</script>

}

.box:hover ~ .text {
    margin-top: 40px;
}

.text {
  font-size: 20px;
  color: #333;
  transition: margin-top 0.5s ease-in-out;
}
</script>

const slide = [
  {transform: 'translateY(200px) scale(2)'},
  {transform: 'translateY(0px) scale(1)'},
];

const el = document.querySelector('.text');

document.querySelector('.box').addEventListener('click', () => {
  console.log(1);

el.animate(slide, {
    duration: 300,
    iterations: 1,
    fill: 'forwards'
  });
});
</script></body>
</html>