Fixing Kinks in Product Landing Page and Codepen question

This is my Looney Tunes themed product landing page. In the spirit of ACME, I thought it would be fun to make the respected DIVs look like package crates and the buttons look as if they were going to explode when hovered upon.

To make the explode effect, I made and CSS animation that rapidly manipulates the button’s color and made the button shake by manipulating it’s margin values. The problem being that I noticed that the very bottom of the “crates” also begins to shake. Code in question is here:

@keyframes explode {
  0% {
    background-color: yellow;
    padding-right: -20px;
    margin-top: 5px;
    margin-bottom: -5px;
  }

  30% {
    background-color: orange;
    padding-right: 20px;
    margin-top: -5px;
    margin-bottom: 5px;
  }

  60% {
    background-color: red;
    margin-right: -10px;
  }

  90% {
    background-color: orange;
    margin-right: 10px;
  }

  100% {
    background-color: yellow;
  }
}

Any advise on how I might be able to clean this up?

Also, I noticed when I click on CodePen’s “Analyze HTML”, the “HTML Inspector Warnings:” dialog pops up, but does not list any warnings. Is this a known bug, or is my HTML just such a mess that the HTML Inspector just doesn’t even know where to begin? :stuck_out_tongue:

Any help would be appreciated.

Looks cool!

The bottom of the crate moves because you are changing the button’s bottom margin which affects the space between them. Maybe a better way to do the animation is to use transform: translate()

Here’s an example: https://www.w3schools.com/howto/howto_css_shake_image.asp

For the Codepen Analyze HTML thing, it often doesn’t work well for me either. I think it’s a problem with Codepen.

1 Like

Oh wow! That is perfect! Thanks for the tip!

1 Like