Bild Zoomer
<head>
<script> window.console = window.console || function(t) {};</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<script> if (document.location.search.match(/type=embed/gi)) { window.parent.postMessage("resize", "*");}</script>
<style type="text/css">
figure#burnsbox {overflow: hidden; position: relative; padding-top: 30%; width: 50%; margin: 0 auto;}
figure#burnsbox img {animation: zoom 12s alternate infinite; position: absolute; top: 0; left:-5%; width: 110%; height: 110%;}
</style>
</head>
<body>
<figure id="burnsbox">
<img src="../Bilder/Life.jpg" alt="HKH">
</figure>
<script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-2c7831bb44f98c1391d6a4ffda0e1fd302503391ca806e7fcc7b9b87197aec26.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script id="rendered-js" >
function randomizer(min, max) {
randomresult = Math.random() * (max - min) + min;
return randomresult;}
var maxscale = 1.9;
var minscale = 1.1;
var minMov = 5;
var maxMov = 10;
var scalar = randomizer(minscale, maxscale).toFixed(2);
var moveX = randomizer(minMov, maxMov).toFixed(2);
moveX = Math.random() < 0.5 ? -Math.abs(moveX) : Math.abs(moveX);
var moveY = randomizer(minMov, maxMov).toFixed(2);
moveY = Math.random() < 0.5 ? -Math.abs(moveY) : Math.abs(moveY);
var prefix = "";
if (CSSRule.WEBKIT_KEYFRAMES_RULE) {prefix = "-webkit-";} else
if (CSSRule.MOZ_KEYFRAMES_RULE) {prefix = "-moz-";}
window.onload = function () {
sheet = document.createElement('style');
document.head.appendChild(sheet);
var anim = "@" + prefix + "keyframes burnseffect { 10% { " + prefix + "transform: scale(1); } 90% { " + prefix + "transform: scale(" + scalar + " ) translate(" + moveX + "%," + moveY + "%); } 100% { " + prefix + "transform: scale(" + scalar + ") translate(" + moveX + "%," + moveY + "%); } }";
sheet.appendChild(document.createTextNode(anim));
document.head.appendChild(sheet);
monae = document.querySelector("figure#burnsbox img");
monae.style.webkitAnimationName = 'burnseffect';
monae.style.mozAnimationName = 'burnseffect';
monae.style.animationName = 'burnseffect';};
</script>
</body>
</html>