Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Kristian Woods
Kristian Woods
23,414 Points

CSS Animation - How do you pause your animation for a specific amount of time?

Hey, I'm creating a real quick animation. What I'm trying to achieve, is having an image come in from the right of the screen, stay in the centre for a specified number of seconds - 30 seconds, to be exact, whilst I have text rise from the bottom of the screen, so it sits just beneath the image. Once all the text has reached it destination, I would like the image to then animate to the left off screen and the text to animate towards the bottom of the screen.

I have managed to get the image to pause in the middle of the screen, however, it only stays for half a second before it shoots to the left off screen.

Any help would be much appreciated

<!doctype html>
<html lang="en">
    <head>
        <title>Healthier Scotland</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="main.css"/>
        <style>

            body {
                background: #136faf;
                height: 768px;
            }

            .banana-div {
                width: 159px;
                height: 371px;
                position: absolute;
                top: 5%;
                right: -159px;
                border: 2px solid #fff;
                animation-name: slide-in;
                animation-duration: 5s;
                animation-delay: .5s;
                animation-timing-function: cubic-bezier(.52, -0.23, .43, 1.28);
                animation-iteration-count: 1;
                animation-fill-mode: forwards;
            }

            .banana-eyes {
                position: absolute;
                top: 25%;
                left: 45%;
                border: 2px solid #fff;
                animation-name: eyes;
                animation-duration: 2s;
                animation-iteration-count: infinite;
            }

            .banana {
                display: block;
                border: 2px solid #fff;
            }

            @keyframes slide-in {
                0% {transform: translateX(0);}
                50% {transform: translateX(-712px); animation-play-state: paused;}
                100% {transform: translateX(-1500px);}
            }

            @keyframes eyes {
                from {transform: scale(1);}
                to {transform: scale(1.5);}
            }



        </style>
   </head>
    <body>
            <div class="banana-div">
                <img class="banana-eyes" src="img/eyes.png">
                <img class="banana" src="img/banana.png">
            </div>


    </body>
</html>

2 Answers

Steven Parker
Steven Parker
242,296 Points
Steven Parker
Steven Parker
242,296 Points

I think you can only delay an animation at the beginning of the cycle. However...

:point_right: You can specify keyframes that maintain one position for a portion of the cycle.

@keyframes slide-in {
    0% { transform: translateX(0); }
   33%,
   66% { transform: translateX(-712px); }
  100% { transform: translateX(-1500px); }
}

You may also want to change your timing function.

Kristian Woods
Kristian Woods
23,414 Points
Kristian Woods
Kristian Woods
23,414 Points

Thanks, man :)