Animacion y efecto css3

HTML

<body class="body">
<div id ="wrapper" class="wrapper">

		<div id="botones_grow" class="botones_grow">
			
				<div class="button_grow dimensiones">
					<div class="margenes">
						Div
					</div>
				</div>
								
				<a href="#" target="_blank" class="button_shrink dimensiones">
					<div class="margenes">
						Enlace
					</div>
				</a>				
			
				<input type="button" value="Input" class="button_pulse dimensiones">
				
				<button class="button_pulse dimensiones ">Button</button>
			
	</div>
</div>
	
	<footer class="pie">
		Sandra Campos Suárez
	</footer>
</body>

SCSS

@CHARSET "ISO-8859-1";

.wrapper{
	
	width: 100%;
	height: 0%;
}

.body{
	
	background-color: #55717b;
	font-family: "arial", sans-serif;
	
}


.botones_grow{
	
	width: 556px;
	height: 114px;
	margin: auto;
	margin-bottom: 20px;
	margin-top: 100px;
}

.margenes{
	
	margin-top: 40px;	
}

.botones_grow a{
	text-decoration:none;
}

.botones_grow input{
	
	-webkit-appearance: none;
	border: none;
}

.botones_grow button{
	
	-webkit-appearance: none;
	border: none;
}

.dimensiones{
	width: 120px;
	height: 100px;
	background-color: #abe2f7;
	color: #55717b;
	font-size: 20px;
	text-align: center;
	margin: 7px;
	cursor: pointer;
	font-weight: bold;
	display: inline-block;
}



/*Efecto grow - aumentar*/
.button_grow{
  	vertical-align: middle;
  	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: grayscale;
  	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
}

.button_grow:hover{
	
	-webkit-transform: scale(2.2);
 	 transform: scale(1.2);
	background-color: #2222;
}

.button_grow:active, .button_grow:focus {
	background-color: #f7c0ab;
}



/*Efecto shrink - encoger*/
.button_shrink{
  	vertical-align: middle;
  	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: grayscale;
  	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
}

.button_shrink:hover{
	
	-webkit-transform: scale(0.8);
 	 transform: scale(0.8);
	background-color: #e2f7ab;
}


.button_shrink:active, .button_shrink:focus {
	background-color: #f7c0ab;
}

* Efecto Pulse - aumentar y encoger */
@-webkit-keyframes button_pulse {
  30% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }

  80% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
}

@keyframes button_pulse {
  30% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }

  80% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
}

.button_pulse {
  	vertical-align: middle;
  	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing:...