Lightning Effect CSS

Question

EDIT: Я в основном стараюсь достичь результата, который демонстрирует эта веб-страница. http://codepen.io/Chrislion_me/pen/rVqwbO

Я довольно новичок во всем мире HTML/CSS. То, что я пытаюсь сделать для проекта в uni, - это создать домашнюю страницу, на которой есть фотография грозы на заднем плане, покрытая наложением, которое слишком отфильтровывает часть изображения Picture of current website.

В принципе, фото должно оставаться фиксированным там, где оно есть, поэтому, если я прокручиваю дальше по странице, он не перемещается как таковой [Стационарная молниеносная буря] [2].

Так что это работает отлично, проблема в том, что я не могу заставить свою молнию работать правильно, буря должна вспыхивать пару раз каждые ~ 8 секунд.

В зависимости от того, как я играю с кодом, он обычно просто белым, а затем каждые 8 ​​секунд он мигает изображением, а затем снова белым. Я не уверен, где я ошибся, я добавил часть моего кода ниже, если это поможет - это просто раздел, на котором размещается изображение и кнопки, я могу опубликовать больше CSS, если это необходимо.

Заранее благодарен! :)

HTML

<div id="bg" class="banner flashit"> 
<p>TEST TEXT</p> 
<ul class="actions"> 
<li><a href="#" class="button special big">Click here</a></li> 
</ul> 
</div> 

CSS

#bg{ 
    padding: 16em 0 13em 0; 
    background-attachment: fixed; 
    background-image: url("images/overlay.png"), url("../images/banner.jpg"); 
    background-position: center top; 
    background-size: cover; 
    line-height: 1.75; 
    text-align: center; 
    z-index: -2; 
} 
.banner { 
    padding: 16em 0 13em 0; 
    background-attachment: fixed; 
    background-image: url("images/overlay.png"), url("../images/banner.jpg"); 
    background-position: center top; 
    background-size: cover; 
    line-height: 1.75; 
    text-align: center; 
    -webkit-filter: brightness(3); 
    filter: brightness(3); 
    -o-filter: brightness(3); 
    -moz-filter: brightness(3); 
    z-index: -1; 
} 
.flashit{ 
    -webkit-animation: flash ease-out 10s infinite; 
    -moz-animation: flash ease-out 10s infinite; 
    animation: flash ease-out 10s infinite; 
    animation-delay: 2s; 
} 
@-webkit-keyframes flash { 
    from { opacity: 0; } 
    92% { opacity: 0; } 
    93% { opacity: 0.6; } 
    94% { opacity: 0.2; } 
    96% { opacity: 0.9; } 
    to { opacity: 0; } 
} 
@keyframes flash { 
    from { opacity: 0; } 
    92% { opacity: 0; } 
    93% { opacity: 0.6; } 
    94% { opacity: 0.2; } 
    96% { opacity: 1; } 
    to { opacity: 0; } 
} 

Answer 1

Есть несколько вопросов, с помощью CSS для анимации. В частности, ключевые кадры.

В ключевых кадрах, если вы используете from{} и to{}, это то же самое, что и «начало» и «конец». Вы не можете также использовать проценты между ними. От и до всего вы можете использовать, когда идете по этому маршруту. При использовании from{} и to{} не может быть «средних» шагов.

Если вы хотите использовать проценты для ключевых кадров, все этапы должны быть в процентах. Поэтому вместо использования from() используйте 0% и вместо to{} используйте 100%.

В дополнение к этому, поскольку у вас есть все проценты, установленные на 90%, а анимация длится 10 секунд, начиная с 0% непрозрачности, был период около 11 секунд (2 секунды задержки, затем 9 секунд анимации), где изображение просто прозрачно, и кажется, что ничего нет. Изменение процента до начало мигание в начале анимации, а затем заканчивающееся на непрозрачном изображении, помогает это значительно.

В конечном итоге изменения лишь сводилось к тонкой настройке ключевых кадров:

@-webkit-keyframes flash { 
    0% { opacity: 1; } 
    2% { opacity: 0; } 
    3% { opacity: 0.6; } 
    4% { opacity: 0.2; } 
    6% { opacity: 0.9; } 
    100% { opacity: 1; } 
} 
@keyframes flash { 
    0% { opacity: 1; } 
    2% { opacity: 0; } 
    3% { opacity: 0.6; } 
    4% { opacity: 0.2; } 
    6% { opacity: .9; } 
    100% { opacity: 1; } 
} 

В будущем это часто легче получить полезные ответы, если вы можете настроить jsFiddle вашего вопроса.

Я создал jsFiddle here с модифицированными ключевыми кадрами и разными изображениями, так как у меня нет доступа к вашим изображениям.