CSS Transition effect

Question

Transition must happen when we move from one value to another upon a event.

Here the visibility setting on an element:

.two {
  background-color: #9fa8da;
  position: absolute;
  visibility: hidden;
  transition: visibility 3ms ease-in;
}

Upon a button click, visibility is set to 'visible'

.two-show {
   visibility: visible;
}

However there is no animation effect.

Plnkr here:

http://plnkr.co/edit/4Fhb1Uj744BRwCDhebOP?p=info

possible duplicate of Animating non-animatable properties with CSS3 transitions — James Wright
– James Wright, Commented Jun 24, 2015 at 15:19

Patrick Murphy · Accepted Answer · 2015-06-24 15:18:50Z

2

Try adding this to .two{}:

-webkit-transition: visibility 30ms ease-in, -webkit-transform 3s;
-moz-transition: visibility 30ms ease-in;
-o-transition: visibility 30ms ease-in;

I wonder if 3ms is to fast?

answered Jun 24, 2015 at 15:18

Patrick Murphy

2,33916 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Muhammet · Accepted Answer · 2015-06-24 15:29:57Z

1

You can achieve the very same effect you want using the opacity property. Updated your plunker using this new approach. I also increased the transition time for the effect to be noticeable.

.two {
  background-color: #9fa8da;
  position: absolute;
  opacity: 0;
  transition: opacity 3s ease-in;
}

.two-show {
  opacity: 1;
}

edited Jun 24, 2015 at 15:29

Muhammet

3,31816 silver badges23 bronze badges

answered Jun 24, 2015 at 15:22

lucasnadalutti

5,9882 gold badges30 silver badges49 bronze badges

2 Comments

Patrick Murphy Over a year ago

I like this approach. Nice job

Muhammet Over a year ago

Beat you by 9 seconds :)

Collectives™ on Stack Overflow

CSS Transition effect

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related