- Agregar una transición adicional a la vigente
- Aprender la secuencia de propiedades que permite tener más de una transición en un elemento.
- Tener Visual Studio Code instalado
¡Genial! Ahora que ya hemos visto como modificar el color del texto, el reto consiste en que cambies la transición para que ahora logres hacer un cambio de color y un cambio de tamaño del texto, para que resalte todavía más nuestro elemento. Ambas transiciones deben tener un timing diferente. Investiga en Google o en w3schools por si necesitas algunos tips.
Posible solución
La solución consiste en agregar a la propiedad transition la propiedad que necesitamos modificar.
Vamos a agregar esas propiedades extra en nuestro código:
.feature__title {
margin-top: 50px;
font-weight: 500;
font-size: 24px;
font-family: 'Open Sans',sans-serif;
margin-bottom: 35px;
text-decoration: none;
text-shadow: #025157 1px 1px 2px;
transition: color .3s ease-in-out;
&:hover {
color:#67b54b;
}
}::Pro-tip
¿Puedes agregar más transiciones en una sola línea? Intenta hacerlo con más propiedades en la línea de transition, pero puedes usar transition: all ... si el intervalo de tiempo es el mismo para todas las transiciones.
::