Project: https://codepen.io/hawkish/pen/PomvXNe
Hi, I’m a bit confused with triggering animation with css and javascript. In this app, I tried to make a congratulations screen if either player won, but I have no idea how to do it, and my attempts didn’t really amount to anything?
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 opacity:0 and opacity:1.
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 top or left value), then transitioning it onto the screen (by changing that top or 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.
can z-index be animated instead? also does that i mean i should create an animation in css and trigger it with javascript?
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
Sure, you can use keyframes as well, it gives a little more fine-grained control, and you can have a lot of fun with it… I’ve updated that demo pen with a keyframes animation, the JavaScript is the same (add and remove a class to trigger the animation).
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.