developingidea

Tóbiás éppen drótot rág.

http://instagram.com/p/bmSYl4lBLW/

CSS:

.instagramvideo { margin-top: 40px; margin-bottom: 50px; display: block; border: 15px solid #f6f6f6; box-shadow: 0 0 15px #f4f4f4; border-bottom-width: 60px; width: 630px; height: 600px; overflow:hidden; -webkit-animation: bounce ease-in-out 1; -moz-animation: bounce ease-in-out 1; animation: bounce ease-in-out 1; -webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-duration: 4s; -moz-animation-duration: 4s; animation-duration: 4s; }

@-webkit-keyframes bounce { 0% { -webkit-transform:  rotate(860deg) scale(0.1);  } 1% { margin-left: -1700px; }  40% { margin-left: -1700px; -webkit-transform: rotate(-860deg) scale(0.2)}  70% { margin-left: 210px; -webkit-transform: rotate(0deg) scale(0.5) }  80% { margin-left: -91px;  } 90% { margin-left: 20px; }  100% { margin-left: 0px; } }

@-moz-keyframes bounce {  0% { -moz-transform:  rotate(860deg) scale(0.1);  } 1% { margin-left: -1700px; }  40% { margin-left: -1700px; -moz-transform: rotate(-860deg) scale(0.2)}  70% { margin-left: 210px; -moz-transform: rotate(0deg) scale(0.5) }  80% { margin-left: -91px;  } 90% { margin-left: 20px; }  100% { margin-left: 0px; } }

@keyframes bounce { 0% {transform: scale3d(0.1,0.1,1);  margin-left: -1700px; } 1% { margin-left: -1700px}  40% { margin-left: -1700px}  70% { margin-left: 210px; }  80% { margin-left: -51px;  } 90% { margin-left: 20px; }  100% { margin-left: 0px; } }

HTML:

<div class="instagramvideo"><iframe src="http://instagram.com/p/<a videód id-je>/embed/"  style="border: 1px solid #eee; width: 640px; height: 800px; overflow: hidden; margin-left: -8px; margin-top: -100px" scrolling="no" frameborder="0" ></iframe></div>