Animation failing to play on initial load

Animation failing to play on initial load

Hi,

I have a slider on my front page. I'm using CSS animation to trigger a slow pan in effect on the background image. The animation only starts to work on the second slide. Is there a way that I can force it to trigger on the first slide?

At the moment CSS looks for the following class name, which is applied to the first slide on page load. Perhaps it's because the CSS is loading before the Javascript? Or vice versa? Here is the code I'm using and the website in question:


/* CSS */

.cycle-slide a .backstretch img {
    transform: scale(1);
    transition: all 15s;
    -webkit-transition: all 15s;
    -moz-transition: all 15s;
    animation-timing-function: ease-out;
    pointer-events: none;
}

.cycle-slide-active a .backstretch img {
    transform: scale(1.2);
    transition: all 15s;
    -webkit-transition: all 15s;
    -moz-transition: all 15s;
    animation-timing-function: ease-out;
}

Then just before my </Body> tag i'm using the following Javascript:

//Make the image full screen:
    <script>
        $("#img1").show().backstretch("images/projects/jaguar-f-type-r-feature.jpg");
        $("#img2").show().backstretch("images/projects/linda-meredith-photography-feature.jpg");
        $("#img3").show().backstretch("images/projects/run-connect-feature.jpg");
    </script>

//jQuery and Slideshow Javascript


Finally the HTML markup that appears at the top of my page:
<!--main feature-->
<div class="homefeatureimg">


    <div class="cycle-slideshow" id="cycle" data-cycle-swipe=true data-cycle-swipe-fx=scrollHorz data-cycle-timeout="8000" data-cycle-slides="> div">

        <!--slide-->
        <div>

            <a href="index.php?page=jaguar-good-to-be-bad" id="img1"></a>
            <div class="max-width homefeaturec">
                <div class="label">Digital campaign</div>
                <h1 class="featuretitle">JAGUAR F-TYPE R</h1>
            </div>

        </div>
        <!--slide-->

        <!--slide-->
        <div>

            <a href="index.php?page=linda-meredith-photography" id="img2"></a>
            <div class="max-width homefeaturec">
                <div class="label">Photography</div>
                <h1 class="featuretitle">LINDA MEREDITH</h1>
            </div>

        </div>
        <!--slide-->

        <!--slide-->
        <div>

            <a href="index.php?page=run-connect" id="img3"></a>
            <div class="max-width homefeaturec">
                <div class="label">Mobile application</div>
                <h1 class="featuretitle">RUN CONNECT</h1>
            </div>

        </div>
        <!--slide-->


    </div>


</div>
<!--main feature-->

Thank you