Hey, everyone!
I'm trying to get this glitch text CSS script (
http://codepen.io/lbebber/pen/ypgql) working in Twine but something seems to be off and just doesn't seem to be working as it should.
I have put all the CSS code in a passage tagged "stylesheet" and added HTML code in the normal passage, yet all I get is the simple GLITCH text without any effect.
Any idea why this might be happening?
--A
Comments
Chrome's CSS viewer says there is a property error in the animation: call in both the .glitch:before and .glitch:after selectors.
Tried it in Firefox and it worked properly.
Thank you for the help!
1. According to canius css-animation Chrome only supports the -webkit-animation version of the property, so you need to edit the .glitch:before and .glitch:after rules and duplicate each of the animation properties so that there is also a -webkit-animation one.
The end result will look something like the following: 2. As you know Chrome does not support the standard @keyframes selector so you need to include a @-webkit-keyframes as well.
To do this first take a copy of the @keyframes noise-anim selector and its contents, then paste that below the original and change the copy's selector to @-webkit-keyframes noise-anim. Do the same for the @keyframes noise-anim-2 and its contents except this time rename the inserted copy as @-webkit-keyframes noise-anim-2
If you do the above correctly it will work in Chrome. (I tested it in v39.0.2171.95)