Animated Fullscreen Icon

In this example below you will see how to do a Animated Fullscreen Icon with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by brendeng, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright brendeng ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Animated Fullscreen Icon</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>


  
  
      <style>
      /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
      html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

html {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

q, blockquote {
  quotes: none;
}

q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none;
}

a img {
  border: none;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
  display: block;
}

/* -------------------------------- 

xBase rules

-------------------------------- */
html * {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
  height: 100%;
}

body {
  font-size: 1.6rem;
  font-family: sans-serif;
  color: #333333;
  background-color: #46ae00;
  line-height: 1.6;
  text-align: center;
  height: 100%;
}

a {
  color: #62c169;
  text-decoration: none;
}

img, embed, object, video {
  max-width: 100%;
}

/* -------------------------------- 

xModules - reusable parts of our design

-------------------------------- */
/* -------------------------------- 

xLayout - main components 

-------------------------------- */
main {
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.icon {
  width: 54px;
  height: 54px;
  display: block;
  overflow: show;
}

.icon svg {
  max-width: 100%;
}

main {
  position: absolute;
}

.fullscreen {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  display: block;
  position: relative;
}
.fullscreen .fs-icon {
  -webkit-transition: prefixed-for-transition(-webkit-, 0.5s ease-out);
  -moz-transition: prefixed-for-transition(-moz-, 0.5s ease-out);
  -ms-transition: prefixed-for-transition(-ms-, 0.5s ease-out);
  -o-transition: prefixed-for-transition(-o-, 0.5s ease-out);
  transition: 0.5s ease-out;
}
.fullscreen .fs-icon .outline {
  fill: #82d44b;
}
.fullscreen .fs-icon .arrow {
  fill: #82d44b;
  -webkit-transition: prefixed-for-transition(-webkit-, fill 1s ease);
  -moz-transition: prefixed-for-transition(-moz-, fill 1s ease);
  -ms-transition: prefixed-for-transition(-ms-, fill 1s ease);
  -o-transition: prefixed-for-transition(-o-, fill 1s ease);
  transition: fill 1s ease;
}
.fullscreen .fs-icon .tl {
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transform-origin: 50%;
  -moz-transform-origin: 50%;
  -ms-transform-origin: 50%;
  -o-transform-origin: 50%;
  transform: 50%;
  -webkit-transition: prefixed-for-transition(-webkit-, 0.5s ease-out);
  -moz-transition: prefixed-for-transition(-moz-, 0.5s ease-out);
  -ms-transition: prefixed-for-transition(-ms-, 0.5s ease-out);
  -o-transition: prefixed-for-transition(-o-, 0.5s ease-out);
  transition: 0.5s ease-out;
  animation: tl 1s ease-in-out;
}
.fullscreen .fs-icon .tr {
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transform-origin: 50%;
  -moz-transform-origin: 50%;
  -ms-transform-origin: 50%;
  -o-transform-origin: 50%;
  transform: 50%;
  -webkit-transition: prefixed-for-transition(-webkit-, 0.5s ease-out);
  -moz-transition: prefixed-for-transition(-moz-, 0.5s ease-out);
  -ms-transition: prefixed-for-transition(-ms-, 0.5s ease-out);
  -o-transition: prefixed-for-transition(-o-, 0.5s ease-out);
  transition: 0.5s ease-out;
  animation: tr 1s ease-in-out;
}
.fullscreen .fs-icon .bl {
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transform-origin: 50%;
  -moz-transform-origin: 50%;
  -ms-transform-origin: 50%;
  -o-transform-origin: 50%;
  transform: 50%;
  -webkit-transition: prefixed-for-transition(-webkit-, 0.5s ease-out);
  -moz-transition: prefixed-for-transition(-moz-, 0.5s ease-out);
  -ms-transition: prefixed-for-transition(-ms-, 0.5s ease-out);
  -o-transition: prefixed-for-transition(-o-, 0.5s ease-out);
  transition: 0.5s ease-out;
  animation: bl 1s ease-in-out;
}
.fullscreen .fs-icon .br {
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transform-origin: 50%;
  -moz-transform-origin: 50%;
  -ms-transform-origin: 50%;
  -o-transform-origin: 50%;
  transform: 50%;
  -webkit-transition: prefixed-for-transition(-webkit-, 0.5s ease-out);
  -moz-transition: prefixed-for-transition(-moz-, 0.5s ease-out);
  -ms-transition: prefixed-for-transition(-ms-, 0.5s ease-out);
  -o-transition: prefixed-for-transition(-o-, 0.5s ease-out);
  transition: 0.5s ease-out;
  animation: br 1s ease-in-out;
}
.fullscreen:hover .fs-icon {
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
  transform: scale(1.1);
  -webkit-transition: prefixed-for-transition(-webkit-, 0.5s ease-out);
  -moz-transition: prefixed-for-transition(-moz-, 0.5s ease-out);
  -ms-transition: prefixed-for-transition(-ms-, 0.5s ease-out);
  -o-transition: prefixed-for-transition(-o-, 0.5s ease-out);
  transition: 0.5s ease-out;
}
.fullscreen:hover .fs-icon .arrow {
  fill: #fff;
  -webkit-transition: prefixed-for-transition(-webkit-, fill 1s ease);
  -moz-transition: prefixed-for-transition(-moz-, fill 1s ease);
  -ms-transition: prefixed-for-transition(-ms-, fill 1s ease);
  -o-transition: prefixed-for-transition(-o-, fill 1s ease);
  transition: fill 1s ease;
  -webkit-transition: prefixed-for-transition(-webkit-, transform 0.5s ease-out);
  -moz-transition: prefixed-for-transition(-moz-, transform 0.5s ease-out);
  -ms-transition: prefixed-for-transition(-ms-, transform 0.5s ease-out);
  -o-transition: prefixed-for-transition(-o-, transform 0.5s ease-out);
  transition: transform 0.5s ease-out;
}
.fullscreen:hover .fs-icon .tl {
  -webkit-transform: translate(-4px, -4px);
  -moz-transform: translate(-4px, -4px);
  -ms-transform: translate(-4px, -4px);
  -o-transform: translate(-4px, -4px);
  transform: translate(-4px, -4px);
}
.fullscreen:hover .fs-icon .tr {
  -webkit-transform: translate(4px, -4px);
  -moz-transform: translate(4px, -4px);
  -ms-transform: translate(4px, -4px);
  -o-transform: translate(4px, -4px);
  transform: translate(4px, -4px);
}
.fullscreen:hover .fs-icon .bl {
  -webkit-transform: translate(-4px, 4px);
  -moz-transform: translate(-4px, 4px);
  -ms-transform: translate(-4px, 4px);
  -o-transform: translate(-4px, 4px);
  transform: translate(-4px, 4px);
}
.fullscreen:hover .fs-icon .br {
  -webkit-transform: translate(4px, 4px);
  -moz-transform: translate(4px, 4px);
  -ms-transform: translate(4px, 4px);
  -o-transform: translate(4px, 4px);
  transform: translate(4px, 4px);
}
.fullscreen:active .fs-icon {
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
  transform: scale(1.1);
  -webkit-transition: prefixed-for-transition(-webkit-, 0.5s ease-out);
  -moz-transition: prefixed-for-transition(-moz-, 0.5s ease-out);
  -ms-transition: prefixed-for-transition(-ms-, 0.5s ease-out);
  -o-transition: prefixed-for-transition(-o-, 0.5s ease-out);
  transition: 0.5s ease-out;
}
.fullscreen:active .fs-icon .arrow {
  fill: #82d44b;
  -webkit-transition: prefixed-for-transition(-webkit-, fill 1s ease);
  -moz-transition: prefixed-for-transition(-moz-, fill 1s ease);
  -ms-transition: prefixed-for-transition(-ms-, fill 1s ease);
  -o-transition: prefixed-for-transition(-o-, fill 1s ease);
  transition: fill 1s ease;
  opacity: 0;
}
.fullscreen:active .fs-icon .tl {
  -webkit-transform: translate(-60px, -60px);
  -moz-transform: translate(-60px, -60px);
  -ms-transform: translate(-60px, -60px);
  -o-transform: translate(-60px, -60px);
  transform: translate(-60px, -60px);
  -webkit-transition: prefixed-for-transition(-webkit-, 0.2s ease-out);
  -moz-transition: prefixed-for-transition(-moz-, 0.2s ease-out);
  -ms-transition: prefixed-for-transition(-ms-, 0.2s ease-out);
  -o-transition: prefixed-for-transition(-o-, 0.2s ease-out);
  transition: 0.2s ease-out;
}
.fullscreen:active .fs-icon .tr {
  -webkit-transform: translate(60px, -60px);
  -moz-transform: translate(60px, -60px);
  -ms-transform: translate(60px, -60px);
  -o-transform: translate(60px, -60px);
  transform: translate(60px, -60px);
  -webkit-transition: prefixed-for-transition(-webkit-, 0.2s ease-out);
  -moz-transition: prefixed-for-transition(-moz-, 0.2s ease-out);
  -ms-transition: prefixed-for-transition(-ms-, 0.2s ease-out);
  -o-transition: prefixed-for-transition(-o-, 0.2s ease-out);
  transition: 0.2s ease-out;
}
.fullscreen:active .fs-icon .bl {
  -webkit-transform: translate(-60px, 60px);
  -moz-transform: translate(-60px, 60px);
  -ms-transform: translate(-60px, 60px);
  -o-transform: translate(-60px, 60px);
  transform: translate(-60px, 60px);
  -webkit-transition: prefixed-for-transition(-webkit-, 0.2s ease-out);
  -moz-transition: prefixed-for-transition(-moz-, 0.2s ease-out);
  -ms-transition: prefixed-for-transition(-ms-, 0.2s ease-out);
  -o-transition: prefixed-for-transition(-o-, 0.2s ease-out);
  transition: 0.2s ease-out;
}
.fullscreen:active .fs-icon .br {
  -webkit-transform: translate(60px, 60px);
  -moz-transform: translate(60px, 60px);
  -ms-transform: translate(60px, 60px);
  -o-transform: translate(60px, 60px);
  transform: translate(60px, 60px);
  -webkit-transition: prefixed-for-transition(-webkit-, 0.2s ease-out);
  -moz-transition: prefixed-for-transition(-moz-, 0.2s ease-out);
  -ms-transition: prefixed-for-transition(-ms-, 0.2s ease-out);
  -o-transition: prefixed-for-transition(-o-, 0.2s ease-out);
  transition: 0.2s ease-out;
}
.fullscreen.full .fs-icon .tl, .fullscreen.full .fs-icon .br {
  -webkit-transform: rotate(-180deg);
  -moz-transform: rotate(-180deg);
  -ms-transform: rotate(-180deg);
  -o-transform: rotate(-180deg);
  transform: rotate(-180deg);
  -webkit-transform-origin: 50%;
  -moz-transform-origin: 50%;
  -ms-transform-origin: 50%;
  -o-transform-origin: 50%;
  transform: 50%;
  -webkit-transition: prefixed-for-transition(-webkit-, 0.5s ease-out);
  -moz-transition: prefixed-for-transition(-moz-, 0.5s ease-out);
  -ms-transition: prefixed-for-transition(-ms-, 0.5s ease-out);
  -o-transition: prefixed-for-transition(-o-, 0.5s ease-out);
  transition: 0.5s ease-out;
}
.fullscreen.full .fs-icon .tr, .fullscreen.full .fs-icon .bl {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
  -webkit-transform-origin: 50%;
  -moz-transform-origin: 50%;
  -ms-transform-origin: 50%;
  -o-transform-origin: 50%;
  transform: 50%;
  -webkit-transition: prefixed-for-transition(-webkit-, 0.5s ease-out);
  -moz-transition: prefixed-for-transition(-moz-, 0.5s ease-out);
  -ms-transition: prefixed-for-transition(-ms-, 0.5s ease-out);
  -o-transition: prefixed-for-transition(-o-, 0.5s ease-out);
  transition: 0.5s ease-out;
}
.fullscreen.full:hover .fs-icon {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}
.fullscreen.full:hover .fs-icon .tl {
  -webkit-transform: translate(-8px, -8px);
  -moz-transform: translate(-8px, -8px);
  -ms-transform: translate(-8px, -8px);
  -o-transform: translate(-8px, -8px);
  transform: translate(-8px, -8px);
}
.fullscreen.full:hover .fs-icon .tr {
  -webkit-transform: translate(8px, -8px);
  -moz-transform: translate(8px, -8px);
  -ms-transform: translate(8px, -8px);
  -o-transform: translate(8px, -8px);
  transform: translate(8px, -8px);
}
.fullscreen.full:hover .fs-icon .bl {
  -webkit-transform: translate(-8px, 8px);
  -moz-transform: translate(-8px, 8px);
  -ms-transform: translate(-8px, 8px);
  -o-transform: translate(-8px, 8px);
  transform: translate(-8px, 8px);
}
.fullscreen.full:hover .fs-icon .br {
  -webkit-transform: translate(8px, 8px);
  -moz-transform: translate(8px, 8px);
  -ms-transform: translate(8px, 8px);
  -o-transform: translate(8px, 8px);
  transform: translate(8px, 8px);
}

@keyframes tl {
  0% {
    transform: translate(8px, 8px);
    opacity: 0;
  }
  15% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
}
@keyframes tr {
  0% {
    transform: translate(-8px, 8px);
    opacity: 0;
  }
  15% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
}
@keyframes bl {
  0% {
    transform: translate(8px, -8px);
    opacity: 0;
  }
  15% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
}
@keyframes br {
  0% {
    transform: translate(-8px, -8px);
    opacity: 0;
  }
  15% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
}

    </style>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

</head>

<body>

  <main>   
    <div class="icon">
        <a class="fullscreen" href="#!"><svg class="fs-icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">

            <!-- Top Right -->
            <path class="tr arrow" d="M74.6 33.6l0-4.3L63.2 40.7c-1.1 1.1-2.8 1.1-3.8 0c-1.1-1.1-1.1-2.8 0-3.9l11.4-11.4h-4.3 c-1.5 0-2.7-1.2-2.7-2.7c0-1.5 1.2-2.7 2.7-2.7h10.9c1.5 0 2.7 1.2 2.7 2.7v10.9c0 1.5-1.2 2.7-2.7 2.7 C75.8 36.3 74.6 35.1 74.6 33.6z"/>

            <!-- Top Left -->
            <path class="tl arrow" d="M33.6 25.4h-4.3l11.4 11.4c1.1 1.1 1.1 2.8 0 3.8c-1.1 1.1-2.8 1.1-3.8 0L25.4 29.3v4.3 c0 1.5-1.2 2.7-2.7 2.7c-1.5 0-2.7-1.2-2.7-2.7V22.7c0-1.5 1.2-2.7 2.7-2.7l10.9 0c1.5 0 2.7 1.2 2.7 2.7 C36.3 24.2 35.1 25.4 33.6 25.4z"/>

            <!-- Bottom Left -->
            <path class="bl arrow" d="M25.4 66.4l0 4.3l11.4-11.4c1.1-1.1 2.8-1.1 3.8 0c1.1 1.1 1.1 2.8 0 3.9L29.3 74.6h4.3 c1.5 0 2.7 1.2 2.7 2.7c0 1.5-1.2 2.7-2.7 2.7H22.7c-1.5 0-2.7-1.2-2.7-2.7V66.4c0-1.5 1.2-2.7 2.7-2.7 C24.2 63.7 25.4 64.9 25.4 66.4z"/>

            <!-- Bottom Right -->
            <path class="br arrow" d="M66.4 74.6h4.3L59.3 63.2c-1.1-1.1-1.1-2.8 0-3.8c1.1-1.1 2.8-1.1 3.8 0l11.4 11.4v-4.3 c0-1.5 1.2-2.7 2.7-2.7c1.5 0 2.7 1.2 2.7 2.7v10.9c0 1.5-1.2 2.7-2.7 2.7l-10.9 0c-1.5 0-2.7-1.2-2.7-2.7 C63.7 75.8 64.9 74.6 66.4 74.6z"/>

            <!-- Outline -->
            <path class="outline" d="M94 5c0.5 0 1 0.5 1 1v88c0 0.5-0.5 1-1 1H6c-0.5 0-1-0.5-1-1V6c0-0.5 0.5-1 1-1H94 M94 0H6C2.7 0 0 2.7 0 6v88 c0 3.3 2.7 6 6 6h88c3.3 0 6-2.7 6-6V6C100 2.7 97.3 0 94 0L94 0z"/>
          </svg>
        </a>
    </div>
</main>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/brendeng/animated-fullscreen-icon-pkCvn */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

html {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

q, blockquote {
  quotes: none;
}

q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none;
}

a img {
  border: none;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
  display: block;
}

/* -------------------------------- 

xBase rules

-------------------------------- */
html * {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
  height: 100%;
}

body {
  font-size: 1.6rem;
  font-family: sans-serif;
  color: #333333;
  background-color: #46ae00;
  line-height: 1.6;
  text-align: center;
  height: 100%;
}

a {
  color: #62c169;
  text-decoration: none;
}

img, embed, object, video {
  max-width: 100%;
}

/* -------------------------------- 

xModules - reusable parts of our design

-------------------------------- */
/* -------------------------------- 

xLayout - main components 

-------------------------------- */
main {
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.icon {
  width: 54px;
  height: 54px;
  display: block;
  overflow: show;
}

.icon svg {
  max-width: 100%;
}

main {
  position: absolute;
}

.fullscreen {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  display: block;
  position: relative;
}
.fullscreen .fs-icon {
  -webkit-transition: prefixed-for-transition(-webkit-, 0.5s ease-out);
  -moz-transition: prefixed-for-transition(-moz-, 0.5s ease-out);
  -ms-transition: prefixed-for-transition(-ms-, 0.5s ease-out);
  -o-transition: prefixed-for-transition(-o-, 0.5s ease-out);
  transition: 0.5s ease-out;
}
.fullscreen .fs-icon .outline {
  fill: #82d44b;
}
.fullscreen .fs-icon .arrow {
  fill: #82d44b;
  -webkit-transition: prefixed-for-transition(-webkit-, fill 1s ease);
  -moz-transition: prefixed-for-transition(-moz-, fill 1s ease);
  -ms-transition: prefixed-for-transition(-ms-, fill 1s ease);
  -o-transition: prefixed-for-transition(-o-, fill 1s ease);
  transition: fill 1s ease;
}
.fullscreen .fs-icon .tl {
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transform-origin: 50%;
  -moz-transform-origin: 50%;
  -ms-transform-origin: 50%;
  -o-transform-origin: 50%;
  transform: 50%;
  -webkit-transition: prefixed-for-transition(-webkit-, 0.5s ease-out);
  -moz-transition: prefixed-for-transition(-moz-, 0.5s ease-out);
  -ms-transition: prefixed-for-transition(-ms-, 0.5s ease-out);
  -o-transition: prefixed-for-transition(-o-, 0.5s ease-out);
  transition: 0.5s ease-out;
  animation: tl 1s ease-in-out;
}
.fullscreen .fs-icon .tr {
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transform-origin: 50%;
  -moz-transform-origin: 50%;
  -ms-transform-origin: 50%;
  -o-transform-origin: 50%;
  transform: 50%;
  -webkit-transition: prefixed-for-transition(-webkit-, 0.5s ease-out);
  -moz-transition: prefixed-for-transition(-moz-, 0.5s ease-out);
  -ms-transition: prefixed-for-transition(-ms-, 0.5s ease-out);
  -o-transition: prefixed-for-transition(-o-, 0.5s ease-out);
  transition: 0.5s ease-out;
  animation: tr 1s ease-in-out;
}
.fullscreen .fs-icon .bl {
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transform-origin: 50%;
  -moz-transform-origin: 50%;
  -ms-transform-origin: 50%;
  -o-transform-origin: 50%;
  transform: 50%;
  -webkit-transition: prefixed-for-transition(-webkit-, 0.5s ease-out);
  -moz-transition: prefixed-for-transition(-moz-, 0.5s ease-out);
  -ms-transition: prefixed-for-transition(-ms-, 0.5s ease-out);
  -o-transition: prefixed-for-transition(-o-, 0.5s ease-out);
  transition: 0.5s ease-out;
  animation: bl 1s ease-in-out;
}
.fullscreen .fs-icon .br {
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transform-origin: 50%;
  -moz-transform-origin: 50%;
  -ms-transform-origin: 50%;
  -o-transform-origin: 50%;
  transform: 50%;
  -webkit-transition: prefixed-for-transition(-webkit-, 0.5s ease-out);
  -moz-transition: prefixed-for-transition(-moz-, 0.5s ease-out);
  -ms-transition: prefixed-for-transition(-ms-, 0.5s ease-out);
  -o-transition: prefixed-for-transition(-o-, 0.5s ease-out);
  transition: 0.5s ease-out;
  animation: br 1s ease-in-out;
}
.fullscreen:hover .fs-icon {
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
  transform: scale(1.1);
  -webkit-transition: prefixed-for-transition(-webkit-, 0.5s ease-out);
  -moz-transition: prefixed-for-transition(-moz-, 0.5s ease-out);
  -ms-transition: prefixed-for-transition(-ms-, 0.5s ease-out);
  -o-transition: prefixed-for-transition(-o-, 0.5s ease-out);
  transition: 0.5s ease-out;
}
.fullscreen:hover .fs-icon .arrow {
  fill: #fff;
  -webkit-transition: prefixed-for-transition(-webkit-, fill 1s ease);
  -moz-transition: prefixed-for-transition(-moz-, fill 1s ease);
  -ms-transition: prefixed-for-transition(-ms-, fill 1s ease);
  -o-transition: prefixed-for-transition(-o-, fill 1s ease);
  transition: fill 1s ease;
  -webkit-transition: prefixed-for-transition(-webkit-, transform 0.5s ease-out);
  -moz-transition: prefixed-for-transition(-moz-, transform 0.5s ease-out);
  -ms-transition: prefixed-for-transition(-ms-, transform 0.5s ease-out);
  -o-transition: prefixed-for-transition(-o-, transform 0.5s ease-out);
  transition: transform 0.5s ease-out;
}
.fullscreen:hover .fs-icon .tl {
  -webkit-transform: translate(-4px, -4px);
  -moz-transform: translate(-4px, -4px);
  -ms-transform: translate(-4px, -4px);
  -o-transform: translate(-4px, -4px);
  transform: translate(-4px, -4px);
}
.fullscreen:hover .fs-icon .tr {
  -webkit-transform: translate(4px, -4px);
  -moz-transform: translate(4px, -4px);
  -ms-transform: translate(4px, -4px);
  -o-transform: translate(4px, -4px);
  transform: translate(4px, -4px);
}
.fullscreen:hover .fs-icon .bl {
  -webkit-transform: translate(-4px, 4px);
  -moz-transform: translate(-4px, 4px);
  -ms-transform: translate(-4px, 4px);
  -o-transform: translate(-4px, 4px);
  transform: translate(-4px, 4px);
}
.fullscreen:hover .fs-icon .br {
  -webkit-transform: translate(4px, 4px);
  -moz-transform: translate(4px, 4px);
  -ms-transform: translate(4px, 4px);
  -o-transform: translate(4px, 4px);
  transform: translate(4px, 4px);
}
.fullscreen:active .fs-icon {
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
  transform: scale(1.1);
  -webkit-transition: prefixed-for-transition(-webkit-, 0.5s ease-out);
  -moz-transition: prefixed-for-transition(-moz-, 0.5s ease-out);
  -ms-transition: prefixed-for-transition(-ms-, 0.5s ease-out);
  -o-transition: prefixed-for-transition(-o-, 0.5s ease-out);
  transition: 0.5s ease-out;
}
.fullscreen:active .fs-icon .arrow {
  fill: #82d44b;
  -webkit-transition: prefixed-for-transition(-webkit-, fill 1s ease);
  -moz-transition: prefixed-for-transition(-moz-, fill 1s ease);
  -ms-transition: prefixed-for-transition(-ms-, fill 1s ease);
  -o-transition: prefixed-for-transition(-o-, fill 1s ease);
  transition: fill 1s ease;
  opacity: 0;
}
.fullscreen:active .fs-icon .tl {
  -webkit-transform: translate(-60px, -60px);
  -moz-transform: translate(-60px, -60px);
  -ms-transform: translate(-60px, -60px);
  -o-transform: translate(-60px, -60px);
  transform: translate(-60px, -60px);
  -webkit-transition: prefixed-for-transition(-webkit-, 0.2s ease-out);
  -moz-transition: prefixed-for-transition(-moz-, 0.2s ease-out);
  -ms-transition: prefixed-for-transition(-ms-, 0.2s ease-out);
  -o-transition: prefixed-for-transition(-o-, 0.2s ease-out);
  transition: 0.2s ease-out;
}
.fullscreen:active .fs-icon .tr {
  -webkit-transform: translate(60px, -60px);
  -moz-transform: translate(60px, -60px);
  -ms-transform: translate(60px, -60px);
  -o-transform: translate(60px, -60px);
  transform: translate(60px, -60px);
  -webkit-transition: prefixed-for-transition(-webkit-, 0.2s ease-out);
  -moz-transition: prefixed-for-transition(-moz-, 0.2s ease-out);
  -ms-transition: prefixed-for-transition(-ms-, 0.2s ease-out);
  -o-transition: prefixed-for-transition(-o-, 0.2s ease-out);
  transition: 0.2s ease-out;
}
.fullscreen:active .fs-icon .bl {
  -webkit-transform: translate(-60px, 60px);
  -moz-transform: translate(-60px, 60px);
  -ms-transform: translate(-60px, 60px);
  -o-transform: translate(-60px, 60px);
  transform: translate(-60px, 60px);
  -webkit-transition: prefixed-for-transition(-webkit-, 0.2s ease-out);
  -moz-transition: prefixed-for-transition(-moz-, 0.2s ease-out);
  -ms-transition: prefixed-for-transition(-ms-, 0.2s ease-out);
  -o-transition: prefixed-for-transition(-o-, 0.2s ease-out);
  transition: 0.2s ease-out;
}
.fullscreen:active .fs-icon .br {
  -webkit-transform: translate(60px, 60px);
  -moz-transform: translate(60px, 60px);
  -ms-transform: translate(60px, 60px);
  -o-transform: translate(60px, 60px);
  transform: translate(60px, 60px);
  -webkit-transition: prefixed-for-transition(-webkit-, 0.2s ease-out);
  -moz-transition: prefixed-for-transition(-moz-, 0.2s ease-out);
  -ms-transition: prefixed-for-transition(-ms-, 0.2s ease-out);
  -o-transition: prefixed-for-transition(-o-, 0.2s ease-out);
  transition: 0.2s ease-out;
}
.fullscreen.full .fs-icon .tl, .fullscreen.full .fs-icon .br {
  -webkit-transform: rotate(-180deg);
  -moz-transform: rotate(-180deg);
  -ms-transform: rotate(-180deg);
  -o-transform: rotate(-180deg);
  transform: rotate(-180deg);
  -webkit-transform-origin: 50%;
  -moz-transform-origin: 50%;
  -ms-transform-origin: 50%;
  -o-transform-origin: 50%;
  transform: 50%;
  -webkit-transition: prefixed-for-transition(-webkit-, 0.5s ease-out);
  -moz-transition: prefixed-for-transition(-moz-, 0.5s ease-out);
  -ms-transition: prefixed-for-transition(-ms-, 0.5s ease-out);
  -o-transition: prefixed-for-transition(-o-, 0.5s ease-out);
  transition: 0.5s ease-out;
}
.fullscreen.full .fs-icon .tr, .fullscreen.full .fs-icon .bl {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
  -webkit-transform-origin: 50%;
  -moz-transform-origin: 50%;
  -ms-transform-origin: 50%;
  -o-transform-origin: 50%;
  transform: 50%;
  -webkit-transition: prefixed-for-transition(-webkit-, 0.5s ease-out);
  -moz-transition: prefixed-for-transition(-moz-, 0.5s ease-out);
  -ms-transition: prefixed-for-transition(-ms-, 0.5s ease-out);
  -o-transition: prefixed-for-transition(-o-, 0.5s ease-out);
  transition: 0.5s ease-out;
}
.fullscreen.full:hover .fs-icon {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}
.fullscreen.full:hover .fs-icon .tl {
  -webkit-transform: translate(-8px, -8px);
  -moz-transform: translate(-8px, -8px);
  -ms-transform: translate(-8px, -8px);
  -o-transform: translate(-8px, -8px);
  transform: translate(-8px, -8px);
}
.fullscreen.full:hover .fs-icon .tr {
  -webkit-transform: translate(8px, -8px);
  -moz-transform: translate(8px, -8px);
  -ms-transform: translate(8px, -8px);
  -o-transform: translate(8px, -8px);
  transform: translate(8px, -8px);
}
.fullscreen.full:hover .fs-icon .bl {
  -webkit-transform: translate(-8px, 8px);
  -moz-transform: translate(-8px, 8px);
  -ms-transform: translate(-8px, 8px);
  -o-transform: translate(-8px, 8px);
  transform: translate(-8px, 8px);
}
.fullscreen.full:hover .fs-icon .br {
  -webkit-transform: translate(8px, 8px);
  -moz-transform: translate(8px, 8px);
  -ms-transform: translate(8px, 8px);
  -o-transform: translate(8px, 8px);
  transform: translate(8px, 8px);
}

@keyframes tl {
  0% {
    transform: translate(8px, 8px);
    opacity: 0;
  }
  15% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
}
@keyframes tr {
  0% {
    transform: translate(-8px, 8px);
    opacity: 0;
  }
  15% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
}
@keyframes bl {
  0% {
    transform: translate(8px, -8px);
    opacity: 0;
  }
  15% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
}
@keyframes br {
  0% {
    transform: translate(-8px, -8px);
    opacity: 0;
  }
  15% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
}


/*Downloaded from https://www.codeseek.co/brendeng/animated-fullscreen-icon-pkCvn */
/**
 * @preserve jquery.fullscreen 1.1.5
 * https://github.com/kayahr/jquery-fullscreen-plugin
 * Copyright (C) 2012-2013 Klaus Reimer <k@ailis.de>
 * Licensed under the MIT license
 * (See https://www.opensource.org/licenses/mit-license)
 */
 
(function() {

/**
 * Sets or gets the fullscreen state.
 * 
 * @param {boolean=} state
 *            True to enable fullscreen mode, false to disable it. If not
 *            specified then the current fullscreen state is returned.
 * @return {boolean|Element|jQuery|null}
 *            When querying the fullscreen state then the current fullscreen
 *            element (or true if browser doesn't support it) is returned
 *            when browser is currently in full screen mode. False is returned
 *            if browser is not in full screen mode. Null is returned if 
 *            browser doesn't support fullscreen mode at all. When setting 
 *            the fullscreen state then the current jQuery selection is 
 *            returned for chaining.
 * @this {jQuery}
 */
function fullScreen(state)
{
    var e, func, doc;
    
    // Do nothing when nothing was selected
    if (!this.length) return this;
    
    // We only use the first selected element because it doesn't make sense
    // to fullscreen multiple elements.
    e = (/** @type {Element} */ this[0]);
    
    // Find the real element and the document (Depends on whether the
    // document itself or a HTML element was selected)
    if (e.ownerDocument)
    {
        doc = e.ownerDocument;
    }
    else
    {
        doc = e;
        e = doc.documentElement;
    }
    
    // When no state was specified then return the current state.
    if (state == null)
    {
        // When fullscreen mode is not supported then return null
        if (!((/** @type {?Function} */ doc["exitFullscreen"])
            || (/** @type {?Function} */ doc["webkitExitFullscreen"])
            || (/** @type {?Function} */ doc["webkitCancelFullScreen"])
            || (/** @type {?Function} */ doc["msExitFullscreen"])
            || (/** @type {?Function} */ doc["mozCancelFullScreen"])))
        {
            return null;
        }
        
        // Check fullscreen state
        state = !!doc["fullscreenElement"]
            || !!doc["msFullscreenElement"]
            || !!doc["webkitIsFullScreen"]
            || !!doc["mozFullScreen"];
        if (!state) return state;
        
        // Return current fullscreen element or "true" if browser doesn't
        // support this
        return (/** @type {?Element} */ doc["fullscreenElement"])
            || (/** @type {?Element} */ doc["webkitFullscreenElement"])
            || (/** @type {?Element} */ doc["webkitCurrentFullScreenElement"])
            || (/** @type {?Element} */ doc["msFullscreenElement"])
            || (/** @type {?Element} */ doc["mozFullScreenElement"])
            || state;
    }
    
    // When state was specified then enter or exit fullscreen mode.
    if (state)
    {
        // Enter fullscreen
        func = (/** @type {?Function} */ e["requestFullscreen"])
            || (/** @type {?Function} */ e["webkitRequestFullscreen"])
            || (/** @type {?Function} */ e["webkitRequestFullScreen"])
            || (/** @type {?Function} */ e["msRequestFullscreen"])
            || (/** @type {?Function} */ e["mozRequestFullScreen"]);
        if (func) 
        {
            func.call(e);
        }
        return this;
    }
    else
    {
        // Exit fullscreen
        func = (/** @type {?Function} */ doc["exitFullscreen"])
            || (/** @type {?Function} */ doc["webkitExitFullscreen"])
            || (/** @type {?Function} */ doc["webkitCancelFullScreen"])
            || (/** @type {?Function} */ doc["msExitFullscreen"])
            || (/** @type {?Function} */ doc["mozCancelFullScreen"]);
        if (func) func.call(doc);
        return this;
    }
}

/**
 * Toggles the fullscreen mode.
 * 
 * @return {!jQuery}
 *            The jQuery selection for chaining.
 * @this {jQuery}
 */
function toggleFullScreen()
{
    return (/** @type {!jQuery} */ fullScreen.call(this, 
        !fullScreen.call(this)));
}

/**
 * Handles the browser-specific fullscreenchange event and triggers
 * a jquery event for it.
 *
 * @param {?Event} event
 *            The fullscreenchange event.
 */
function fullScreenChangeHandler(event)
{
    jQuery(document).trigger(new jQuery.Event("fullscreenchange"));
}

/**
 * Handles the browser-specific fullscreenerror event and triggers
 * a jquery event for it.
 *
 * @param {?Event} event
 *            The fullscreenerror event.
 */
function fullScreenErrorHandler(event)
{
    jQuery(document).trigger(new jQuery.Event("fullscreenerror"));
}

/**
 * Installs the fullscreenchange event handler.
 */
function installFullScreenHandlers()
{
    var e, change, error;
    
    // Determine event name
    e = document;
    if (e["webkitCancelFullScreen"])
    {
        change = "webkitfullscreenchange";
        error = "webkitfullscreenerror";
    }
    else if (e["msExitFullscreen"])
    {
        change = "MSFullscreenChange";
        error = "MSFullscreenError";
    }
    else if (e["mozCancelFullScreen"])
    {
        change = "mozfullscreenchange";
        error = "mozfullscreenerror";
    }
    else 
    {
        change = "fullscreenchange";
        error = "fullscreenerror";
    }

    // Install the event handlers
    jQuery(document).bind(change, fullScreenChangeHandler);
    jQuery(document).bind(error, fullScreenErrorHandler);
}

jQuery.fn["fullScreen"] = fullScreen;
jQuery.fn["toggleFullScreen"] = toggleFullScreen;
installFullScreenHandlers();

})();

$(".fullscreen").click(function () {
     $(document).toggleFullScreen();
});
 

$(document).on("fullscreenchange", function() {
    if ($(document).fullScreen()){
      $('.fullscreen').addClass('full');
    }
    else {
      $('.fullscreen').removeClass('full');
    }
});

Comments