How can I add a CSS animation to this button?

Question

I have a set of 4 accordian tabs that's height increases when hovered on. I am trying to add a CSS animation so there is a smooth transition between it's inactive height to its height when hovered on. I would like it to be a smooth transition as well.

So far, I have tried using an animation for the height inside the object class:

button.accordions:hover {
  transition: height 0.5s ease;

  height: 75px;
}

This results in the buttons not changing height at all when hovered on.

Here is a link to my JSFiddle

anna · Answer 1 · 2018-10-08T07:47:25.813

1

The transition property should be set inside the button.accordions selector, not inside the button.accordions:hover selector.

button.accordions {
    max-height: 0;
    transition: max-height 0.5s ease;
}
button.accordions:hover {
    max-height: 75px;
}

edited Oct 08 '18 at 07:47

answered Oct 07 '18 at 19:38

anna

127
2
10

To state that one should not set `transition` inside the `:hover` rule is wrong. It depends on what one want to achieve, hence both rules can have the property set. – Asons Oct 08 '18 at 16:03
I actually meant that for this problem in particular, the transition property should be set out of the hover state. @LGSon the accepted answer also gives that tip (i.e. move the transition property out of the hover state). – anna Oct 08 '18 at 19:43
Where the, in this case, `transition` is declared is not the reason OP's code doesn't work, animation using `auto` is, and the syntax error (omit a unit value), and your answer implies it has to do with only where it is declared. Furthermore, you changed the code from `height` to `max-height` w/o any explanation what so ever, making the answer even more confusing. – Asons Oct 08 '18 at 20:20

score 1 · Accepted Answer · answered Oct 07 '18 at 19:44

Two things! In your fiddle, you don't have any units for your transition. It's just transition: height 0.5 ease;, it's missing the 's' for the timer.

Second, you need to have a starting point for your height - it doesn't transition from auto. So, for example, set height: 56px; on your button.accordions class as your starting point.

If you want the transition to grow and shrink, then move the transition: height 0.5s ease; out of :hover and stick it on the base button.accordions class.

How can I add a CSS animation to this button?

2 Answers2