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.
Result:
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
@keyframes move01 {
0% {top:0; }
100% {top:600; } }
(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!!
HTML files and JS files attached:
Jonray HTML files - transition.zip (83.5 KB)
2 HTML files attached - for the the problematic one I’ve removed the other 19 strips for simplicity.