CSS multiple transform to same element during different event

Question

I have a set of link tags that appear on page load with translate3D. This works perfectly fine. But I need the link tags to either scale on it's hover. Which doesn't work directly.

Is there a way to achieve it with just CSS? Here is the code :

.linkblock {
  margin: 20% 0;
}

.hlink {
  width: 12%;
  height: 60px;
  opacity: 0;
  padding: 0 10px;
  background: rgba(0, 0, 0, 0.3);
  display: inline-block;
  text-align: center;
  color: rgba(0, 0, 0, 0.6);
  transition: all 0.5s ease;
}

.hlink:hover {
  transform: translate(0px, -20px);
  color: red;
  background: rgba(0, 0, 0, 0.6)
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.fadeInUp {
  animation: fadeInUp 0.3s ease-in both;
}

.linkblock a:nth-child(1) {
  animation-delay: 1.0s;
}

.linkblock a:nth-child(2) {
  animation-delay: 1.1s;
}

.linkblock a:nth-child(3) {
  animation-delay: 1.2s;
}

.linkblock a:nth-child(4) {
  animation-delay: 1.3s;
}

.linkblock a:nth-child(5) {
  animation-delay: 1.4s;
}

.linkblock a:nth-child(6) {
  animation-delay: 1.5s;
}

.linkblock a:nth-child(7) {
  animation-delay: 1.6s;
}

.linkblock a:nth-child(8) {
  animation-delay: 1.7s;
}

<div class="linkblock">
  <a href="#" class="fadeInUp hlink">fsdfsdf</a>
  <a href="#" class="fadeInUp hlink">fsdfsdf</a>
  <a href="#" class="fadeInUp hlink">fsdfsdf</a>
  <a href="#" class="fadeInUp hlink">fsdfsdf</a>
  <a href="#" class="fadeInUp hlink">fsdfsdf</a>
  <a href="#" class="fadeInUp hlink">fsdfsdf</a>

</div>

Code relevant to your question belongs directly into your question, not just dumped on an external site. Please edit accordingly. — misorude
– misorude, Commented Dec 10, 2018 at 11:59

Temani Afif · Accepted Answer · 2018-12-10 12:20:48Z

The issue is the use of both that allow you to keep the last state of your animation thus the transform inside the animation will override the one on the hover that will never get activated.

You can split your animation into 2 animation and use both or forwards with only opacity and you will be able to have your transition after the animation is done.

.linkblock {
  margin: 20% 0;
}

.hlink {
  width: 12%;
  height: 60px;
  padding: 0 10px;
  background: rgba(0, 0, 0, 0.3);
  display: inline-block;
  text-align: center;
  color: rgba(0, 0, 0, 0.6);
  transition: all 0.5s ease;
  opacity:0;
}

.hlink:hover {
  transform: translate(0px, -20px) scale(1.2);
  color: red;
  background: rgba(0, 0, 0, 0.6)
}

@keyframes fadeInUp {
  from {
    transform: translate3d(0, 100%, 0);
  }
}
@keyframes show {
  to {
    opacity:1;
  }
}

.fadeInUp {
  animation: fadeInUp 0.3s ease-in,
              show 0.3s ease-in forwards;
}

.linkblock a:nth-child(1) {
  animation-delay: 1.0s;
}

.linkblock a:nth-child(2) {
  animation-delay: 1.1s;
}

.linkblock a:nth-child(3) {
  animation-delay: 1.2s;
}

.linkblock a:nth-child(4) {
  animation-delay: 1.3s;
}

.linkblock a:nth-child(5) {
  animation-delay: 1.4s;
}

.linkblock a:nth-child(6) {
  animation-delay: 1.5s;
}

.linkblock a:nth-child(7) {
  animation-delay: 1.6s;
}

.linkblock a:nth-child(8) {
  animation-delay: 1.7s;
}

<div class="linkblock">
  <a href="#" class="fadeInUp hlink">fsdfsdf</a>
  <a href="#" class="fadeInUp hlink">fsdfsdf</a>
  <a href="#" class="fadeInUp hlink">fsdfsdf</a>
  <a href="#" class="fadeInUp hlink">fsdfsdf</a>
  <a href="#" class="fadeInUp hlink">fsdfsdf</a>
  <a href="#" class="fadeInUp hlink">fsdfsdf</a>

</div>

This method is not working with IE and Edge. Is there something else required? @Temani

Irina Potapova · Accepted Answer · 2018-12-10 12:00:49Z

1

Please try this:

.linkblock{
   margin:20% 0;
  }
.hlink{
  width:12%;
  height:60px;
  opacity:0;
  padding:0 10px;
  background:rgba(0,0,0,0.3);
  display:inline-block;
  text-align: center;
  color:rgba(0,0,0,0.6);
  transition:all 0.5s ease;
  transform:translate3d(0,0,0); /* add it */
}
.hlink:hover{
  transform:translate3d(0,0,0) scale(1.2); /* add it */
  color:red;
  background:rgba(0,0,0,0.6)
}
  
@keyframes fadeInUp {
  from{
    opacity:0;
    transform:translate3d(0,100%,0);
  }
  to{
    opacity:1;
    /* transform:translate3d(0,0,0); */ /* remove it */
  }
}
.fadeInUp{
  animation:fadeInUp 0.3s ease-in both;
}
.linkblock a:nth-child(1){animation-delay:1.0s;}
.linkblock a:nth-child(2){animation-delay:1.1s;}
.linkblock a:nth-child(3){animation-delay:1.2s;}
.linkblock a:nth-child(4){animation-delay:1.3s;}
.linkblock a:nth-child(5){animation-delay:1.4s;}
.linkblock a:nth-child(6){animation-delay:1.5s;}
.linkblock a:nth-child(7){animation-delay:1.6s;}
.linkblock a:nth-child(8){animation-delay:1.7s;}

<div class="linkblock">
  <a href="#" class="fadeInUp hlink">fsdfsdf</a>
  <a href="#" class="fadeInUp hlink">fsdfsdf</a>
  <a href="#" class="fadeInUp hlink">fsdfsdf</a>
  <a href="#" class="fadeInUp hlink">fsdfsdf</a>
  <a href="#" class="fadeInUp hlink">fsdfsdf</a>
  <a href="#" class="fadeInUp hlink">fsdfsdf</a>
</div>

answered Dec 10, 2018 at 12:00

Irina Potapova

7946 silver badges17 bronze badges

3 Comments

Temani Afif Over a year ago

we don't have transition

Tom Over a year ago

Thanks for the help. This does work but the transition is lost. The 'forward' option given above helps in that.

Irina Potapova Over a year ago

@Tom, no problem

Jonas Praem · Accepted Answer · 2018-12-10 12:02:40Z

You want to animate with the max-height property.

Set the max-height to say 50px on hover set the max-height on the property itself to it's original height

Here is a working fiddle

Final css file:

.linkblock{
   margin:20% 0;
  }
  .hlink{
    width:12%;
    height: 60px;
    max-height: 60px; // add this
    opacity:0;
    padding:0 10px;
    background:rgba(0,0,0,0.3);
    display:inline-block;
    text-align: center;
    color:rgba(0,0,0,0.6);
    transition:all 0.5s ease;
  }
  .hlink:hover{
    max-height: 50px; // add this
    color:red;
    background:rgba(0,0,0,0.6)
  }

@keyframes fadeInUp {
    from{
      opacity:0;
      transform:translate3d(0,100%,0);
    }
    to{
      opacity:1;
      transform:translate3d(0,0,0);
    }
  }
  .fadeInUp{
    animation:fadeInUp 0.3s ease-in both;
  }
  .linkblock a:nth-child(1){animation-delay:1.0s;}
  .linkblock a:nth-child(2){animation-delay:1.1s;}
  .linkblock a:nth-child(3){animation-delay:1.2s;}
  .linkblock a:nth-child(4){animation-delay:1.3s;}
  .linkblock a:nth-child(5){animation-delay:1.4s;}
  .linkblock a:nth-child(6){animation-delay:1.5s;}
  .linkblock a:nth-child(7){animation-delay:1.6s;}
  .linkblock a:nth-child(8){animation-delay:1.7s;}

Collectives™ on Stack Overflow

CSS multiple transform to same element during different event

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related