Question

I have an image with a border surrounding. I want to have the border fade in and out. Is this possible with opacity + webkit keyframes? Ideas?

Thanks

Answer 1

Here’s an example:

@keyframes border-pulsate {
    0%   { border-color: rgba(0, 255, 255, 1); }
    50%  { border-color: rgba(0, 255, 255, 0); }
    100% { border-color: rgba(0, 255, 255, 1); }
}

img {
    border: 20px solid cyan;
    animation: border-pulsate 2s infinite;
}

Here’s the fiddle: http://jsfiddle.net/RYT8L/4/

---

Note that in the real world, you’ll have to include all the vendor prefixes, or use Lea Verou‘s excellent tool called -prefix-free (which is what I’m using in that fiddle).