Les Animations CSS - Croître à partir du centre

espère que tout est bon.

Je suis en train de travailler sur un jeu et je veux animer des boîtes.

Je veux une boîte de démarrer à partir de petites et ensuite progresser vers l'extérieur, avec toutes les arêtes sont de plus en plus au même moment, dans un effet qui ressemble, c'est croissante vers l'extérieur à partir du centre.

Le meilleur de l'animation j'ai jusqu'à présent est la suivante: il pousse la hauteur et la largeur de la zone que je veux, mais commence à partir de la gauche, et en haut. Je voudrais pour commencer à partir d'un point central.

J'ai regardé les propriétés d'animation sur W3 et rien ne semble correspondre au bateau.

  .box_2_gen{

    animation-duration: 0.25s;
    animation-name: createBox;

    position: relative;

    background: #FFEDAD;

    border: black solid;
    border-width: 1px;
    border-radius: 15px;

    width: 98px;
    height: 98px;

    margin: 10px;

    float: left;
}



@keyframes createBox{
    from{
        height:0px;
        width: 0px;

    }
    to{
        height: 98px;
        width: 98px;
    }
}

EDIT: Ma question peut sembler comme un autre semblable, mais je voulais juste savoir comment le faire en utilisant seulement de l'image clé.

Merci, Alex

Double Possible de Développez div du milieu au lieu de juste en haut et à gauche à l'aide de CSS
Juste, et j'ai vu cette solution mais je voulais utiliser une image-clé de l'approche. Cependant, comme on le voit par la réponse ci-dessous, il semble être un mélange de transformer et de l'image clé.

OriginalL'auteur alexp2603 | 2017-03-06