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 Animating SVG with CSS Keyframe and Line Drawing Animations The Animation Challenge Solution

Posted by Ahmed SALMI
Ahmed SALMI
18,235 Points

the animation don't work properly specially in the part of slide 

/* --------------------------
  Base
--------------------------- */

body {
  padding-top: 60px;
    background: #0f4e7a;
}

svg {
    margin: auto;
  display: block;
    width: 28%;
}

/* --------------------------
  Keyframes
--------------------------- */
@keyframes slide{
  50%{
    transform:translate3d(0,-20px,0);
  }
   80%{
    transform:translate3d(0,-10px,0);
  }
   50%{
    transform:translate3d(0,0,0);
  }
}
@keyframes grow{
     0%{
    transform:scale(1);
  }
  50%{
      transform:scale(1.2) rotate(-45deg);
      fill:#ffFD34;
      opacity:1;
    }
    100%{
      transform:scale(1);
    }
  }
@keyframes offset{
  60%{
  storke-opacity:1;
  }
  100%{
  stroke-dashoffset:0;
  }
}

/* --------------------------
  SVG Styles
--------------------------- */

 .stars * {
    transform-origin:center;
  }
 .stars-bg{
   stroke: 2;
   stroke-dasharray:815;
   stroke-dashoffset:815;
  animation:offset .8s 2.2s linear forwards;
}
.star{

   /* transform:translate3d(0,180px,0);*/
    animation: slide .8s forwards, 
               grow .8s ease_out forwards;
}
.star:nth-of-type(1){
  animation-delay:.5s,1.8s 
}
.star:nth-of-type(2){
  animation-delay:0,1.5s 
}
.star:nth-of-type(3){
  animation-delay:.8s,2s 
}

MOD EDIT: Formatted code for easier reading. See here: Posting code to the forum and How To: Markdown in posts

2 Answers

Cesar De La Vega
Cesar De La Vega
13,900 Points
Cesar De La Vega
Cesar De La Vega
13,900 Points

Hard to follow your code when it is not formatted. When posting a question with code, you can click on the button that says "Markdown Cheatsheet " and it will show you how to format your code. html <p>Use the ''' characters to format your code. like this </p>

/* --------------------------
  Base
--------------------------- */

body {
  padding-top: 60px;
    background: #0f4e7a;
}

svg {
    margin: auto;
  display: block;
    width: 28%;
}

/* --------------------------
  Keyframes
--------------------------- */

@keyframes slide {
    50% {
        transform: translate3d(0,-10px,0);
    }
    80% {
        transform: translate3d(0,10px,0);
    }
    100% {
        transform: translate3d(0,0,0);
    }
} 

@keyframes grow {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.15) rotate(-5deg);
        opacity: 1;
        fill: #fdf097;
    }
    100% {
        transform: scale(1);
    }
}

@keyframes offset {
    60% {
        stroke-opacity: 1;
    }
    100% {
        stroke-dashoffset: 0;
    }
}

/* --------------------------
  SVG Styles
--------------------------- */

.stars * {
    transform-origin: 50% 50%;
}

.stars-bg {
    stroke-opacity: 0;
  stroke-dasharray: 815;
  stroke-dashoffset: 815;
    animation: offset .8s 2.2s linear forwards;
}

.star {
    transform: translate3d(0, 180px, 0);
    animation: slide .5s forwards, 
                 grow .6s ease-out forwards;
}

    .star:nth-of-type(1) {
        animation-delay: .5s, 1.8s;  
    }

    .star:nth-of-type(2) {
        animation-delay: 0s, 1.5s;
    }

    .star:nth-of-type(3) {
        animation-delay: .8s, 2s;
    }
Daniel Fehrm
Daniel Fehrm
11,675 Points
Daniel Fehrm
Daniel Fehrm
11,675 Points

Not really sure what you mean with your question, you have to be more clear but i suppose that this is your issue:

.star:nth-of-type(2){
  animation-delay:0,1.5s 
}

You have missed the time unit on the delay. It should say:

.star:nth-of-type(2){
  animation-delay:0s,1.5s 
}