Font change on CSS3 animation

Why does the font style of the background text change on applying css3 animation opacity and transform scale? I've some text contents in my page. I also have a click me link. When someone clicks "Click me!" I show a popup with css3 animation. But I observe the font change on animation.

HTML

<div class="paragraph">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tempor adipiscing odio vel vestibulum. Etiam at quam et mauris auctor porta. Vivamus egestas ipsum non accumsan facilisis. Curabitur vehicula, tellus ac tristique dictum, felis arcu aliquet est, ac vehicula sapien erat pharetra velit. Nunc sed eros non magna bibendum luctus sit amet ut massa. Sed tristique libero eu tortor fermentum auctor. Aliquam semper bibendum sem, quis interdum ipsum vehicula quis. Cras ornare arcu massa.
</div>
<div class="clickme">Click me!</div>
<div class="paragraph">
Nulla adipiscing luctus malesuada. Quisque eros mauris, luctus at vestibulum vel, porttitor non urna. Ut sodales adipiscing orci id porta. Donec ultrices magna et sem pulvinar cursus. Aenean at vulputate nisl, sit amet volutpat augue. Nunc sit amet interdum lectus, et luctus lectus. Curabitur tempus neque nec lorem bibendum, at posuere lorem dictum. Aenean dictum nisi tortor, et porttitor massa pulvinar eget.
</div>

<div class="popup">
    Here is my css animation popup!
</div>

CSS

body { -webkit-font-smoothing: subpixel-antialiased; }

.paragraph{
    font-size: 16px;
    line-height: 18px;
    margin: 10px 0;
}

.popup{
    display: none;
    position:absolute;
    top:100px;
    left: 100px;
    padding: 40px;
    background: #ff0;
    border: 4px solid #ccc;
}
.clickme{
    color: #00f;
    cursor: pointer;
}

.fade-in-scale{
	animation-name: fade-in-scale;
	-webkit-animation-name: fade-in-scale;	
	-moz-animation-name: fade-in-scale;

	animation-duration: .5s;	
	-webkit-animation-duration: .5s;
	-moz-animation-duration: .5s;	

	animation-timing-function: ease-in-out;	
	-webkit-animation-timing-function: ease-in-out;
	-moz-animation-timing-function: ease-in-out;	
	
	animation-fill-mode: forwards;
	-webkit-animation-fill-mode: forwards;	
	-moz-animation-fill-mode: forwards;
}

@keyframes fade-in-scale {
	0% {
		opacity: 1.0;
		-webkit-transform: scale(.7);
		-moz-transform: scale(.7);		
	}
	100% {
		opacity: 1;
		-webkit-transform: scale(1);
		-moz-transform: scale(1);
	}			
}

@-webkit-keyframes fade-in-scale {
	0% {
		opacity: 0;
		-webkit-transform: scale(.7);
		-moz-transform: scale(.7);		
	}
	100% {
		
		opacity: 1;
		-webkit-transform: scale(1);
		-moz-transform: scale(1);
	}		
}
.fade-out-scale{
	animation-name: fade-out-scale;
	-webkit-animation-name: fade-out-scale;	
	-moz-animation-name: fade-out-scale;

	animation-duration: .5s;	
	-webkit-animation-duration: .5s;
	-moz-animation-duration: .5s;	

	animation-timing-function: ease-in-out;	
	-webkit-animation-timing-function: ease-in-out;
	-moz-animation-timing-function: ease-in-out;	
	
	animation-fill-mode: forwards;
	-webkit-animation-fill-mode: forwards;	
	-moz-animation-fill-mode: forwards;
}

JavaScript

$('.clickme').bind('click',function(){
    $('.popup').show().addClass('fade-in-scale');
});