scale()とwidth, heightを使用した拡大縮小サンプル

* {
  margin: 0;
  padding: 0;
}

.foo,
.bar {
  width: 50px;
  height: 50px;
  margin-bottom: 10px;
  background: url(pumpkin.png) no-repeat right bottom;
}

.foo {
  -webkit-animation: foo-ani 2s ease-out infinite alternate;
  animation: foo-ani 2s ease-out infinite alternate;
  margin-bottom: 10px;
  border: 10px solid #C00;
}

@-webkit-keyframes foo-ani {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    -webkit-transform: scale(2);
    transform: scale(2);
  }
}
@keyframes foo-ani {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    -webkit-transform: scale(2);
    transform: scale(2);
  }
}
.bar {
  -webkit-animation: bar-ani 2s ease-out infinite alternate;
  animation: bar-ani 2s ease-out infinite alternate;
  border: 10px solid #00C;
}
@-webkit-keyframes bar-ani {
  0% {
    width: 50px;
    height: 50px;
  }
  100% {
    width: 100px;
    height: 100px;
  }
}
@keyframes bar-ani {
  0% {
    width: 50px;
    height: 50px;
  }
  100% {
    width: 100px;
    height: 100px;
  }
}