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 Stephanie Keys
Stephanie Keys
1,542 Points

CSS Animation Question

I've added rotating text w/ CSS animation. I want the animation to go through 1 cycle and freeze on the last keyframe. With my current code, the animation does one cycle and ends on a blank frame. Any suggestions on how to correct this?

HTML code:
< section class="rw-wrapper">
    < h2 class="rw-sentence">
        < span>Test</span>
        < div class="rw-words rw-words-1">
            < span>one</span>
            < span>two</span>
            < span>three</span>
            < span>four</span>
        < /div>
    < /h2>
< /section>

CSS Code:
body{

}
.rw-wrapper{
    width: 80%;
    position: relative;
    margin: 110px auto 0 auto;
    font-family: 'Bree Serif';
    padding: 10px;
}
.rw-sentence{
    margin: 0;
    text-align: left;
    text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
}
.rw-sentence span{
    color: #444;
    font-size: 200%;
    font-weight: normal;
}
.rw-words{
    display: inline;
    text-indent: 10px;
}
.rw-words-1 span{
    position: absolute;
    opacity: 0;
    overflow: hidden;
    color: #6b969d;
    -webkit-animation: rotateWord 8s 1 forwards;
    -ms-animation: rotateWord 8s 1 forwards;
    animation: rotateWord 8s 1 forwards;
}
.rw-words-1 span:nth-child(2) { 
    -webkit-animation-delay: 2s; 
    -ms-animation-delay: 2s; 
    animation-delay: 2s; 
    color: #6b889d;
}
.rw-words-1 span:nth-child(3) { 
    -webkit-animation-delay: 4s; 
    -ms-animation-delay: 4s; 
    animation-delay: 4s; 
    color: #6b739d; 
}
.rw-words-1 span:nth-child(4) { 
    -webkit-animation-delay: 6s; 
    -ms-animation-delay: 6s; 
    animation-delay: 6s; 
    color: #7a6b9d;
}

@-webkit-keyframes rotateWord {
    0% { opacity: 0; }
    2% { opacity: 0; -webkit-transform: translateY(-30px); }
    5% { opacity: 1; -webkit-transform: translateY(0px);}
    17% { opacity: 1; -webkit-transform: translateY(0px); }
    20% { opacity: 0; -webkit-transform: translateY(30px); }
    80% { opacity: 0; }
    100% { opacity: 0; }
}
@-ms-keyframes rotateWord {
    0% { opacity: 0; }
    2% { opacity: 0; -ms-transform: translateY(-30px); }
    5% { opacity: 1; -ms-transform: translateY(0px);}
    17% { opacity: 1; -ms-transform: translateY(0px); }
    20% { opacity: 0; -ms-transform: translateY(30px); }
    80% { opacity: 0; }
    100% { opacity: 0; }
}
@keyframes rotateWord {
    0% { opacity: 0; }
    2% { opacity: 0; -webkit-transform: translateY(-30px); transform: translateY(-30px); }
    5% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px);}
    17% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); }
    20% { opacity: 0; -webkit-transform: translateY(30px); transform: translateY(30px); }
    80% { opacity: 0; }
    100% { opacity: 0; }
}
@media screen and (max-width: 768px){
    .rw-sentence { font-size: 18px; }
}
@media screen and (max-width: 320px){
    .rw-sentence { font-size: 9px; }
}

1 Answer

Jesus Mendoza
Jesus Mendoza
23,289 Points

Hey Stephanie, in order to end an animation in a specific frame, you have to add it to the 100% rule of the animation and add the animation-fill-mode: forwards;

Stephanie Keys
Stephanie Keys
1,542 Points

Thanks!