CODEWITHSUNDEEP
csscss-animations
AnApprentice
AnApprentice

Reputation: 110940

With CSS3, can I create keyframes that make border pulse in and out?

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

Upvotes: 6

Views: 31742

Answers (3)

Marco Allori
Marco Allori

Reputation: 3294

Try this pulsating border: DEMO (jsfiddle)

@-webkit-keyframes pulseBorder {
  from {
    border: solid 1px #f00;
  }
  to {
    border: solid 10px #f00;
  }
}

div {
  -webkit-animation-name: pulseBorder;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease;
  -webkit-animation-direction: alternate;
  -webkit-animation-duration: 0.5s;
  text-align: center;
  border: solid 1px #f00
}
<div id="content">
  hello
</div>

Upvotes: 9

James Bellaby
James Bellaby

Reputation: 168

I made the below to handle situations where the border color might be different for other elements.

This allows the use of one keyframe on multiple elements with different color borders. All you need to do is edit the rgba to be the color of the background.

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

#first {
    width: 50px;
    height: 50px;
    border: 5px solid cyan;
    animation: border-pulse 2s infinite;
}

#second {
    width: 50px;
    height: 50px;
    border: 5px solid red;
    animation: border-pulse 2s infinite;
}
<div id="first"></div>
<div id="second"></div>

Upvotes: 1

Joseph Silber
Joseph Silber

Reputation: 219910

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).

Upvotes: 21

Related Questions