Start css animation in div only after opening menu

Question

I am having doubts about starting a CSS animation only after opening the menu in the +OPEN MENU option. The animation will occur in the element <div class="product"></div>

Example link in Codepen: https://codepen.io/flashpremium/pen/2b11d13707e9257c659323524eec1a2f

@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700');


body {
  margin: 0 auto;
  font-family: Open Sans;
  background: #f4f4f4;
}

.menu-container {
    width:100%;
    margin: 0 auto;
}
.menu {
    width: 100%;
    font-weight: 600;
    font-size: 14px;
    line-height: 15px;
    position: relative;
    padding: 0px 0 0px 0px;
    margin: -5px;
    background-color: #fff;
}

.logo {
  width: 40px;
  margin: 15px 1px -10px 35px;
}

.menu a, .menu a:link, .menu a:visited, .menu a:focus, span {
    color: #000000;
    font-weight: bold;
    text-decoration: none;
}
.menu a:hover {
    color: #227087;
    text-decoration: none;
}
.menu > li {
   width: 20%;
    display: inline-block;
    text-align: center;
    margin-left: -4px;
}
.menu > li > a {
    padding:20px 18px;
    display: block;
}
.menu > li:hover > a {
    color: #227087;
}
.menu > li:hover {
    background-color: #fff;
}
/* Megadrop width dropdown */
 .menu > li > .megadrop {
    opacity: 1;
    visibility: hidden; /* hidden*/
    position: absolute;
    list-style: none;
    top: 55px;
    left: 0px;
    width: 100%;
    min-height: 200px;
    text-align: left;
    margin-top:30px;
    padding: 0;
    z-index: 99;
    overflow: hidden;
   background: #212226;
    animation-duration: .15s;

    animation-name: bounceInDown;
}
.menu > li:hover .megadrop {
    opacity: 1;
    visibility: visible;
    margin-top: 0px;

}
.menu ul li:hover:after {
    color: #227087;
}
.menu .col {
    width: 14.1%;
    float: left;
    color:white;
    margin: 0 0 0 2.2%;
}
.menu .col ul {
    padding: 0;
    margin: 0;
}
.menu .col ul li {
    padding: 0;
    list-style: none;
    font-size: 15px;
}
.menu .col h3 {
    font-size: 16px;
    padding: 10px 0;
    font-weight: bold;
    margin: 5px 0 5px 0;
    color: #fff;
}
.menu .col ul li a {
    display: block;
    padding: 0 0 15px 0;
    color: #9b9b9b;
}
.menu .col ul li a:hover {
    color: #111;
}
.menu > li > ul li ul, .menu li >ul li, .menu > li > .megadrop, .menu > li > ul, .menu > li {
    transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-outs;
  

}

.nav-information {
  width: 100%;
  height: 80px;
  background: #000; /*url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/62476/logo2.png) no-repeat;*/
  background-position: 2.5% 50%;
  background-size: 300px;
  display: inline-block;
}

.nav-information h3 {
  color: #fff;
  padding-left: 110px;
  line-height: 40px;
  font-weight: 400;
}

.nav-button {
  width: 80px;
  height: 80px;
  background: #6244b6 url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/62476/search-icon.svg) no-repeat;
  background-size: 40%;
  background-position: 50% 50%;
  float: right;
  display: inline-block;
  margin-top: -77px;
}

.product {
  width: 200px;
  height: auto;
   -webkit-animation: NAME-YOUR-ANIMATION 6000ms;
   animation-timing-function: cubic-bezier(.69,.18,.02,.79);
 
}

@-webkit-keyframes NAME-YOUR-ANIMATION {
  0%   { opacity: 0; margin-top: -35px; }
  100% { opacity: 1; margin-top: 0px;}
}

.product img {
  width: 120px;
}

.btn-product {
  width: 120px;
  height: 30px;
  line-height: 30px;
  margin-top: 5px;
  margin-bottom: 10px;
  float: left;
  background: #fff;
  color: #212226;
  border-radius: 50px;
  display:block;
  text-align: center;
  transition: 200ms;
    box-shadow: 0 0 3px blue;

}

.btn-product:hover {
  color: #fff;
  background: #000;
}

.btn-product:active,:focus {
  border-radius: 50px;
  box-shadow: 0 0 3px #000ac3;
}

<div class="nav-information">
<h3></h3>
<div class="nav-button"></div>
</div>

<ul class="menu">
<li>
    <a href="#">+JOGOS</a>
</li>
<li class="dropdown"> <a href="#">FAQ</a>
</li>
<li class="dropdown"><a href="#">+ABRIR MENU</a>
    <div class="megadrop">
        <div class="col">
            <h3>MAIS RECENTES</h3>
            <ul>
                <li><a href="#">Grand Theft Auto V</a>
                </li>
                <li><a href="#">Battlefield 1</a>
                </li>
                <li><a href="#">Destiny 2</a>
                </li>
                <li><a href="#">Far Cry 5</a>
                </li>
                <li><a href="#">The Crew 2</a>
                </li>
            </ul>
        </div>
        <div class="col">
            <h3>DESTAQUE</h3>
            <div class="product">
                <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/62476/gtav_ps4_.png">
                <a class="btn-product" href="#">COMPRAR</a>
            </div>
            <div class="product">
                <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/62476/need%20for%20speed%202016%20cover.png">
                <a class="btn-product" href="#">COMPRAR</a>
            </div>
        </div>
        <div class="col">
            <h3>Title</h3>
            <ul>
                <li><a href="#">Sub-menu 1</a>
                </li>
                <li><a href="#">Sub-menu 2</a>
                </li>
                <li><a href="#">Sub-menu 3</a>
                </li>
            </ul>
        </div>
        <div class="col">
            <h3>Title</h3>
            <ul>
                <li><a href="#">Sub-menu 1</a>
                </li>
                <li><a href="#">Sub-menu 2</a>
                </li>
                <li><a href="#">Sub-menu 3</a>
                </li>
            </ul>
        </div>
    </div>
</li>
<li><a href="#">SOBRE</a>
</li>
<li><a href="#">CONTATO</a>
</li>
</li>
</ul>
</div>

Answer 1

In a simple way, you can solve this problem using Jquery.

What must be done:

You must create two classes:

1º - The class in which the object will be before from the menu be clicked.

2º - The class in which the object will be afterward from the menu be clicked.

Once this is done, you should create a function in jquery that every time the menu element is clicked, it will make the class change and create the effect desired by you.

Follow the Example:

$('#abrir').on('click', function() {

  setTimeout(function() {
    $('.square').toggleClass('effectSquare');
  }, 500);


});

.square {
  width: 200px;
  height: 300px;
  border: 1px solid #ccc;
  margin-top: 200px;
  opacity: 0.1;
  transition: 0.5s;
  background-color: #ccc;
}

.effectSquare {
  margin-top: 10px;
  opacity: 1;
  transition: 0.5s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id='abrir' style='cursor: pointer; padding: 5px; border: 1px dashed #ccc;'>
+Abrir Menu
</span>
<div class='square'>

</div>

Remarks:

The toggleClass() used in the jquery function to interpret our element and if there is a class effectSquare it will remove it, and if there is no it will add it. (thus creating the animation effect).

I also added the method setTimeout() executing the function after a certain time. In this case the time is 500 milliseconds or 0.5 seconds. (keep in mind that the function time should always be applied in milliseconds.) So you can create a good scenario for the user who will see the effect happen a little after the menu was opened, a way to highlight the animation.

Additional

If you do not want this time delay to run the animation can pass the time to 1 millisecond which would create the effect "instantly". Or you can also remove the function setTimeout() and leave only the effect of animation.

Don’t get caught up in the animation effect created by me, you can do whatever you want with the created classes. Like colors, sizes, padding, screen position and infinite other styles.

Convert milliseconds to seconds