CODEWITHSUNDEEP
css
Petros Kalas
Petros Kalas

Reputation: 63

create a css notification pop up

I want to create a popup notification, I have a div with initial top -200px 

#onthefly-main {
  height: 190px;
  width: 100px;
  position: fixed;
  top: -200px;
  right: 10px;
  -webkit-transition: all 0.5;
  transition: all 0.5;

I also have defined a class with top: 20px;

#onthefly-main.visible {
    top: 20px;
    -webkit-transition: all 0.5;
    transition: all 0.5;
}

var onClick = function() {
  document.getElementById('onthefly-main').classList.add('visible');

};

This makes the div visible but the transition is not been displayed as animation.

Here is the fiddle http://jsfiddle.net/Bnuy7/2638/

Upvotes: 1

Views: 688

Answers (2)

Josh
Josh

Reputation: 4332

You're missing the time unit after your transition delay value.

Change this: -webkit-transition: top 0.5;

to this: -webkit-transition: top 0.5s;

Upvotes: 0

Clayton Engle
Clayton Engle

Reputation: 581

It works for me when I add transition: all ease 0.5s to your main ID. Maybe just missing the transition animation style (ease) and the unit for time (0.5s) is the problem?

Upvotes: 1

Related Questions