Social Media Dashboard (HTML, SASS, CSS Grid, BEM, JS)

Community feedback

• 

  wuts•880

  @waldosmutsPosted about 3 years ago

  You can animate the transition by adding a transition property to your elements. I set my body transition to 0.4s for all elements, should work for you too.

  Marked as helpful

  1

  ---

  

  Ben•770

  @BenConfigPosted about 3 years ago

  @waldosmuts Hi wuts, thank you for commenting.

  I added a transition on the body and it is now animating. But do you know why the colors transition at different times? i.e. the body background color seems to take longer to transition than the card background color. Whereas on your page everything changes at the same time.

  0

  

  wuts•880

  @waldosmutsPosted about 3 years ago

  @BenConfig I seem to remember having the same issue, sorry to say but I can't remember how I solved it nor how to reproduce it, I'll let you know if I do happen to find it though

  0

  

  Mark Mitchell•1,820

  @markup-mitchellPosted about 3 years ago

  @BenConfig seems like your transition is 200ms in a lot of places and 400ms on body. might be time for another css custom property so you can set and adjust them all together?

  Marked as helpful

  1

  

  Ben•770

  @BenConfigPosted about 3 years ago

  @markup-mitchell Thank you, I hadn't thought of using a CSS custom property for animations. It's a good idea.

  0