title: Wait for animated button to stop
body: <p>I want to click on a animated button with name <code>ready</code>. This is the source code:</p>
  
  <p><a href="http://pastebin.com/up29pSRQ" rel="noreferrer">http://pastebin.com/up29pSRQ</a></p>
  
  <p>I tested this code:</p>
  
  <pre><code>driver.switchTo().frame("iwg-game-full");
          WebElement until = waitPage.until(ExpectedConditions.presenceOfElementLocated(By.id("ready")));
  
          if (until.isDisplayed())
          {
              System.out.println("Play button is displayed");
  
              driver.findElementById("ready").click();
          }
  </code></pre>
  
  <p>But when I run the code I get message immediately <code>Play button is displayed</code>. How I can wait for the animation to finish?</p>
  
  <p>CSS code for animation:</p>
  
  <pre><code>.popIn .animating {
      animation: 0.5s ease 0s normal both 1 running popIn;
      filter: blur(0px);
      left: 0;
      opacity: 0;
      position: absolute;
      top: 0;
      will-change: transform;
  }
  @keyframes popIn {
  0% {
      opacity: 0;
      transform: scale(0.1);
  }
  50% {
      opacity: 1;
  }
  100% {
      opacity: 1;
      transform: scale(1);
  }
  }
  
  .popIn:nth-child(1) .animating {
      animation-delay: 0.1s;
  }
  .popIn:nth-child(2) .animating {
      animation-delay: 0.2s;
  }
  .popIn:nth-child(3) .animating {
      animation-delay: 0.3s;
  }
  </code></pre>