Пульсатный бутстрап модальный фон

Question

Есть ли способ «пульсировать» модальный фон, исходящий от 50% красного до 100% красного и возвращающегося на 50% красного и бесконечного цикла?

http://jsfiddle.net/j8n5u8xy/

<a title="Sobre" data-placement="bottom" data-toggle="modal" href="#Sobre" class="btn btn-primary"> <i class="fa fa-quote-left"></i> </a> 
<div class="modal bs-modal-lg" id="Sobre" tabindex="-1" role="dialog" aria-labelledby="SobreLabel" aria-hidden="true"> 
<div class="modal-dialog modal-lg"> 
<div class="modal-content"> 
<div class="modal-header alert-danger"> 
<h4 class="modal-title" id="myModalLabel"><i class="fa fa-warning"></i>Danger</h4> 
</div> 
<div class="modal-body" style="padding-top: 15px; padding-bottom: 25px;"> 
<h2>Danger!</h2> 
</div> 
<div class="modal-footer"> 
<a class="btn btn-default" data-dismiss="modal">Close</a> 
</div> 
</div> 
</div> 
</div> 

Bootstrap имеет 2 сборки в классах:

.modal-backdrop.fade { 
    filter: alpha(opacity=0); 
    opacity: 0; 
} 
.modal-backdrop.in { 
    filter: alpha(opacity=50); 
    opacity: .5; 
} 

Можно ли чередовать как в количестве времени, 2-х секунд, например?

Благодаря

Answer 1

Вы должны использовать css animations. Это всего лишь один пример того, что вы могли бы сделать, но вы должны поиграть с разными суб-свойствами, которые имеет свойство animation.

.modal-backdrop { 
    background-color: red; 
    animation: warn 2s infinite alternate; 
    -webkit-animation: warn 2s infinite alternate; 
} 

/* Chrome, Safari, Opera */ 
@-webkit-keyframes warn { 
    from {opacity: 0;} 
    to {opacity: 0.5;} 
} 

@keyframes warn { 
    from {opacity: 0;} 
    to {opacity: 0.5;} 
} 

Для получения дополнительной информации о поддержке в различных браузерах, увидеть это link с помощью CSS трюков. Вот ваш обновленный jsfiddle