Question

我创建了一些动画，并使用javascript将它们应用于div。基本上，我正在做的是让卡片在悬停时旋转并翻译并返回。当我想要回来时，其中2个div在动画制作之前首先无意中向上移动。

是的，我知道我的代码可以压缩，但我当时正在创建草稿动画。

HTML

<head>
  <link rel="stylesheet" type="text/css" href="index.css">
  <script src="index.js"></script>
</head>

<body>
  <div class="container" style="position:absolute; left:40%; top:20%;">
    <div class="card" id="c1"><p>Anti-Social</p>
      <h5 id="stud">STUDIOS</h5>
    </div>
    <div class="card" id="c2"></div>
    <div class="card" id="c3"></div>
  </div>
</body>

CSS

*{
  margin: 0;
  padding: 0;
}
#stud{
  color: #3F3F3F;
  opacity:0;
}

@keyframes fadein {
    from { opacity: 0;}
    to   { opacity: 1;}
}

@keyframes fadeout {
    from { opacity: 1;}
    to   { opacity: 0;}
}

body{
  background-color: #1E2226;
}

.card{
  width: 250px;
  height: 300px;
  display:flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  align-items: center;
  color: #0F0F0F;
  font-size: 200%;
}

#c1{
  background-color: rgba(242, 242, 242, 1);
  z-index: 3;
  position: absolute;
  top: 0;
  left: 0;
}

#c2{
  background-color: rgba(242,242,242, 0.6);
  z-index: 2;
  position: absolute;
  top: 0;
  left: 0;
}

#c3{
  background-color: rgba(242,242,242, 0.3);
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
}

@keyframes inright {
  0%{transform: rotate(0deg) translateX(0%);}
  100%{transform: rotate(15deg) translateX(10%);}
}

@keyframes inleft {
  0%{transform: rotate(0deg) translateX(0%);}
  100%{transform: rotate(-15deg) translateX(-10%);}
}

@keyframes outright {
  0%{transform: translateX(10%) rotate(15deg);}
  100%{transform: translateX(0%) rotate(0deg);}
}

@keyframes outleft {
  0%{transform: translateX(-10%) rotate(-15deg);}
  100%{transform: translateX(0%) rotate(0deg);}
}

当您从卡中删除光标时，请参阅此处的问题： Codepen ：https://codepen.io/iamshivam/pen/mwLZRq

Answer 1

关键帧中transform s的顺序实际上很重要，请参阅CSS3 transform order matters: rightmost operation first

如果对所有关键帧执行此操作，请更改

@keyframes outleft {
  0%{transform: translateX(-10%) rotate(-15deg);}
  100%{transform: translateX(0%) rotate(0deg);}
}

到

@keyframes outleft {
  0%{transform: rotate(-15deg) translateX(-10%);}
  100%{transform: rotate(0deg) translateX(0%);}
}

会奏效。

在CSS动画中意外移动

1 个答案: