0

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

1 Answer 1

2

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%}
}
2
  • 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!!!
    – Liz H.
    Aug 13, 2016 at 17:12
  • @LizH. I realized that I wasn't adding infinite to the -webkit- animation, which Safari uses. -webkit-animation: move 40s infinite; Aug 13, 2016 at 17:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.