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?
Any help would be appreciated.