Anyone can help? Thanks
You need to animate the right properties. Right now it looks like you’re trying to transition from
display: none to
display: block. That’s not possible, what should the element look like after 50% of the transition, half
none and half
block? You can only transition between numerical values, for example
As @jsdisco has pointed out, transitions happen between numerical values. For you, the opacity might be the way to go, or position, or size.
Position might be simply setting the message box to an absolute positioning, and starting it off the screen (say with a negative
left value), then transitioning it onto the screen (by changing that
left to a positive value within the bounds of the viewport).
Sizing, much the same: start the message box with a width and height of 0 (and an overflow of hidden), and transition to your preferred display size.
There are quite a few options available to you, but transitions can only be applied to quantitative values. No number, no transition.
Like with the
display property, you can’t animate the
z-index (yes it’s a numerical value, but it defines the stacking order of elements on a page - an element can either be below or above another element, not something in between).
You don’t necessarily need an animation with keyframes, the transition property works just fine. I entertained myself with creating a little demo here:
Man you have no idea how much I love you for this, it works wonderfully! I’m wondering if i can also be done with animation? or is just adding a class like this the best option? Thanks again mate
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.