Animer une liste UL LI

Bonjour,

Je souhaite animer un sous-menu dans mon menu burger. Pour animer l'icône, j'agis sur le :hover mais comment faire pour le sous-menu à l'ouverture et non au survol ?
Je vous remercie de votre aide.

                <li><i class="material-icons icone_menu">line_weight</i><span style="color:#424242">Articles</span><a class="lien-sous-menu" href=javascript:sousMenu()><i id="btn-sous-menu" class="btn-sous-menu material-icons ">add</i></a>
					<ul id="sub-nav-mobile" class="sub-nav-mobile">
                        <li><a class="<?=($page=="articles")?"active" : ""; ?>" href="index.php?page=articles">Articles 1</a></li>
                        <li><a class="<?=($page=="articles")?"active" : ""; ?>" href="index.php?page=articles">Articles 2</a></li>
					</ul>
				</li>

    /* Pour animer le "plus" */
    #btn-sous-menu:hover {
        transform: rotate(-90deg);
        transition-duration: 1s;
    }