[CSS] Déclencher une animation au clic en CSS par Mojo_CC - page 1

Bonjour,

J'aimerais déclencher une animation au clic en CSS.

J'ai trouvé un tuto super intéressant : https://www.screenfeed.fr/blog/css3-animation-on-click-without-js-0828/

L'animation se déclenche sans soucis après le clic. Mais j'aimerais faire en sorte que la petite flèche verte reste en place une fois qu'elle est apparue. Impossible...

Voilà le code HTML :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="fr" xml:lang="fr" xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>CSS3 animation on click | Screenfeed</title>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
		<meta http-equiv="Content-Language" content="fr" />
		<link rel="stylesheet" type="text/css" href="style.css"/>
		<link rel="stylesheet" type="text/css" href="link.css"/>
	</head>
	<body>
		<h1>CSS3 animation on click</h1>
		<div id="content">

			<!-- Link -->

			<a class="file_pdf" href="#">Download this pdf file</a>

			<!-- eo link -->

		</div>
		<div id="footer">
			<p><a href="http://scri.in/css3click">&laquo;&nbsp;CSS3 animation on click without JS&nbsp;&raquo; on www.screenfeed.fr</a></p>
			<script type="text/javascript" src="http://www.google-analytics.com/ga.js"></script>
			<script type='text/javascript' src="/wp-content/themes/screenfeed/js/ga.js"></script>
		</div>
	</body>
</html>

Et le CSS de l'animation :

@charset "UTF-8";

.file_pdf {
	position: relative;
	display: inline-block;
	padding: 24px 0 0 50px;
	min-height: 26px;
	background: url(pdf-icon.png) -17px 0 no-repeat;
}

.file_pdf:before {
	content: '';
	display: block;
	width: 0px;
	height: 14px;
	position: absolute;
	left: 28px;
	top: -6px;
	opacity: 0;
	background: transparent url(pdf-icon.png) 0 0 no-repeat;
}

.file_pdf:active:before {
	width: 13px;
	opacity: 0;
}

.file_pdf:not(:active):before {
	animation: goDown .4s ease-in-out;
	transition: width .4s step-start;
}


@keyframes goDown {
	from { opacity: 1; top: 36px; }
	60%  { opacity: 1; }
	to   { opacity: 1; top: -6px; }
}

J'ai l'impression d'avoir tout essayé