After finishing Net Ninja's CSS tutorial on YouTube, I figured out how to add a subtle shake to any element.

@keyframes button-shake {
  from {
    rotate:2deg
  }
  to {
    rotate:-2deg
  }
}

This takes the element and rotates it a little bit clockwise and then a little bit counterclockwise. This creates a nice effect on hover.

@media (hover: hover) {
 nav a:hover {
 animation: button-shake 0.3s linear;
   }
}

I am nesting it inside @media (hover: hover)because that will limit the animation to only devices that have hover (don't use the animation on mobile). If you don't do this, you'll notice the animation firing off when you tap on an element which looks weird.

With any kind of optional movement on your site, you also should take a look at the prefers-reduced-motion media query to make sure the animation is turned off for people who have movement sensitivities. All I had to do was add this snippet to my CSS file.

@media (prefers-reduced-motion: reduce) {
  nav a:hover {
    animation: none
  }
}

And we're done!

Back to Home
 Profile Picture
Profile Picture

About John Solly

I am a Senior Software Engineer with a focus on geospatial applications, based in the Columbus, OH metropolitan area. This blog is where I delve into the intricacies of GIS (Geographic Information Systems), offering deep dives into different components of the geospatial technology stack. For those who share a passion for GIS and its applications, you've found a spot to explore and learn.

Interested in collaborating or learning more about my work? Take a look at my portfolio for a showcase of my projects and expertise.

Comments

  • No comments yet.
Login to Comment