Solucionado
Gostaria de saber por que a transition se situa no .imagem-beneficios e não no :hover? Tem alguma regra específica? Por que no meu pensamento lógico a transição ocorre quando o mouse passa por cima, por isso, deveria estar na { } do hover?
.imagem-beneficios {
width: 60%;
opacity: 1;
transition: 400ms;
}
.imagem-beneficios:hover {
opacity: 0.3;
}
Faz um teste: coloca 5 segundos de tempo, só para ver uma coisa. Quando o transition ta no imagem-beneficios, quando você colocar ou tirar o mouse de cima do elemento, ele vai demorar os 5 segundos, já o transition no hover, só quando você coloca o mouse ele demora 5 segundos, quando você tira ele instantaneamente volta ao normal. Resumindo: o tempo do transition no hover só vai acontecer quando você estiver com o mouse em cima.
Fala Paulo, tudo bem?
Então, isso ocorre, pois a propriedade transition, meio que fica analisando o estilo e esperando uma mudança para aplicar aquele delay, então não faz muito sentido colocar aonde a alteração ja ocorreu.
Espero ter ajudado, caso ainda estiver com dúvida nos conte aqui abaixo. Bons estudos :D