A nice animate transition for corner label on images

animate_showlabel.css

a.shop-picture span {
  position: absolute;
  display: block;
  background-position: 196px 0px;
  background-repeat: no-repeat;
  width: 282px;
  height: 192px;
  margin: -186px 0 0 -6px;
  animation: showlabel 1s;
  -moz-animation: showlabel 1s;
  -webkit-animation: showlabel 1s;
  -o-animation: showlabel 1s;
}

a.shop-picture span.new {
  background-image: url(/label-new.png);
}

@keyframes showlabel{
  0%   {background-position: 34px -163px;}
  50%  {background-position: 34px -163px;}
  100% {background-position: 197px 0px;}
}

@-moz-keyframes showlabel{
  0%   {background-position: 34px -163px;}
  50%  {background-position: 34px -163px;}
  100% {background-position: 197px 0px;}
}

@-webkit-keyframes showlabel{
  0%   {background-position: 34px -163px;}
  50%  {background-position: 34px -163px;}
  100% {background-position: 197px 0px;}
}

@-o-keyframes showlabel{
  0%   {background-position: 34px -163px;}
  50%  {background-position: 34px -163px;}
  100% {background-position: 197px 0px;}
}