Help cleaning up my pure CSS dog animation?

Code Feedback
1

Hey everyone! I’ve been learning on FCC and various other resources since last month but this is my first post here. Hoping to get some friendly advice on how to clean up the HTML code of this personal project. It’s a dog graphic with some simple animation made with pure HTML/CSS, no JS.

The graphic itself presents ok, but I feel the HTML portion of my code could use some cleaning up. Also, codepen is giving me an “HTML inspector warnings:” message when I attempt to analyze the HTML code, but isn’t listing what exactly is wrong. Any help would be so greatly appreciated! Here’s the link: https://codepen.io/KaylaM91/pen/jRzKYx

Thanks all and happy coding :+1:t3:

2

Your HTML looks good to me, other than having two dog divs. Did you do this for organization? I think your HTML is fairly minimal with one div element per body part, which you need for it’s unique shape and position.

If you want to organize your HTML code, consider adding comments and whitespace to create visual breaks for different sections.

The only other suggestion I see is that you could technically use a positioning technique other than absolute so that the dog can be somewhat responsive to page size. Alternatively, you could just include media queries that position the dog differently at different screen widths.

3

Hey thanks for the response. I did originally use two dog divs as more of a mental organization tool while working, but definitely taking your advice and have instead added some commenting and spaced things out a bit.

I agree about the position, I noticed that the dog is not centered when I expand the window which isn’t ideal. Gonna dig into that part too.

Thanks for the tips!

4

Hi,

great looking dog you have there! I think the HTML part is ordered and very clear to read. Looking at your animations, the wag keyframe uses transform with translate which is which is great for performance. In the pant keyframe you animate bottom however, which causes repaints.

46
461482×1050 153 KB

5

Got it, all fixed. Just learned about repaints from this one fix so all in all a good learning experience haha. Thanks!

6

I see, that’s fast! I just want to add one more thing about CSS transform, you can chain multiple directives like this:

@keyframes pant {
  0% {
    transform: rotate(-40deg) translate(0, 0);
  }
  100% {
    transform: rotate(-40deg) translate(0, 4px);
  }
}

This way you keep the rotation of the tong and add in the up/down movement of the animation that used absolute positioning.

1 Like