С помощью CSS3 я могу создавать ключевые кадры, которые создают и пропускают границы?

Question

У меня есть изображение с границей. Я хочу, чтобы граница исчезала и исчезала. Возможно ли это с ключевыми кадрами opacity + webkit? Идеи?

Спасибо

Answer 1

Вот пример:

@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;
}

Вот скрипка: http://jsfiddle.net/RYT8L/4/

---

Обратите внимание, что в реальном мире вам нужно будет включить все префиксы вендоров или использовать Lea Verou , который называется -prefix-free (вот что Я использую в этой скрипке).

Answer 2

попробуйте эту пульсирующую границу

<div id="content">
   hello
</div>

@-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
}

DEMO