Search code examples
htmlcssgoogle-chromecss-animationscss-transitions

How to apply transition only on transform: translateX()?

body{
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;

}
div {
  height: 50px;
  width: 200px;
  background: rgb(255, 99, 99);
}
div:hover{
  transform: translateX(100px) rotateZ(45deg);
  transition: transform 2s;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>Hover on me.</div>
</body>
</html>

I want to apply transition on only translateX(), not on rotateZ().

Something like transition: translateX 1s;. Is there any way to do it? (Chrome browser).

Solution

  • You can use individual transform but pay attention to the browser support as it's a new feature

    body{
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;

}
div {
  height: 50px;
  width: 200px;
  background: rgb(255, 99, 99);
  transition: translate 2s;
}
body:hover div{
  translate: 100px 0;
  rotate: 45deg;
}
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>Hover on me.</div>
</body>
</html>