Wait for animated button to stop

Question

I want to click on a animated button with name ready. This is the source code:

http://pastebin.com/up29pSRQ

I tested this 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();
        }

But when I run the code I get message immediately Play button is displayed. How I can wait for the animation to finish?

CSS code for animation:

.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;
}

Answer 1

I would use a custom condition to wait for the targeted element to become displayed and steady. The element could be considered steady if its position remains the same between two calls.

Here is an example:

WebElement element = new WebDriverWait(driver, 20)
  .until(steadinessOfElementLocated(By.id("ready")));

public static ExpectedCondition<WebElement> steadinessOfElementLocated(final By locator) {
    return new ExpectedCondition<WebElement>() {

        private WebElement _element = null;
        private Point _location = null;

        @Override
        public WebElement apply(WebDriver driver) {
            if(_element == null) {
                try {
                    _element = driver.findElement(locator);
                } catch (NoSuchElementException e) {
                    return null;
                }
            }

            try {
                if(_element.isDisplayed()){
                    Point location = _element.getLocation();
                    if(location.equals(_location) && isOnTop(_element)) {
                        return _element;
                    }
                    _location = location;
                }
            } catch (StaleElementReferenceException e) {
                _element = null;
            }

            return null;
        }

        @Override
        public String toString() {
            return "steadiness of element located by " + locator;
        }
    };
}

public static boolean isOnTop(WebElement element) {
    WebDriver driver = ((RemoteWebElement)element).getWrappedDriver();

    return (boolean)((JavascriptExecutor)driver).executeScript(
        "var elm = arguments[0];" +
        "var doc = elm.ownerDocument || document;" +
        "var rect = elm.getBoundingClientRect();" +
        "return elm === doc.elementFromPoint(rect.left + (rect.width / 2), rect.top + (rect.height / 2));"
        , element);
}