CSS3 Transform Opacity Pulsate

Question

Есть ли способ пульсировать непрозрачность от 0 до 1 (повторить) медленно с преобразованием ключевых кадров CSS3, бесконечно? Или это требует jQuery или Javascript с непрозрачностью перехода внутри класса, который переключается на интервал?

Я пытаюсь преобразовать его в свои орбиты (внизу). (Я работаю на реальном фоне обоев эффект с несколькими непрозрачными изображениями плавающих в боковой панели изображение на приложение инсталлятора, я в здании в Objective C.)

.orbit1 
{ 
animation: myOrbit 200s linear infinite; 
} 

.orbit2 
{ 
animation: myOrbit2 200s linear infinite; 
} 

@keyframes myOrbit1 
{ 
    from { transform: rotate(0deg) translateX(150px) rotate(0deg) } 
    to { transform: rotate(360deg) translateX(150px) rotate(-360deg) } 
} 

@keyframes myOrbit2 
{ 
    from { transform: rotate(360deg) translateX(250px) rotate(-360deg) } 
    to { transform: rotate(0deg) translateX(250px) rotate(0deg) } 
} 

Answer 1

Вы можете сделать это путем добавления нескольких анимаций к элемент, например:

.orbit1 
 
{ 
 
    /* added for example reasons */ 
 
position :absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    margin-top: -100px; 
 
    margin-left: -100px; 
 
    width: 200px; 
 
    height: 200px; 
 
    background: red; 
 
    /* ---------- */ 
 
    
 
    animation: myOrbit1 20s linear infinite, Pulsate 4s linear infinite; 
 
} 
 

 
@keyframes myOrbit1 
 
{ 
 
    from { transform: rotate(0deg) translateX(150px) rotate(0deg) } 
 
    to { transform: rotate(360deg) translateX(150px) rotate(-360deg) } 
 
} 
 

 
@keyframes Pulsate { 
 
    from { opacity: 1; } 
 
    50% { opacity: 0; } 
 
    to { opacity: 1; } 
 
}

<div class="orbit1"></div>

I'ved изменены некоторые из ваших параметров (например, скорость анимации и минимальной непрозрачности) и добавлены некоторые спуфинга стиль для элемента для цель примера.

Редактировать

Я был первоначально думал, что заявления множественным rotate() были ошибочными, но @vals сообщил мне, why it was there (создать вращение счетчика на объекте). Я обновил ответ и узнал что-то новое.