CODEWITHSUNDEEP
cssanimationcss-animations
Greg
Greg

Reputation: 1402

Animate growing div then animate child element

I'm currently trying to animate a growing <div> but I don't want the content to look like it is growing along with it. The content should remain invisible while the <div> is animating and once it's fully grown I'd like for the content to become visible (by changing the opacity of the <a> in that <div>).

This is the code for the <div> animation:

@keyframes menu {
  0% {
    background-color: white;
    right: -25px;
    top: -25px;
    border-radius: 100px;
    width: 0px;
    height: 0px;
  }
  25%{
    right: -50px;
    top: -50px;
    border-radius: 100px;
    width: 60px;
    height: 60px;
  }
  50% {
    right: -50px;
    top: -50px;
    width: 80px;
    height: 80px;
    border-radius: 100px;
  }
  75%{
    right:-50px;
    top:-50px;
    width: 150px;
    height: 150px;
    border-radius: 100px;
  }
  80%{
    right:-50px;
    top:-50px;
    width: 300px;
    height: 300px;
    border-radius: 300px;
  }
  100%{
    right:-150px;
    top:-150px;
    width: 450px;
    height: 450px;
    border-radius: 600px;
  }
}

It's basically a menu that starts in the corner and grows until the full screen is covered (mobile). I've tried adding a{ opacity: 1 }; but I guess it doesn't work like that.

Upvotes: 3

Views: 2960

Answers (2)

Harry
Harry

Reputation: 89760

If you want the anchor text (within the div) to be visible only after the animation on the parent div is fully complete then add another animation to the a, animate the opacity from 0 to 1 after a delay which is equal to the animation-duration of the parent.

div {
  background-color: black;
  line-height: 450px;
  text-align: center;
  animation: menu 4s linear forwards;
}
a {
  color: white;
  text-decoration: none;
  animation: display 1s linear 4s backwards;
}
@keyframes menu {
  0% {
    background-color: white;
    right: -25px;
    top: -25px;
    border-radius: 100px;
    width: 0px;
    height: 0px;
  }
  25% {
    right: -50px;
    top: -50px;
    border-radius: 100px;
    width: 60px;
    height: 60px;
  }
  50% {
    right: -50px;
    top: -50px;
    width: 80px;
    height: 80px;
    border-radius: 100px;
  }
  75% {
    right: -50px;
    top: -50px;
    width: 150px;
    height: 150px;
    border-radius: 100px;
  }
  80% {
    right: -50px;
    top: -50px;
    width: 300px;
    height: 300px;
    border-radius: 300px;
  }
  100% {
    right: -150px;
    top: -150px;
    width: 450px;
    height: 450px;
    border-radius: 600px;
  }
}
@keyframes display {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
<div>
  <a href='#'>Some Menu Link</a>
</div>

Upvotes: 2

Henrique M.
Henrique M.

Reputation: 502

I would use a little jQuery to do that. Using a callback you can call opacity 1 on a after the div is complete grown.

  $( ".yourdiv" ).animate({
    width: "450"
    height: "450"
  }, 5000, function() {
    //callback will cause the a to change its opacity only when the above function is complete
    $('.yourdiv a').css('opacity') = '1';
  });

Upvotes: 1

Related Questions