Regra do :hover não sobrepõe regra de animação e vertical-align não é aplicado | HTML5 e CSS3 II: Turbinando as suas páginas

Fala pessoal,

Neste exercício cada div tem um padrão de animação e uma regra no CSS determina que, no :hover, a animação seja pausada e o background-color mude para darkviolet.

A animação do div número V, no entanto, que transiciona por 5 cores diferentes, não está respeitando a regra do :hover. Apesar da animação ser interrompida, ela pára na cor que estava no momento, e não muda para darkviolet, como a regra do :hover pede.

No meu entendimento a especificidade está correta. O .shape:hover, além de estar depois na ordem do CSS, tem uma especificidade maior que .shape.

Uma dúvida secundária: eu tentei centralizar o conteúdo dos div's. O text-align funcionou sem problemas, como sempre, mas eu ainda não consegui me entender com o vertical-align. Tentei colocar um h1 dentro do div e aplicar a regra a esse, além de aplicar no prório div. Também tentei aplicar no .container. Nada funcionou.

Conseguem saber o que eu não estou enxergando?

Segue o CodePen.io e abaixo o código.

Obrigado!

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="https://fonts.googleapis.com/css?family=Crimson+Text:400,400i,600|Open+Sans+Condensed:700" rel="stylesheet">
    <link rel="stylesheet" href="transition.css">
    <title>Transition</title>
</head>
<body>
    <div class="container">
        <div class="shape one"><h1>I</h1></div>
        <div class="shape two"><h1>II</h1></div>
        <div class="shape three"><h1>III</h1></div>
        <div class="shape four"><h1>IV</h1></div>
        <div class="shape five"><h1>V</h1></div>
    </div>
</body>
</html>

CSS

* {
    box-sizing: border-box;
    margin: 0;
}
.container {
    height: 100vh;
    max-width: 50vw;
    margin: 0 auto;
    border: 2px solid hotpink;
}
.shape {
    height: 20vh;
    width: calc(10vw - 0.8px);
    border: 2px solid black;
    float: left;
    background-color: lightgray;
    font-family: 'Crimson Text', serif;
    font-size: 2em;
    text-align: center;
    vertical-align: middle;
    transition: background-color 0.5s;
}
h1 {
    vertical-align: middle;
}
.one {
    animation: gira 2s infinite linear alternate;
}
@keyframes gira {
    0% {
        transform: rotate(0);
    }
    50% {
        transform: rotate(180deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
.two {
    position: relative;
    animation: quica 0.5s infinite alternate;
}
@keyframes quica {
    from {
        top: 0;
    }
    to {
        top: 10em;
    }
}
.three {
    animation: arredonda 0.5s infinite alternate;
}
@keyframes arredonda {
    from {
        border-radius: 0;
    }
    to {
        border-radius: 50%;
    }
}
.four {
    animation: encolhe 3s infinite alternate-reverse ease-out;
}
@keyframes encolhe {
    from {
        transform: scale(0);
    }
    to {
        transform: scale(1);
    }
}
.five {
    animation: aparece 1s infinite linear;
}
@keyframes aparece {
    0% {
        background-color: lightgray;
    }
    25% {
        background-color: deepskyblue;
    }
    50% {
        background-color: gold;
    }
    75% {
        background-color: olive;
    }
    100% {
        background-color: crimson;
    }
}
.shape:hover {
    animation-play-state: paused;
    background-color: darkviolet;
}

Abraços,

Maurice

Mergulhe em programação