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

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).

CodePudding user response：

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>

CodePudding user response：

Here is a hacky way to achieve this using keyframes. Note that you will need to move the cursor as the div moves, to maintain the hover state.

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

div {
  height: 50px;
  width: 200px;
  background: rgb(255, 99, 99);
}

div:hover {
  animation: onlyTranslate 1s linear forwards;
}

@keyframes onlyTranslate {
  0% {
    transform: translateX(0px) rotateZ(0deg);
  }
  1% {
    transform: translateX(0px) rotateZ(45deg);
  }
  100% {
    transform: translateX(100px) rotateZ(45deg);
  }
}

<div>Hover on me.</div>

CodePudding user response：

You can try using keyframes animation instead of transition. Place rotateZ() in the % range where it should fire. Otherwise, you can try JS implementation, tell me if you need a sample.

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

}
div {
  height: 50px;
  width: 200px;
  background: rgb(255, 99, 99);
}
div:hover {
  animation: move 2s normal forwards ease-in-out;
}

@keyframes move {
    0%   {
      transform: translateX(0px) rotateZ(0deg);
    }
    95% {
      transform: translateX(100px) rotateZ(0deg);    
    }
    100% {
      transform: translateX(100px) rotateZ(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>