SVG responsive animation

by kthornbloom

HTML

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="400px" height="400px" viewBox="0 0 400 400" enable-background="new 0 0 400 400" xml:space="preserve">
<g id="device">
	<path id="outline" fill="none" stroke="#878787" stroke-width="3" stroke-miterlimit="10" d="M352.5,233.58
		c0,2.717-2.202,4.92-4.919,4.92H37.419c-2.717,0-4.919-2.203-4.919-4.92V36.42c0-2.717,2.202-4.92,4.919-4.92h310.162
		c2.717,0,4.919,2.203,4.919,4.92V233.58z"/>
	
		<rect id="screen" x="47.5" y="45.5" fill="none" stroke="#878787" stroke-width="3" stroke-miterlimit="10" width="291" height="155"/>
	<circle id="dot" fill="none" stroke="#878787" stroke-width="3" stroke-miterlimit="10" cx="193.223" cy="218.275" r="7.379"/>
</g>
<g id="stand">
	<path id="stand_body" fill="none" stroke="#878787" stroke-width="3" stroke-miterlimit="10" d="M254.751,286.175
		c-7.786-8.988-16.864-15.134-23.467-21.954c-3.997-4.131-4.919-17.721-4.919-25.721h-68.039c0,8-0.922,21.054-4.919,25.184
		c-6.602,6.821-15.681,13.908-23.467,22.896c-1.575,1.818,1.499,4.92,4.742,4.92c19.462,0,95.863,0,115.327,0
		C253.252,291.5,256.325,287.993,254.751,286.175z"/>
	
		<line id="stand_highlight" fill="none" stroke="#878787" stroke-width="3" stroke-linecap="round" stroke-miterlimit="10" x1="137" y1="284.5" x2="248" y2="284.5"/>
</g>
<g id="keyboard">
	<path fill="none" stroke="#878787" stroke-width="3" stroke-linecap="round" stroke-miterlimit="10"...

CSS

@keyframes periferals {
  0% {opacity:1;}
  100% {opacity:0;}
}

#keyboard, #mouse, #stand {
  
  animation: perifferals .5s infinite;
}

@keyframes device {
  0% {
    transform:rotate(0deg) scale(1);
  }
  15% {
    transform:rotate(0deg) scale(1);
  }
  20% {
    transform:rotate(0deg) scale(.8);
  }
  35% {
    transform:rotate(0deg) scale(.8);
  }
  40% {
    transform:rotate(90deg) scale(.7);
  }
  55% {
    transform:rotate(90deg) scale(.7);
  }
  60% {
    transform:rotate(90deg) scale(.4) scaleY(.8);
  }
  95% {
    transform:rotate(90deg) scale(.4) scaleY(.8);
  }
  100% {
    transform:rotate(0deg) scale(1);
  }
} 

@keyframes screen {
  0% {
    transform:scaleY(1);
  }
  35% {
    transform:scaleY(1);
  }
  40% {
    transform:scaleY(1.1) scaleX(.9);
  }
  95% {
    transform:scaleY(1.1) scaleX(.9);
  }
  100% {
    transform:scaleY(1);
  }
}

@keyframes stand {
  0% {
    transform:scaleY(1);
    opacity:1;
  }
  15% {
    transform:scaleY(1);
    opacity:1;
  }
  20% {
    transform:scaleY(0);
    opacity:0;
  }
  95% {
    transform:scaleY(0);
    opacity:0;
  }
  100% {
    transform:scaleY(1);
    opacity:1;
  }
}

@keyframes keyboard {
  0% {
     transform:scale(1) translateY(0);
  }
  15% {
    transform:scale(1) translateY(0);
  }
  20% {
    transform:scale(1.09) translateY(-20%) translateX(8%);
    opacity:1;
  }
  30% {
    transform:scale(1.09) translateY(-20%) translateX(8%);
    opacity:1;
  }
  35% {
    opacity:0;
  }
  95% {
      opacity:0;
  }
  100% {
     transform:scale(1) translateY(0);
  }
}

#screen {
    transform-origin:top;
  animation:screen 4s infinite;
}

#device {
  transform-origin:center;
  animation:device 4s infinite;
}

#stand {
    transform-origin:center;
  animation:stand 4s infinite;
}

#keyboard {
  transform-origin:center;
  animation:keyboard 4s infinite;
}