A Pen created on CodePen.io. Original URL: https://codepen.io/thebabydino/pen/bGPMOpJ.
Got the idea after seeing this and thought a lot of it could be simplified.
For example, these 6 declarations are completely unnecessary:
width: 100%; height: 100%;
left: 50%; top: 50%;
translate: -50% -50%;
padding: 3px
inset: -3px
, a single declaration instead of six, achieves the exact same thing.
Writing the from
keyframe is also unnecessary, since the angle is given an initial-value
of 0deg
in the @property
block. So the from
keyframe can be omitted and it gets auto-generated from the initial-value
in the @property
block.
I then also had the idea of enhancing this to both make it work for img
elements (which can’t have pseudos) and make the animated glowy border more interesting by rounding one or both ends, creating a tail, making the glow grainy…
… so enter the SVG filter
enhancement version you see here! No pseudos!
If the work I’ve been putting out since early 2012 has helped you in any way or you just like it and you wish me to be able to continue putting out stuff, please consider one of the following:
Thank you!