Soy nuevo en el desarrollo web y parece que no puedo descifrar cómo cambiar el color de mi texto cuando lo desplazo y hacer que permanezca cambiado. Actualmente tengo esto:
.main{ color: white; font-size: 20px; } .main:hover{ animation: textchange 1s cubic-bezier(0.165, 0.84, 0.44, 1); } @keyframes textchange{ from{ color: white; } to { color:black; } } <p class=main> Lorem ipsum dolor sit amet </p>Entiendo por qué el color no se mantiene negro después de no pasar el cursor, pero todavía no sé cómo abordar esto. Ni siquiera estoy seguro de si esto es posible sin javascript.
Debes usar animation-fill-mode: forwards;
function enter() { const main = document.getElementById('main-with-javascript'); main.style.animation = 'textchange 4s cubic-bezier(0.165, 0.84, 0.44, 1)'; main.style.animationFillMode = 'forwards'; } function leave() { const main = document.getElementById('main-with-javascript'); main.style.animation = 'textchangeReverse 4s cubic-bezier(0.165, 0.84, 0.44, 1)'; } #main-with-javascript { color: #dddddd; font-size: 20px; } .main { color: #dddddd; font-size: 20px; animation: textchangeReverse 4s cubic-bezier(0.165, 0.84, 0.44, 1); animation-fill-mode: forwards; } .main:hover { animation: textchange 4s cubic-bezier(0.165, 0.84, 0.44, 1); /*Let the element retain the style values from the last keyframe when the animation ends*/ animation-fill-mode: forwards; } @keyframes textchange { from { color: #dddddd; } to { color: black; } } @keyframes textchangeReverse { from { color: black; } to { color: #dddddd; } } <h2>with css</h2> <p class='main'> Lorem ipsum dolor sit amet </p> <hr/> <h2>with css and javasctipt</h2> <p id='main-with-javascript' onmouseenter='enter()' onmouseleave='leave()'> Lorem ipsum dolor sit amet </p>Agregue esto a css pero
p.black { color: black; }Necesitas usar javascript para eso
document.querySelector(".main").addEventListener("mouseover", function(e) { this.classList.add("black"); }) .main{ color: rgb(206, 37, 37); font-size: 20px; } .main:hover{ animation-name: textchange; animation-duration: 1s; animation-iteration-count: infinite; } @keyframes textchange{ 0%{ color: rgb(0, 0, 0); } 100%{ color:black; } } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="github.css"> </head> <body> <main> <p class=main> Lorem ipsum dolor sit amet </p> </main> </body> </html>Debe configurar el recuento de iteraciones de la animación en infinito y dentro de los fotogramas clave para 0% configure el color en negro y para 100% configure el color negro también.