CODEWITHSUNDEEP
htmlcsswebkitcss-animations
OneBigEgg
OneBigEgg

Reputation: 35

Stop content initially showing before webkit animation delay has run

I have just added 'animation-delay' to my code so that content slides from offscreen only after 5 seconds. However, I am finding that the content being moved shows in the 'final' position while the 'delay' is running, then after 5 seconds the contents slides in from the left (as required).

Does anybody know how I can adapt my code so that the content isn't initially visible in the final location? Here is a stripped down version of my code:

<style>
div { 
width:100px;
height:100px;
background-color:red;

-webkit-animation: slideFromLeft 3500ms ease-out;
    -moz-animation: slideFromLeft 3500ms ease-out;
    -ms-animation: slideFromLeft 3500ms ease-out;

animation-delay:5s;
    -webkit-animation-delay:5s; /* Safari and Chrome */
}


@-webkit-keyframes slideFromLeft {
            from {
                opacity: 1;
                -webkit-transform: translateX(-100%);
            }
            to {
                opacity: 1;
                -webkit-transform: translateX(0%);
            }
        }
        @-moz-keyframes slideFromLeft {
            from {
                opacity: 1;
                -moz-transform: translateX(-100%);
            }
            to {
                opacity: 1;
                -moz-transform: translateX(0%);
            }
        }
        @-ms-keyframes slideFromLeft {
            from {
                opacity: 1;
                -ms-transform: translateX(-100%);
            }
            to {
                opacity: 1;
                -ms-transform: translateX(0%);
            }
                }


</style>

<body>

<div>

Upvotes: 2

Views: 1873

Answers (1)

towr
towr

Reputation: 4157

Add opacity:0 to the css for the initial div. That way it is invisible until the animation sets in.

Additionally, add animation-fill-mode: forwards; so it keeps the endstate.

http://jsfiddle.net/L29rW/1/

Upvotes: 7

Related Questions