¿Cómo puedo recrear este efecto CSS de corazón pulsante en react-native-web?
@keyframes heartbeat { 0% { transform: scale( .75); } 20% { transform: scale( 1); } 40% { transform: scale( .75); } 60% { transform: scale( 1); } 80% { transform: scale( .75); } 100% { transform: scale( .75); } } #heart { position: relative; width: 100px; height: 90px; animation: heartbeat 1s infinite; } #heart:before, #heart:after { position: absolute; content: ""; left: 50px; top: 0; width: 50px; height: 80px; background: red; -moz-border-radius: 50px 50px 0 0; border-radius: 50px 50px 0 0; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%; } #heart:after { left: 0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; transform-origin: 100% 100%; } <div id="heart"></div>Encontré la API animada pero no puedo ver nada sobre los fotogramas clave
Puede usar react-native-reanimated: https://docs.swmansion.com/react-native-reanimated/docs/next/api/LayoutAnimations/keyframeAnimations/ usando esta biblioteca puede hacer animaciones de fotogramas clave. Consulte el enlace para obtener más detalles.