Olá Breno, tudo bem?
Gostaria de parabenizar por se desafiar, a busca formas diferentes de praticar os exercícios
Quanto a primeira pergunta, você pode incluir diferentes animações na mesma keyframe usando a regra com parênteses @keyframes, como já feita por ti, no entanto, se você deseja criar animações mais complexas com diferentes valores a serem animados e lógica de interpolação diferente, é melhor usar várias keyframes separados, para evitar maiores complicações ou desorganização.
Quanto à segunda questão podemos utilizar seguinte tag:
input[type="checkbox"]:not(:checked) + label > svg{
animation: shake 2s linear, fill2 1s;
animation-fill-mode: forwards;
}
Observe que acessei o input e o valor desabilitado que é utilizando o :not que é um pseudo classe, que significa contrario, ou seja, o contrario chacked(checado) é o não checado(not(:checked))
Depois vamos criar as animações que no caso é a shake que eu repeti do Wiggle já criado por ti, e o fill2 que vai apenas deixar transparente mas é claro fique a vontade para alterar esses valores:
@keyframes shake {
0%, 7% {
transform: rotateZ(0);
}
15% {
transform: rotateZ(-15deg);
}
20% {
transform: rotateZ(10deg);
}
25% {
transform: rotateZ(-10deg);
}
30% {
transform: rotateZ(6deg);
}
35% {
transform: rotateZ(-4deg);
}
40%, 100% {
transform: rotateZ(0);
}
}
@keyframes fill2 {
0% {
fill: transparent;
}
}
fazendo essas alterações temos o seguinte resultado:
Espero ter ajudado! Qualquer dúvida que tiver, estou à disposição para ajudá-lo.
Sucesso
Um grande abraço e até mais!
Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!
