Animações CSS3

Galera estou com um problema aqui com meu CSS3 e uma imagem, quero que quando eu passar o mouse sobre a DIV que contém a imagem, a imagem aumente suavemente e quando eu tirar o mouse ela diminua suavemente, mas o que acontece só é o primeiro caso, ou seja, ela aumenta suavemente, mas quando eu tiro a imagem diminui rapidamente, como resolver isso?

<!DOCTYPE html>
<html>
	<head>
		<title>Bairro</title>
		<meta charset="UTF-8">
		<link rel="stylesheet" href="css/bairro.css">
	</head>
	<body>
		<section class="main">
			<header class="header">
				
			</header>
			<section class="sec-div" class="not-work">
				<div class="div-nbr">
					<figure class="fig">
						<img src="img/01.jpg">
					</figure>
					<div class="black"></div>
					<p>My Neighbourhood - 1</p>
					<article>Notícia notícia notícia notícia notícia notícia notícia notícia notícia notícia notícia notícia notícia notícia notícia notícia notícia notícia notícia notícia notícia notícia notícia notícia notícia notícia notícia notícia notícia notícia notícia notícia notícia notícia notícia notícia notícia notícia notícia notícia notícia notícia notícia notícia notícia notícia notícia notícia notícia notícia notícia notícia notícia notícia notícia notícia notícia notícia notícia notícia notícia notícia notícia notícia notícia notícia notícia notícia notícia notícia notícia</article>
					<div class="lyr"><a href="#"></a></div>
				</div>
			</section>

			<footer class="footer">
				
			</footer>
		</section>
	</body>
</html>

Aqui está o cssfile

* {
	margin: 0;
	padding: 0;
}

.header {
	width: 100%;
	height: 500px;
	background-color: #C7F464;
}

.sec-div {
	width: 100%;
	height: 100%;
	background-color: #4ECDC4;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: center;
}

.div-nbr {
	width: 30%;
	height: 350px;
	background-color: #FF6B6B;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;


}

.div-nbr p{
	position: absolute;
	top: 5%;
	font-size: 28px;
	font-family: arial;
	letter-spacing: 1px;
	color: #fff;
	font-weight: lighter;
}

.div-nbr article {
	width: 80%;
	height: 60%;
	position: absolute;
	top: 25%;
	font-size: 20px;
	color: #fff;
	font-weight: lighter;
	overflow: hidden;
}

.black {
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #000;
	opacity: 0.75;
}

.lyr {
	position: absolute;
	width: 100%;
	height: inherit;
}

.lyr a {
	position: absolute;
	width: 100%;
	height: inherit;
}

.fig {
	position: absolute;
	width: 100%;
	height: inherit;
	overflow: hidden;
}

.fig > img {
	height: inherit;
}

@keyframes animathover {
	from {
		height: 100%;
	}
	to {
		height: 120%;
	}
}

@keyframes animatnothover {
	from {
		height: 120%;
	}
	to {
		height: 100%;
	}
}

.div-nbr:hover img, .not-work img{
	/*height: 120%;
	transition-property: all;
	transition-duration: 1s;
	transition-timing-function: ease;
	transition-delay: 0.1s;*/

	animation-name: animathover;
	animation-duration: 1.5s;
	animation-timing-function: ease;
	animation-delay: 0.1s;
	animation-iteration-count: normal;
	animation-direction: alternate;
	animation-play-state: running;
}

.not-work {
	animation-name: animatnothover;
	animation-duration: 1s;
	animation-timing-function: ease-out;
}

.footer {
	width: 100%;
	height: 500px;
	background-color: #556270;
}