Transition não funciona

[GuiMoraesDev]

To na aula 017, completei o desafio, mas a transição ta muito seca entre os icones, mesmo colocando o transition Quero que o icone de fechar tenha 200ms de transição, mas não pega, to achando que possa ser os seletores diferentes

    .header-store .icon {
        position: absolute;
        top: 0;
        left: 0;
        background-color: white;
        display: none;
        cursor: pointer;
        padding: 4px;
        box-sizing: border-box;
        transform: translateX(3px);
        transition: transform 200ms linear;
    }

    .header-store .icon.-active {
        display: block;
    }

    .header-store .icon[src='img/close.png'] {
        transform: translateX(325px);
        width: 40px;
    }

    .header-store .icon[src='img/search.png'] {
        width: 38px;
    }

[GuiMoraesDev]

Descobri! O css já estava no elemento desde sempre, mas deveria estar apenas quando eu clicasse nele. Coloquei ele pra sói aplicar quando ele estivesse com a classe "-active" e resolveu

Era isso .header-store .icon[src='img/close.png'] {

Troquei pra isso .header-store .icon.-active[src='img/close.png'] {