Animar Dropdown menu com CSS

Oi galera. Beleza?

Faz um tempo que não mexo com CSS e quase esqueci tudo. kkk

Comecei num projeto para treinar e achei um problema que não consigo resolver.

Fiz um menu dropdown básico, e preciso animar o dropdown, mas não consigo de jeito algum.

Tentei utilizar o transition mas não vai de maneira alguma.

Deem uma olhada no código e vê se é possivel me dar uma ajuda.

Valeu! Boa semana.

Código HTML:

<nav>
 <div class="dropdown">
 <button class="dropbtn"><a href="#"></a>MENU</button>
 <div class="dropdown-content">
 <a href="#">Página Inicial</a>
 <a href="#">Como funciona?</a>
 <span><img style="width:32px; height:32px;" src="img/default.png"/>Seja bem vindo, Vítor.</span>
 <a class="log1" href="#">Perfil<span style="padding:0; float:right; color:#FFF;" class="oi" data-glyph="person"></span></a>
 <a class="log2" href="#">Sair<span style="padding:0; float:right; color:#FFF;" class="oi" data-glyph="account-login"></span></a>
 </div>
 </div>
 </nav>

	Código CSS:

.dropbtn {
 background:url(../img/space.png);
	width:90px;
	height:50px;
	text-align:right;
 color: white;
	padding:0px;
 font-size: 19px;
 border: none;
 cursor: pointer;
	margin-top:0px;
	outline:none;
	-webkit-transition: all 500ms cubic-bezier(0.250, 0.100, 0.250, 1.000);
 -moz-transition: all 500ms cubic-bezier(0.250, 0.100, 0.250, 1.000);
 -o-transition: all 500ms cubic-bezier(0.250, 0.100, 0.250, 1.000);
 transition: all 500ms cubic-bezier(0.250, 0.100, 0.250, 1.000); /* ease (default) */
	float:left;
}

.dropbtn a {

	width:28px;
	height:21px;
	margin-top:3px;
	background: url(../img/three.png);
	float:left;
}

.dropbtn:hover {

	opacity:0.5;
}

.dropdown {
	float:left;
	width:95px;
	height:50px;
	margin-top:20px;
 position: relative;
 display: inline-block;
}

/ Dropdown Content (Hidden by Default) /

.dropdown-content {
 display: block;
 position: absolute;
	top:50px;
 background-color: #131920;
 min-width: 250px;
 box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
 z-index: 1;
}

/ Links inside the dropdown /
.dropdown-content a {

 color: #fff;
 padding: 12px 16px;
 text-decoration: none;
	font-weight: 300;
	font-size:15px;
 display: block;
	border-bottom:1px solid #0E1319;

}

.dropdown-content span {

 color: #7D9EC4;
 padding: 12px 16px;
 text-decoration: none;
	font-weight: 300;
	font-size:15px;
 display: block;
}

.dropdown-content img {

	margin-right:10px;
	vertical-align: middle;
}

/ Change color of dropdown links on hover /
.dropdown-content a:hover {

	background-color: #19222B;

}

/ Show the dropdown menu on hover /
.dropdown:hover .dropdown-content {

 display: block;

}