CSS smooth transition for an icon move-CodePudding

I'm looking for CSS to make an image transition 5px to the right smoothly. I have the move and opacity sorted, but am unsure how to make it run smoothly and not seem like a big jump when hovering.

Have the following code but don't really know how to do the transition correctly. Any help is much appreciated!

.naviconmain {
  transition: all 2s ease;
  opacity: .7;
  display: block;
  align: right;
  margin-left: auto;
  margin-right: 15px;
}
.naviconmain:hover {
  opacity: 1;
  position: relative;
  left: 4px;
}

CodePudding user response：

To make the transition smooth, you can add the transition property to the .naviconmain:hover class. The transition property specifies the duration, timing function, and property that should be transitioned smoothly.

For example:

.naviconmain:hover {
  opacity: 1;
  position: relative;
  left: 4px;
  transition: all 0.5s ease-in-out; /* duration of 0.5s, easing function of ease-in-out */
}

This will make the transition of the left property smooth over a duration of 0.5 seconds, with an easing function of ease-in-out. You can adjust the duration and easing function to your liking.

You can also specify the properties that should be transitioned smoothly by replacing all with a list of comma-separated properties, such as left, opacity.

CodePudding user response：

Thanks for all the help - very much appreciated. I've gone with:

.naviconmain {
  transition: all 2s ease;
  opacity: .7;
  display: block;
  align: right;
  margin-left: auto;
  margin-right: 15px;
 }
.naviconmain:hover {
  opacity: 1;
  position: relative;
  transform: translateX(4px);
  transition: all 0.5s ease-in-out;
}