Wait for animated button to stop
<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>