Question

在尝试制作小的CSS动画时，我遇到了CSS的transform-origin属性的一个小问题。为了说明我在说什么，我使用cms设计了我想要的东西，这是我想要得到的，但是使用cms的代码则更加复杂：

.main {
margin:30px;
  box-sizing: border-box;
  border-width: 1px;
  border-style: solid;
  background-color: rgb(230, 60, 60);
  border-color: transparent;
  width: 68px;
  height: 25px;
  transform-style: preserve-3d;
  transform: translate3d(-8.93274px, -0.0896834px, 0px);
  transform-origin: 33.9995px 12.5px 0px;
}
@keyframes gwd-gen-1wa0gwdanimation_gwd-keyframes {
  0% {
    width: 68px;
    height: 25px;
    transform-origin: 33.9995px 12.5px 0px;
    transform: translate3d(-8.93274px, -0.0896834px, 0px);
    animation-timing-function: cubic-bezier(0.415, 0.189, 0, 1.079);
  }
  14.2857% {
    width: 185px;
    height: 25px;
    transform-origin: 33.9995px 12.5px 0px;
    transform: translate3d(-8.93274px, -0.0896834px, 0px);
    animation-timing-function: ease-out;
  }
  28.5714% {
    width: 185px;
    height: 25px;
    transform-origin: 33.9995px 12.5px 0px;
    transform: translate3d(-8.93274px, -0.0896834px, 0px);
    animation-timing-function: cubic-bezier(0.255, 0.269, 0.445, 0.879);
  }
  42.8571% {
    width: 68px;
    height: 25px;
    transform-origin: 12.4211px 12.5px 0px;
    transform: translate3d(108px, 0px, 0px);
    animation-timing-function: ease-out;
  }
  57.1429% {
    width: 68px;
    height: 25px;
    transform-origin: 12.5035px 12.5px 0px;
    transform: translate3d(108px, 0px, 0px);
    animation-timing-function: cubic-bezier(0.415, 0.189, 0, 1.079);
  }
  71.4286% {
    width: 185px;
    height: 25px;
    transform-origin: 34.0926px 12.5px 0px;
    transform: translate3d(-9px, 0px, 0px);
    animation-timing-function: ease-out;
  }
  85.7143% {
    width: 185px;
    height: 25px;
    transform-origin: 34.0926px 12.5px 0px;
    transform: translate3d(-9px, 0px, 0px);
    animation-timing-function: ease;
  }
  100% {
    width: 68px;
    height: 25px;
    transform-origin: 12.5583px 12.5px 0px;
    transform: translate3d(-9px, 0px, 0px);
    animation-timing-function: linear;
  }
}
.main {
  animation: gwd-gen-1wa0gwdanimation_gwd-keyframes 1.2s linear 0s 1 normal forwards running;
}

我尝试不使用cms时像使用cms一样重现它，但是我的问题是，当div调整大小时，它会在其末端移动，然后改变方向，使其表现出与CSS一样的效果。因此，这就是我只做动画的第一部分（我的div从右边增大而在左边缩小）的结果，但是它在调整大小时会移动：

    .main{
    animation: resize 2s ease  1 normal forwards;
    height:30px;
    width:200px;
    background-color:red;
    transform-origin:left;
    margin-left:100px;
    }
    @keyframes resize {
    0%{
    
    }
    50%{ 
    transform-origin:left;
    transform:scalex(2);
    }
    100%
    {
    transform-origin:right;
    transform:scalex(0.8);
    }
    }

<html>
<head>
</head>
<body>

<div class="main"></div>

</body>
</html>

Answer 1

仅更改比例不正确！您应该结合位置和比例。由于比例尺不会改变实际位置。同样，对于3D动画，还应该将多个动画组合在一起。这是我的解决方法。

.main{
        animation: resize 2s ease  1 normal forwards;
        height:30px;
        width:200px;
        background-color:red;
        transform-origin:left;
        margin-left:100px;
      }
      @keyframes resize {
        0%{

        }
        50%{
          transform-origin:left;
          transform:scalex(2) ;
        }
        100%{
          transform: translateX(100%);
        }
      }

<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    
  </head>
  <body>
    <div class="main"></div>
  </body>
</html>

调整动画中div的尺寸时的变形原点问题

1 个答案: