色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

如何僅在transform: translateX()上應用過渡？

CSS
夏志豪1年前8瀏覽0評論

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>

你可以使用單獨的轉換，但要注意瀏覽器的支持，因為這是一個新的功能

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>

這里有一個使用關鍵幀實現這一點的簡單方法。注意，當div移動時，您需要移動光標，以保持懸停狀態。

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>

您可以嘗試使用關鍵幀動畫來代替過渡。 將rotateZ()放在它應該觸發的%范圍內。 否則，你可以嘗試JS實現，告訴我你是否需要一個樣本。

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>