For fun (and experimentation) I just designed a new swipe transition and used @elusien’s css animation converter. It involves 20 vertical blue strips fading in/out in a synchronised way to give horizontal movement effect.
The HTML works fine with opacity changes but then I’ve hit a problem and I need @elusien’s help if possible.
I wanted to design a similar wipe but with the blue bars moving downwards (I was then going to rotate them 90 degrees to get a horizontal movement), so I tried animating the new animation with the keyfames
(moving the bar down 600 pixels, just as example).
Now, using keyframes, the animation worked OK in Chrome, but once I converted this code to JS, and hid the animation line, the animation failed to work.
I’ve scratched my head why this doesn’t work for an hour, and would dearly love to find out why it won’t! @elusien, I wondered if you might take a quick look if you have a spare moment or two and see where I’m going wrong? Thanks!!
(Sorry for delay - had to take the dog for a long walk…)
Yes, it works, so THANKS! I hadn’t thought of putting both “top” AND "“300px” in quotes.
(incidentally does your converter add both sets of quotes when converting say top:600 ? I have no time to check right now but will do so asap). Thanks anyway - I should have tried that.
But I do notice that “opacity”: 0, works without the 0 in quotes. Seems a bit illogical to me…
My fault, sorry, I sent the file with the wrong figures.
It puts the word ‘top’ in quotes since this is an option. It looks at the parameter ‘600’ but does not do anything with it as it isn’t intelligent enough to know what to do with every parameter for every option. So if it is already in quotes it leaves it in quotes, if it isn’t then it doesn’t.