Question

我有一个应用于div的偏斜变换，我想在页面加载时设置它的动画。

当我使用关键帧动画时，在动画期间移除了倾斜，然后弹出＆＃34;弹出＆＃34;动画完成后就位。

如何在动画进行过程中保持应用于div的偏斜？

＆＃13;

div {
  -webkit-transform:skew(-197deg);
  -moz-transform:skew(-197deg);
  transform:skew(-197deg);
  width: 200px;
  margin-left: 40px;
  animation: 1s ease-in-out 0s 1 slideInFromLeft;
}

@keyframes slideInFromLeft {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  60% {
    opacity: 0.5;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

＆＃13;

<div>Hello, this is a skewed div that does not stay skewed when the animation is in progress.</div>

＆＃13;

Answer 1

您需要将skew添加到动画中，否则动画规则将覆盖它。

div {
  -webkit-transform:skew(-197deg);
  -moz-transform:skew(-197deg);
  transform:skew(-197deg);
  width: 200px;
  margin-left: 40px;
  animation: 1s ease-in-out 0s 1 slideInFromLeft;
}

@keyframes slideInFromLeft {
  0% {
    transform: skew(-197deg) translateX(-100%);
    opacity: 0;
  }
  60% {
    opacity: 0.5;
  }
  100% {
    transform: skew(-197deg) translateX(0);
    opacity: 1;
  }
}

<div>Hello, this is a skewed div that does not stay skewed when the animation is in progress.</div>

关键帧动画从动画中删除div的偏斜

1 个答案: