Estoy aprendiendo animación y quiero hacer una animación de dos pasos: 1. los elementos caen 2. al hacer clic comienzan a pulsar. Desafortunadamente, después del clic, los elementos vuelven a sus posiciones iniciales (antes de la animación de caída). ¿Qué estoy haciendo mal? Aquí hay un ejemplo en Codepen: https://codepen.io/ju-rat/pen/VwMbZVL?editors=1010
Aquí está el código:
function pulsation() { var elem = document.getElementsByClassName("bulb"); elem[0].style.animation = "pulse 0.5s linear infinite 0s alternate"; elem[1].style.animation = "pulse 1s linear infinite 2s alternate"; elem[2].style.animation = "pulse 0.5s linear infinite 0s alternate"; elem[3].style.animation = "pulse 1s linear infinite 2s alternate"; } html { background-color: rgba(171, 183, 183); } * { margin: 10px; } #container { width: 100%; display: flex; } #b1 { height: 50px; width: 50px; border-radius: 100%; background-color: red; } #b2 { height: 50px; width: 50px; border-radius: 50%; background-color: yellow; filter: none; } #b3 { height: 50px; width: 50px; border-radius: 50%; background-color: green; filter: none; } #b4 { height: 50px; width: 50px; border-radius: 50%; background-color: blue; filter: none; } #b2 { animation: fall2 1s ease-out; animation-delay: 0s; animation-fill-mode: forwards; } @keyframes fall2 { 0% { transform: translateY(0%); } 100% { transform: translateY(400%); } } #b3 { animation: fall 2s ease-out; animation-delay: 1s; animation-fill-mode: forwards; } @keyframes fall { 0% { transform: translateY(0%); } 100% { transform: translateY(400%) translateX(100%); } } @keyframes pulse { 0% { filter: none; } 50% { filter: brightness(80%) drop-shadow(0px 1px 14px rgba(224, 231, 34)); } 100% { filter: brightness(140%) drop-shadow(0px 1px 14px rgba(251, 255, 255)); } } } <div id=c ontainer> <div class="bulb" id="b1" onclick="pulsation()"></div> <div class="bulb" id="b2"></div> <div class="bulb" id="b3"></div> <div class="bulb" id="b4"></div> </div> <p>Click on the red circle</p>Se sobrescribe fall 2s ease-out con pulse 0.5s linear , por lo que se pierde todo lo relacionado con la fall .
Hasta donde yo sé, no hay forma de combinar ambos efectos (pulso y caída) en una animación CSS. Es uno u otro, pero podría estar equivocado aquí. Al menos, puede hacer trampa y colocar un elemento secundario dentro de cada bombilla, y aplicarle el efecto de pulso en lugar de la bombilla en sí:
function pulsation() { var elem = document.getElementsByClassName("bulb"); elem[0].children[0].style.animation = "pulse 0.5s linear infinite 0s alternate"; elem[1].children[0].style.animation = "pulse 1s linear infinite 2s alternate"; elem[2].children[0].style.animation = "pulse 0.5s linear infinite 0s alternate"; elem[3].children[0].style.animation = "pulse 1s linear infinite 2s alternate"; } html { background-color: rgba(171, 183, 183); } * { margin: 10px; } #container { width: 100%; display: flex; } .bulb { position: relative; height: 50px; width: 50px; border-radius: 50%; } #b1 { background-color: red; } #b2 { background-color: yellow; filter: none; animation: fall2 1s ease-out; animation-delay: 0s; animation-fill-mode: forwards; } #b3 { background-color: green; filter: none; animation: fall 2s ease-out; animation-delay: 1s; animation-fill-mode: forwards; } #b4 { background-color: blue; filter: none; } .inner { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: inherit; border-radius: 50%; margin: 0; } @keyframes fall2 { 0% { transform: translateY(0%); } 100% { transform: translateY(400%); } } @keyframes fall { 0% { transform: translateY(0%); } 100% { transform: translateY(400%) translateX(100%); } } @keyframes pulse { 0% { filter: none; } 50% { filter: brightness(80%) drop-shadow(0px 1px 14px rgba(224, 231, 34)); } 100% { filter: brightness(140%) drop-shadow(0px 1px 14px rgba(251, 255, 255)); } } <div id=c ontainer> <div class="bulb" id="b1" onclick="pulsation()"> <div class="inner"></div> </div> <div class="bulb" id="b2"> <div class="inner"></div> </div> <div class="bulb" id="b3"> <div class="inner"></div> </div> <div class="bulb" id="b4"> <div class="inner"></div> </div> </div> <p>Click on the red circle</p>(Nota: también limpié tu CSS, reduje las repeticiones, etc.)
Parece que olvidaste agregar transform: translateY(400%) translateX(100%); en la animación pulsante aquí tienes
function pulsation() { var elem = document.getElementsByClassName("bulb"); elem[0].style.animation = "pulse 0.5s linear infinite 0s alternate"; elem[1].style.animation = "pulse 1s linear infinite 2s alternate"; elem[2].style.animation = "pulse 0.5s linear infinite 0s alternate"; elem[3].style.animation = "pulse 1s linear infinite 2s alternate"; } html { background-color: rgba(171, 183, 183); } * { margin: 10px; } #container { width: 100%; display: flex; } #b1 { height: 50px; width: 50px; border-radius: 100%; background-color: red; } #b2 { height: 50px; width: 50px; border-radius: 50%; background-color: yellow; filter: none; } #b3 { height: 50px; width: 50px; border-radius: 50%; background-color: green; filter: none; } #b4 { height: 50px; width: 50px; border-radius: 50%; background-color: blue; filter: none; } #b2 { animation: fall2 1s ease-out; animation-delay: 0s; animation-fill-mode: forwards; } @keyframes fall2 { 0% { transform: translateY(0%); } 100% { transform: translateY(400%); } } #b3 { animation: fall 2s ease-out; animation-delay: 1s; animation-fill-mode: forwards; } @keyframes fall { 0% { transform: translateY(0%); } 100% { transform: translateY(400%) translateX(100%); } } @keyframes pulse { 0% { filter: none; transform: translateY(400%) translateX(100%); } 50% { filter: brightness(80%) drop-shadow(0px 1px 14px rgba(224, 231, 34)); transform: translateY(400%) translateX(100%); } 100% { filter: brightness(140%) drop-shadow(0px 1px 14px rgba(251, 255, 255)); transform: translateY(400%) translateX(100%); } } } <div id=c ontainer> <div class="bulb" id="b1" onclick="pulsation()"></div> <div class="bulb" id="b2"></div> <div class="bulb" id="b3"></div> <div class="bulb" id="b4"></div> </div> <p>Click on the red circle</p>