Creating Smooth Hover Effects for Menu Icons | Yordi Verkroost
It's been a while since I worked with stylesheets. I have always been a software developer focused mostly on backend functionality. Recently, however, I started using the Bear blogging platform for my personal website, which allows you to customize its built-in themes.
The menu of my website is a collection of icons that link to different pages. For example, ✍️ points to a page with an overview of all my blog posts. My goal for this and other menu icons was to animate them on hover, so they scale up.
A better way to create good-looking animations for your menu is by using transition. With a transition, you can define which properties of an element will be animated. This transition property is placed on the main element (not on the :hover selector). Then, on the :hover selector, you can use the transform property to define the type of animation on hover.
For more options and transformation effects, check out the documentation for the transition property and the transform property.
