CODEWITHSUNDEEP
csscss-animations
Liz H.
Liz H.

Reputation: 31

CSS animation repeat without reloading

I have created a div with a background image and applied css animation to it (transition left to right). (screenshot attached) enter image description hereMy question is: how can I make it play again without having to reload the page? Here is my html:

<div class="cityscape">
  <div class="chef"></div>
</div>

Here is my css:

.chef {
    background-image: url("../img/chef.png");
    background-position: left bottom;
    background-size: auto 100%;
    position: absolute;
    background-repeat: no-repeat;
    width:700px;
    height:60px;
    margin-top:90px;
}

/animated chef/

@-webkit-keyframes move
    {
        from {
        left: 0;
    }

    to {
        left: 50%;
    }
}

@keyframes move
{
    from {
        left: 0;
    }
        to {
        left: 50%;
    }

      to {
        left: 100%;
    }

}


.chef {
    padding-right: 20px;
    left: 100%;
    position: absolute;
    -webkit-animation: move 40s;
    animation: move 40s;
}

.chef img {
    -webkit-transition: all 10s ease-in-out;
    -moz-transition: all 10s ease-in-out; 
    -o-transition: all 10s ease-in-out; 
    -ms-transition: all 10s ease-in-out; 
    border-radius:60px;
    transition-duration: 10s;
    }

Upvotes: 1

Views: 1671

Answers (1)

Hunter Turner
Hunter Turner

Reputation: 6894

Just add infinite to the end of your move animation.

CSS

-webkit-animation: move 40s infinite;
animation: move 40s infinite;


.chef {
    background-image: url("../img/chef.png");
    background-position: left bottom;
    background-size: auto 100%;
    position: absolute;
    background-repeat: no-repeat;
    width:700px;
    height:60px;
    margin-top:90px;
}

@-webkit-keyframes move
    {
    from {
        left: 0;
    }

    to {
        left: 100%;
    }
}

@keyframes move
{
    from {
        left: 0;
    }

    to {
        left: 100%;
    }

}


.chef {
    padding-right: 20px;
    left: 100%;
    position: absolute;
    -webkit-animation: move 40s infinite;
    animation: move 4s infinite;
}

.chef img {
    -webkit-transition: all 10s ease-in-out;
    -moz-transition: all 10s ease-in-out; 
    -o-transition: all 10s ease-in-out; 
    -ms-transition: all 10s ease-in-out; 
    border-radius:60px;
    transition-duration: 10s;
    }
<div class="cityscape">
  <div class="chef">hello</div>
</div>

P.S. I also noticed that for your animation, you were calling to twice, trying to get it to stop at 50% and then continue on. This is not the way to do it. If you want to accomplish that, use percentages instead, like this:

@keyframes example {
    0%   {left: 0;}
    50%  {left: 50%}
    100% {left: 100%}
}

Upvotes: 3

Related Questions