Ken Burns Effect

Folder: Ken Burns Effect

Footer code:

<!-- folder ken burns -->
<!-- footer code for ken burns starts here -->
    <script src="http://apsara1.weebly.com/files/theme/prefixfree.min.js"></script>
<!-- footer code for ken burns ends here -->

Header code

<!-- folder ken burns -->
<!-- header code for ken burns starts here -->
        <link rel="stylesheet" type="text/css" href="http://apsara1.weebly.com/files/theme/kenburns.css" />
<!-- header code for kenburns ends here -->

Morph

---

Grow

---

Shrink

---

Side Pan

---

Vertical Pan

---

Focus

---

Flexbox

---

Responsive Flexbox

---

Social Icons

Code that makes this happen

<div id="images">
    <a href="https://www.google.com/?gws_rd=ssl">
        <img class="fblogo morph" src="https://www.weebly.com/editor/uploads/3/1/7/9/31791623/custom_themes/544500809516456357/files/img/icon/g2.png" alt="google">
    </a>
    <a href="https://www.facebook.com/">
        <img class="fblogo morph" src="https://www.weebly.com/editor/uploads/3/1/7/9/31791623/custom_themes/544500809516456357/files/img/icon/fb.png" alt="facebook">
    </a>
    <a href="https://www.linkedin.com/">
        <img class="fblogo morph" src="https://www.weebly.com/editor/uploads/3/1/7/9/31791623/custom_themes/544500809516456357/files/img/icon/li.png" alt="linked in">
    </a>
    <a href="https://twitter.com/">
        <img class="fblogo morph" src="https://www.weebly.com/editor/uploads/3/1/7/9/31791623/custom_themes/544500809516456357/files/img/icon/twit.png" alt="twitter">
    </a>
  <!-- images placed inside block elements to deal with a Firefox rendering bug affecting  scaled flexbox images -->
</div>
<style>

.fblogo {
    padding: 0 5px 0 5px;
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    height: 50px;
}

#images{
    text-align:center;
}
/*MORPH*/
.morph {
  -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
}

.morph:hover {
  border-radius: 50%;
  -webkit-transform: rotate(360deg);
     -moz-transform: rotate(360deg);
       -o-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
          transform: rotate(360deg);
}

<!-- end html for morpinig image -->

</style>

grow in 5 seconds

grow in 10 seconds