CSS animation repeat without reloading

Question

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

Hunter Turner · Accepted Answer · 2016-08-13 17:50:29Z

3

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%}
}

edited Aug 13, 2016 at 17:50

answered Aug 12, 2016 at 15:56

Hunter Turner

6,94411 gold badges43 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Liz H. Over a year ago

Thank you a million times Hunter. It worked! Hope you don't mind if I ask one more quick question. I'm wondering if you might have any insights into why the transition doesn't function properly in Safari. For some reason it ends halfway across the screen. Again, thanks so much!!!

Hunter Turner Over a year ago

@LizH. I realized that I wasn't adding infinite to the -webkit- animation, which Safari uses. -webkit-animation: move 40s infinite;

Collectives™ on Stack Overflow

CSS animation repeat without reloading

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related