Boris Kamp Boris Kamp - 1 year ago 46
CSS Question

CSS animation moving and changing color

I am not that familiar with CSS animations. My client want to achieve the following result when hovering the


so to be clear:

  1. the square's move from left to right and vice versa

  2. when the square moves, the line underneath it changes color

the top image it the start state, the middle is during the effect (50%) and the bottom image is the end stage.

Is this achievable with only CSS or do I need JS as well?
How would I approach this?

Answer Source

I created a quick and dirty JSFiddle here:

As you can see, it is possible with just CSS. In this example I used pseudo elements (::before and ::after) to create most of the elements.

You mentioned "Im not that familiar with CSS animations". For this I used transitions.

transition: left 1000ms, right 1000ms, box-shadow 1000ms;

Each comma separated element is a value that will transition between 2 points. This transition happens on a change of the div, this can be on a hover, but also when applying another div (Through JS).

To created the effect of the lines gradually shifting in color I used another element that slides on top of the original two lines. The new lines originally have 0 width, but on hover they gain 100% width. With a transition transition: width 1000ms; this happens gradually.

Try not to use my code as your final example, as it is somewhat ugly. But I hope it gets the point across.