0

I have created some animations and applied them to divs using javascript. Basically, what I'm doing is making cards rotate and translateX on hover and get back. When I'm trying to get back, 2 of the divs first unintentionally moves up before animating.

Yes, I know my code can be compressed, but I was just creating a draft animation at that moment.

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);}
}

See The Problem Here when You remove cursor from the card: Codepen: https://codepen.io/iamshivam/pen/mwLZRq

Shivam Dhawan
  • 47
  • 7

1 Answers1

0

The order of the transforms in the keyframes actually matter, refer to CSS3 transform order matters: rightmost operation first

If you do this for all keyframes, changing

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

to

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

will work.

Cynigo
  • 374
  • 2
  • 11