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

[Anonymous]

Мне трудно понять, как можно добиться следующего с помощью ключевых кадров CSS.

В настоящее время у меня есть слайд-шоу, содержащее 4 слайда, которые синхронизированы с ключевыми кадрами и настроены на бесконечный цикл.

Когда каждый слайд появляется в «рамке», я хочу, чтобы некоторый текст появлялся и пульсировал только один раз с задержкой, а затем исчезал. Похож на эту демонстрацию, за исключением того, что я не хочу использовать jQuery. Демо

Если кто-нибудь сможет помочь, я буду очень признателен.

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

Мой CSS для слайд-шоу такой

@-webkit-keyframes slider {
0%, 20%, 100%{ left: 0 }
25%, 45%{ left: -100% }
50%, 70%{ left: -200% }
75%, 95%{ left: -300% }
}
@-moz-keyframes slider {
0%, 20%, 100%{ left: 0 }
25%, 45%{ left: -100% }
50%, 70%{ left: -200% }
75%, 95%{ left: -300% }
}
@keyframes slider {
0%, 20%, 100%{ left: 0 }
25%, 45%{ left: -100% }
50%, 70%{ left: -200% }
75%, 95%{ left: -300% }
}

#carousel .video-list, #descriptionCarousel .description-list {
position: relative;
width: 400%;
height: 100%;
left: 0;
top: 0;
bottom: 0;
animation: slider 45s cubic-bezier(.93,.11,.32,.94) infinite;
-webkit-animation: slider 45s cubic-bezier(.93,.11,.32,.94) infinite;
-moz-animation: slider 45s cubic-bezier(.93,.11,.32,.94) infinite;
-o-animation: slider 45s cubic-bezier(.93,.11,.32,.94) infinite;
-ms-animation: slider 45s cubic-bezier(.93,.11,.32,.94) infinite;
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
animation-play-state: paused;
}


Подробнее здесь: https://stackoverflow.com/questions/226 ... es-on-loop