ELEKS Digital Production

Developer

Size

9,176 Kb

Views

12,144

ELEKS Digital Production Previews
ELEKS Digital Production HTML Codes
ELEKS Digital Production CSS Codes
ELEKS Digital Production JS Codes

How do I make an eleks digital production?

Inspired by ELEKS Digital Production https://dribbble.com/shots/1438296-ELEKS-Digital-Production. What is a eleks digital production? How do you make a eleks digital production? This script and codes were developed by Arsen Zbidniakov on 13 October 2022, Thursday.

ELEKS Digital Production Previews

ELEKS Digital Production - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>ELEKS Digital Production</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <a href="http://eleks.com/digital" target="_blank"> <div id="device"> <div class="screen"> <div class="scr-01"></div> <div class="scr-02"> <div class="icon-20"></div> <div class="icon-21"></div> <div class="icon-22"></div> <div class="icon-23"></div> <div class="icon-24"></div> </div> <div class="scr-03"> <div class="icon-31"></div> <div class="icon-32"></div> <div class="icon-33"></div> <div class="icon-34"></div> </div> <div class="scr-04"></div> <div class="scr-05"></div> </div> <div class="overlay"></div> <div class="ipad"></div> <div class="iphone"></div> </div> <div class="keyboard"></div>
</a>
<div id="confetti"> <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

ELEKS Digital Production - Script Codes CSS Codes

/* -------------------- CONFIG
-------------------- */
/* -------------------- STYLES
-------------------- */
body { background: #370B86; overflow: hidden;
}
a { position: absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0; width: 487px; height: 337px; perspective: 500px;
}
/* device */
#device { position: absolute; margin: auto; padding: 26px 16px; top: 0; left: 0; right: 0; bottom: 0; width: 487px; height: 337px; background: #000; border: 2px solid #dedede; border-radius: 24px; box-sizing: border-box; z-index: 10; -moz-transform: translate3d(0, 0, 0) rotate3d(0, 0, 1, 0deg) scale3d(1, 1, 1); -ms-transform: translate3d(0, 0, 0) rotate3d(0, 0, 1, 0deg) scale3d(1, 1, 1); -webkit-transform: translate3d(0, 0, 0) rotate3d(0, 0, 1, 0deg) scale3d(1, 1, 1); transform: translate3d(0, 0, 0) rotate3d(0, 0, 1, 0deg) scale3d(1, 1, 1); -moz-animation: device 8s infinite; -webkit-animation: device 8s infinite; animation: device 8s infinite; /* cam */ /* mic */
}
#device:after { content: ''; position: absolute; margin-top: -3px; top: 50%; left: 11px; height: 6px; width: 6px; background: #adacad; border-radius: 50%; z-index: 12; -moz-animation: cam 8s infinite; -webkit-animation: cam 8s infinite; animation: cam 8s infinite;
}
#device:before { content: ''; position: absolute; margin-top: -10px; top: 50%; left: 20px; height: 20px; width: 4px; background: #adacad; border-radius: 6px; z-index: 12; -moz-animation: mic 8s infinite; -webkit-animation: mic 8s infinite; animation: mic 8s infinite;
}
.screen { position: relative; width: 100%; height: 100%; overflow: hidden; background: #fff; z-index: 12;
}
[class*="scr-"] { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-repeat: no-repeat; background-position: center top;
}
[class*="scr-"].scr-01 { background-image: url(https://dl.dropboxusercontent.com/u/70469070/codepen/digital-01.jpg); z-index: 12; -moz-animation: scr-01 8s infinite; -webkit-animation: scr-01 8s infinite; animation: scr-01 8s infinite;
}
[class*="scr-"].scr-01:after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #370B86; z-index: 13; transform-origin: 50% 100%; -moz-animation: scr-01-after 8s infinite; -webkit-animation: scr-01-after 8s infinite; animation: scr-01-after 8s infinite;
}
[class*="scr-"].scr-02 { background-image: url(https://dl.dropboxusercontent.com/u/70469070/codepen/digital-02.jpg); z-index: 13; -moz-animation: scr-02 8s infinite; -webkit-animation: scr-02 8s infinite; animation: scr-02 8s infinite;
}
[class*="scr-"].scr-02:after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #0873B5; z-index: 13; transform-origin: 100% 50%; -moz-animation: scr-02-after 8s infinite; -webkit-animation: scr-02-after 8s infinite; animation: scr-02-after 8s infinite;
}
[class*="scr-"].scr-03 { background-position: center center; background-image: url(https://dl.dropboxusercontent.com/u/70469070/codepen/digital-03.jpg); z-index: 14; -moz-animation: scr-03 8s infinite; -webkit-animation: scr-03 8s infinite; animation: scr-03 8s infinite;
}
[class*="scr-"].scr-04 { background-position: left center; background-image: url(https://dl.dropboxusercontent.com/u/70469070/codepen/digital-04.jpg); z-index: 15; -moz-animation: scr-04 8s infinite; -webkit-animation: scr-04 8s infinite; animation: scr-04 8s infinite;
}
[class*="scr-"].scr-04:after { content: ''; position: absolute; top: 0; left: 0; height: 95px; width: 15px; background-size: cover; background-position: left center; background-image: url(https://dl.dropboxusercontent.com/u/70469070/codepen/digital-04-01.png); z-index: 16; -moz-animation: scr-04-after 8s infinite; -webkit-animation: scr-04-after 8s infinite; animation: scr-04-after 8s infinite;
}
[class*="scr-"].scr-05 { background-position: center center; background-image: url(https://dl.dropboxusercontent.com/u/70469070/codepen/digital-05x.jpg); z-index: 11; -moz-animation: scr-05 8s infinite; -webkit-animation: scr-05 8s infinite; animation: scr-05 8s infinite;
}
[class*="icon-"] { position: absolute; background-size: cover; background-repeat: no-repeat; background-position: center center;
}
.icon-20 { margin-left: -34px; bottom: 0; left: 50%; height: 73px; width: 67px; background-image: url(https://dl.dropboxusercontent.com/u/70469070/codepen/digital-02-00.png); -moz-animation: icon-20 8s infinite; -webkit-animation: icon-20 8s infinite; animation: icon-20 8s infinite;
}
.icon-21 { top: 30px; left: 40px; height: 35px; width: 37px; background-image: url(https://dl.dropboxusercontent.com/u/70469070/codepen/digital-02-01.png); -moz-animation: icon-21 8s infinite; -webkit-animation: icon-21 8s infinite; animation: icon-21 8s infinite;
}
.icon-22 { top: 32px; right: 40px; height: 35px; width: 37px; background-image: url(https://dl.dropboxusercontent.com/u/70469070/codepen/digital-02-02.png); -moz-animation: icon-22 8s infinite; -webkit-animation: icon-22 8s infinite; animation: icon-22 8s infinite;
}
.icon-23 { left: 40px; bottom: 32px; height: 35px; width: 37px; background-image: url(https://dl.dropboxusercontent.com/u/70469070/codepen/digital-02-03.png); -moz-animation: icon-23 8s infinite; -webkit-animation: icon-23 8s infinite; animation: icon-23 8s infinite;
}
.icon-24 { right: 40px; bottom: 32px; height: 35px; width: 37px; background-image: url(https://dl.dropboxusercontent.com/u/70469070/codepen/digital-02-04.png); -moz-animation: icon-24 8s infinite; -webkit-animation: icon-24 8s infinite; animation: icon-24 8s infinite;
}
.icon-31 { left: 40px; bottom: 42px; height: 21px; width: 38px; background-image: url(https://dl.dropboxusercontent.com/u/70469070/codepen/digital-03-01.png); -moz-animation: icon-31 8s infinite; -webkit-animation: icon-31 8s infinite; animation: icon-31 8s infinite;
}
.icon-32 { top: 28px; left: 38px; height: 47px; width: 40px; background-image: url(https://dl.dropboxusercontent.com/u/70469070/codepen/digital-03-02.png); -moz-animation: icon-32 8s infinite; -webkit-animation: icon-32 8s infinite; animation: icon-32 8s infinite;
}
.icon-33 { right: 38px; bottom: 28px; height: 49px; width: 51px; background-image: url(https://dl.dropboxusercontent.com/u/70469070/codepen/digital-03-03.png); -moz-animation: icon-33 8s infinite; -webkit-animation: icon-33 8s infinite; animation: icon-33 8s infinite;
}
.icon-34 { top: 28px; right: 38px; height: 47px; width: 48px; background-image: url(https://dl.dropboxusercontent.com/u/70469070/codepen/digital-03-04.png); -moz-animation: icon-34 8s infinite; -webkit-animation: icon-34 8s infinite; animation: icon-34 8s infinite;
}
.overlay { position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; height: calc(100% + 4px); width: calc(100% + 4px); border-radius: 24px; overflow: hidden; z-index: 11; -moz-animation: rounded 8s infinite; -webkit-animation: rounded 8s infinite; animation: rounded 8s infinite;
}
.overlay:after { content: ''; display: block; position: absolute; top: 0; left: 0; width: 0; height: 0; border-style: solid; border-width: 820px 820px 0 0; border-color: #fff transparent transparent transparent; z-index: -1; -moz-transform: translate3d(-820px, 0, 0); -ms-transform: translate3d(-820px, 0, 0); -webkit-transform: translate3d(-820px, 0, 0); transform: translate3d(-820px, 0, 0); -moz-animation: overlay 8s infinite; -webkit-animation: overlay 8s infinite; animation: overlay 8s infinite;
}
.keyboard { position: absolute; left: -30px; right: -30px; bottom: 0; height: 11px; width: calc(100% + 60px); background: #eee; border-radius: 2px; z-index: 11; -moz-animation: keyboard 8s infinite; -webkit-animation: keyboard 8s infinite; animation: keyboard 8s infinite; /* touchpad */ /* keyboard bottom */
}
.keyboard:after { content: ''; position: absolute; margin-top: -6px; top: 0; left: 50%; height: 12px; width: 84px; background: #adadad; border-radius: 50% 50% 10px 10px; -webkit-clip-path: polygon(0 6px, 84px 6px, 84px 12px, 0 12px); clip-path: polygon(0 6px, 84px 6px, 84px 12px, 0 12px); z-index: 12; -moz-transform: translate3d(-50%, 0, 0); -ms-transform: translate3d(-50%, 0, 0); -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0);
}
.keyboard:before { content: ''; position: absolute; bottom: -5px; height: 10px; width: 100%; background: #dedede; border-radius: 50px / 10px; -webkit-clip-path: polygon(0 4px, 547px 4px, 547px 12px, 0 12px); clip-path: polygon(0 4px, 547px 4px, 547px 12px, 0 12px);
}
/* hack for FF */
.no-cssreflections .keyboard:before { border-radius: 0 0 50% 50%;
}
.no-cssreflections .keyboard:after { top: 6px; height: 6px; border-radius: 0 0 10px 10px;
}
.ipad { position: absolute; margin-top: -8px; top: 50%; right: 10px; height: 16px; width: 16px; background: #D6D6D6; border-radius: 50%; z-index: 11; transform: translate3d(0, 0, 0) scale3d(0, 0, 0); -moz-animation: ipad 8s infinite; -webkit-animation: ipad 8s infinite; animation: ipad 8s infinite; /* power */
}
.ipad:after { content: ''; position: absolute; margin-top: -4px; top: 50%; right: 4px; height: 6px; width: 6px; background: transparent; border: 1px solid #ccc; border-radius: 2px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
.ipad:before { content: ''; position: absolute; top: -32px; left: -222px; height: 16px; width: 3px; background: #fff; border-radius: 2px 0 0 2px;
}
.iphone { position: absolute; left: 33px; bottom: -3px; height: 2px; width: 12px; background: #eee; border-radius: 0 0 99px 99px; -moz-animation: iphone 8s infinite; -webkit-animation: iphone 8s infinite; animation: iphone 8s infinite;
}
.iphone:after { content: ''; position: absolute; left: 21px; bottom: 0; height: 2px; width: 9px; background: #eee; border-radius: 0 0 99px 99px;
}
.iphone:before { content: ''; position: absolute; left: 43px; bottom: 0; height: 2px; width: 9px; background: #eee; border-radius: 0 0 99px 99px;
}
/* confetti */
i { display: block; position: absolute; border-style: solid; border-color: transparent; z-index: -1; /* triangles */ /* rectangulars */ /* circles */
}
i:nth-child(1) { top: 40vh; left: 15vw; border-bottom-color: #ED9E33; border-width: 0 7px 12.1px 7px; -moz-transform: rotate(-15deg); -ms-transform: rotate(-15deg); -webkit-transform: rotate(-15deg); transform: rotate(-15deg);
}
i:nth-child(2) { top: 15vh; left: 25vw; border-bottom-color: #2245A6; border-width: 0 7px 12.1px 7px; -moz-transform: rotate(-30deg); -ms-transform: rotate(-30deg); -webkit-transform: rotate(-30deg); transform: rotate(-30deg);
}
i:nth-child(3) { top: 30vh; left: 80vw; border-bottom-color: #2245A6; border-width: 0 7px 12.1px 7px; -moz-transform: rotate(-15deg); -ms-transform: rotate(-15deg); -webkit-transform: rotate(-15deg); transform: rotate(-15deg);
}
i:nth-child(4) { top: 65vh; left: 65vw; border-bottom-color: #04EC87; border-width: 0 7px 12.1px 7px; -moz-transform: rotate(-15deg); -ms-transform: rotate(-15deg); -webkit-transform: rotate(-15deg); transform: rotate(-15deg);
}
i:nth-child(5) { top: 45vh; left: 70vw; border-width: 4px; border-color: #5C149B; -moz-transform: rotate(-15deg); -ms-transform: rotate(-15deg); -webkit-transform: rotate(-15deg); transform: rotate(-15deg);
}
i:nth-child(6) { top: 75vh; left: 90vw; border-width: 4px; border-color: #5C149B; -moz-transform: rotate(-15deg); -ms-transform: rotate(-15deg); -webkit-transform: rotate(-15deg); transform: rotate(-15deg);
}
i:nth-child(7) { top: 90vh; left: 60vw; border-width: 4px; border-color: #5C149B; -moz-transform: rotate(-15deg); -ms-transform: rotate(-15deg); -webkit-transform: rotate(-15deg); transform: rotate(-15deg);
}
i:nth-child(8) { top: 70vh; left: 45vw; border-width: 4px; border-color: #5C149B; -moz-transform: rotate(-15deg); -ms-transform: rotate(-15deg); -webkit-transform: rotate(-15deg); transform: rotate(-15deg);
}
i:nth-child(9) { top: 65vh; left: 10vw; border-width: 2px; border-color: #5C149B; border-radius: 50%;
}
i:nth-child(10) { top: 85vh; left: 20vw; border-width: 2px; border-color: #04EC87; border-radius: 50%;
}
i:nth-child(11) { top: 55vh; left: 35vw; border-width: 2px; border-color: #ED9E33; border-radius: 50%;
}
i:nth-child(12) { top: 15vh; left: 50vw; border-width: 2px; border-color: #04EC87; border-radius: 50%;
}
i:nth-child(13) { top: 15vh; left: 90vw; border-width: 2px; border-color: #ED9E33; border-radius: 50%;
}
/* -------------------- MAGIC
-------------------- */
@-moz-keyframes device { 0%, 13% { padding: 26px 16px; height: 337px; width: 487px; } 15% { padding: 22px 10px; height: 337px; width: 487px; } 18% { padding: 28px 36px 28px 30px; height: 290px; width: 374px; } 35.5% { -moz-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg); } 37% { -moz-transform: rotate3d(0, 0, 1, -10deg); transform: rotate3d(0, 0, 1, -10deg); } 40% { -moz-transform: rotate3d(0, 0, 1, 100deg); transform: rotate3d(0, 0, 1, 100deg); } 41% { -moz-transform: rotate3d(0, 0, 1, 90deg); transform: rotate3d(0, 0, 1, 90deg); } 54% { padding: 28px 36px 28px 30px; height: 290px; width: 374px; -moz-transform: rotate3d(0, 0, 1, 90deg) scale3d(1, 1, 1); transform: rotate3d(0, 0, 1, 90deg) scale3d(1, 1, 1); } 57% { border-radius: 24px; -moz-transform: rotate3d(0, 0, 1, 90deg) scale3d(1.2, 1.2, 1); transform: rotate3d(0, 0, 1, 90deg) scale3d(1.2, 1.2, 1); } 61%, 82.5% { padding: 6px 35px 6px 34px; height: 115px; width: 244px; border-radius: 14px; -moz-transform: rotate3d(0, 0, 1, 90deg) scale3d(1, 1, 1); transform: rotate3d(0, 0, 1, 90deg) scale3d(1, 1, 1); } 84% { padding: 0 56px; height: 24px; width: 115px; border-radius: 30px / 4px; -moz-transform: translate3d(0, 150px, 0) rotate3d(0, 0, 1, 90deg) scale3d(1, 1, 1); transform: translate3d(0, 150px, 0) rotate3d(0, 0, 1, 90deg) scale3d(1, 1, 1); } 85% { -moz-transform: translate3d(0, 150px, 0) rotate3d(0, 0, 1, 100deg) scale3d(1, 1, 1); transform: translate3d(0, 150px, 0) rotate3d(0, 0, 1, 100deg) scale3d(1, 1, 1); } 86% { -moz-transform: translate3d(0, 150px, 0) rotate3d(0, 0, 1, -10deg) scale3d(1, 1, 1); transform: translate3d(0, 150px, 0) rotate3d(0, 0, 1, -10deg) scale3d(1, 1, 1); transform-origin: 50% 50%; } 88% { padding: 0 56px; height: 10px; width: 115px; border-radius: 30px / 4px; -moz-transform: rotate3d(1, 0, 1, 0deg) scale3d(1, 0, 1); transform: rotate3d(1, 0, 1, 0deg) scale3d(1, 0, 1); transform-origin: 50% 100%; -moz-transform-style: flat; transform-style: flat; visibility: visible; } 88.5% { visibility: hidden; padding: 26px 16px; height: 337px; width: 487px; border-radius: 24px; transform-origin: 50% 100%; -moz-transform-style: preserve-3d; transform-style: preserve-3d; -moz-transform: rotate3d(1, 0, 0, -71deg) scale3d(0.6, 0.7, 1); transform: rotate3d(1, 0, 0, -71deg) scale3d(0.6, 0.7, 1); } 93%, 100% { visibility: visible; padding: 26px 16px; height: 337px; width: 487px; border-radius: 24px; transform-origin: 50% 100%; -moz-transform-style: preserve-3d; transform-style: preserve-3d; -moz-transform: rotate3d(1, 0, 0, 0deg) scale3d(1, 1, 1); transform: rotate3d(1, 0, 0, 0deg) scale3d(1, 1, 1); }
}
@-webkit-keyframes device { 0%, 13% { padding: 26px 16px; height: 337px; width: 487px; } 15% { padding: 22px 10px; height: 337px; width: 487px; } 18% { padding: 28px 36px 28px 30px; height: 290px; width: 374px; } 35.5% { -webkit-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg); } 37% { -webkit-transform: rotate3d(0, 0, 1, -10deg); transform: rotate3d(0, 0, 1, -10deg); } 40% { -webkit-transform: rotate3d(0, 0, 1, 100deg); transform: rotate3d(0, 0, 1, 100deg); } 41% { -webkit-transform: rotate3d(0, 0, 1, 90deg); transform: rotate3d(0, 0, 1, 90deg); } 54% { padding: 28px 36px 28px 30px; height: 290px; width: 374px; -webkit-transform: rotate3d(0, 0, 1, 90deg) scale3d(1, 1, 1); transform: rotate3d(0, 0, 1, 90deg) scale3d(1, 1, 1); } 57% { border-radius: 24px; -webkit-transform: rotate3d(0, 0, 1, 90deg) scale3d(1.2, 1.2, 1); transform: rotate3d(0, 0, 1, 90deg) scale3d(1.2, 1.2, 1); } 61%, 82.5% { padding: 6px 35px 6px 34px; height: 115px; width: 244px; border-radius: 14px; -webkit-transform: rotate3d(0, 0, 1, 90deg) scale3d(1, 1, 1); transform: rotate3d(0, 0, 1, 90deg) scale3d(1, 1, 1); } 84% { padding: 0 56px; height: 24px; width: 115px; border-radius: 30px / 4px; -webkit-transform: translate3d(0, 150px, 0) rotate3d(0, 0, 1, 90deg) scale3d(1, 1, 1); transform: translate3d(0, 150px, 0) rotate3d(0, 0, 1, 90deg) scale3d(1, 1, 1); } 85% { -webkit-transform: translate3d(0, 150px, 0) rotate3d(0, 0, 1, 100deg) scale3d(1, 1, 1); transform: translate3d(0, 150px, 0) rotate3d(0, 0, 1, 100deg) scale3d(1, 1, 1); } 86% { -webkit-transform: translate3d(0, 150px, 0) rotate3d(0, 0, 1, -10deg) scale3d(1, 1, 1); transform: translate3d(0, 150px, 0) rotate3d(0, 0, 1, -10deg) scale3d(1, 1, 1); transform-origin: 50% 50%; } 88% { padding: 0 56px; height: 10px; width: 115px; border-radius: 30px / 4px; -webkit-transform: rotate3d(1, 0, 1, 0deg) scale3d(1, 0, 1); transform: rotate3d(1, 0, 1, 0deg) scale3d(1, 0, 1); transform-origin: 50% 100%; -webkit-transform-style: flat; transform-style: flat; visibility: visible; } 88.5% { visibility: hidden; padding: 26px 16px; height: 337px; width: 487px; border-radius: 24px; transform-origin: 50% 100%; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: rotate3d(1, 0, 0, -71deg) scale3d(0.6, 0.7, 1); transform: rotate3d(1, 0, 0, -71deg) scale3d(0.6, 0.7, 1); } 93%, 100% { visibility: visible; padding: 26px 16px; height: 337px; width: 487px; border-radius: 24px; transform-origin: 50% 100%; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: rotate3d(1, 0, 0, 0deg) scale3d(1, 1, 1); transform: rotate3d(1, 0, 0, 0deg) scale3d(1, 1, 1); }
}
@keyframes device { 0%, 13% { padding: 26px 16px; height: 337px; width: 487px; } 15% { padding: 22px 10px; height: 337px; width: 487px; } 18% { padding: 28px 36px 28px 30px; height: 290px; width: 374px; } 35.5% { -moz-transform: rotate3d(0, 0, 1, 0deg); -ms-transform: rotate3d(0, 0, 1, 0deg); -webkit-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg); } 37% { -moz-transform: rotate3d(0, 0, 1, -10deg); -ms-transform: rotate3d(0, 0, 1, -10deg); -webkit-transform: rotate3d(0, 0, 1, -10deg); transform: rotate3d(0, 0, 1, -10deg); } 40% { -moz-transform: rotate3d(0, 0, 1, 100deg); -ms-transform: rotate3d(0, 0, 1, 100deg); -webkit-transform: rotate3d(0, 0, 1, 100deg); transform: rotate3d(0, 0, 1, 100deg); } 41% { -moz-transform: rotate3d(0, 0, 1, 90deg); -ms-transform: rotate3d(0, 0, 1, 90deg); -webkit-transform: rotate3d(0, 0, 1, 90deg); transform: rotate3d(0, 0, 1, 90deg); } 54% { padding: 28px 36px 28px 30px; height: 290px; width: 374px; -moz-transform: rotate3d(0, 0, 1, 90deg) scale3d(1, 1, 1); -ms-transform: rotate3d(0, 0, 1, 90deg) scale3d(1, 1, 1); -webkit-transform: rotate3d(0, 0, 1, 90deg) scale3d(1, 1, 1); transform: rotate3d(0, 0, 1, 90deg) scale3d(1, 1, 1); } 57% { border-radius: 24px; -moz-transform: rotate3d(0, 0, 1, 90deg) scale3d(1.2, 1.2, 1); -ms-transform: rotate3d(0, 0, 1, 90deg) scale3d(1.2, 1.2, 1); -webkit-transform: rotate3d(0, 0, 1, 90deg) scale3d(1.2, 1.2, 1); transform: rotate3d(0, 0, 1, 90deg) scale3d(1.2, 1.2, 1); } 61%, 82.5% { padding: 6px 35px 6px 34px; height: 115px; width: 244px; border-radius: 14px; -moz-transform: rotate3d(0, 0, 1, 90deg) scale3d(1, 1, 1); -ms-transform: rotate3d(0, 0, 1, 90deg) scale3d(1, 1, 1); -webkit-transform: rotate3d(0, 0, 1, 90deg) scale3d(1, 1, 1); transform: rotate3d(0, 0, 1, 90deg) scale3d(1, 1, 1); } 84% { padding: 0 56px; height: 24px; width: 115px; border-radius: 30px / 4px; -moz-transform: translate3d(0, 150px, 0) rotate3d(0, 0, 1, 90deg) scale3d(1, 1, 1); -ms-transform: translate3d(0, 150px, 0) rotate3d(0, 0, 1, 90deg) scale3d(1, 1, 1); -webkit-transform: translate3d(0, 150px, 0) rotate3d(0, 0, 1, 90deg) scale3d(1, 1, 1); transform: translate3d(0, 150px, 0) rotate3d(0, 0, 1, 90deg) scale3d(1, 1, 1); } 85% { -moz-transform: translate3d(0, 150px, 0) rotate3d(0, 0, 1, 100deg) scale3d(1, 1, 1); -ms-transform: translate3d(0, 150px, 0) rotate3d(0, 0, 1, 100deg) scale3d(1, 1, 1); -webkit-transform: translate3d(0, 150px, 0) rotate3d(0, 0, 1, 100deg) scale3d(1, 1, 1); transform: translate3d(0, 150px, 0) rotate3d(0, 0, 1, 100deg) scale3d(1, 1, 1); } 86% { -moz-transform: translate3d(0, 150px, 0) rotate3d(0, 0, 1, -10deg) scale3d(1, 1, 1); -ms-transform: translate3d(0, 150px, 0) rotate3d(0, 0, 1, -10deg) scale3d(1, 1, 1); -webkit-transform: translate3d(0, 150px, 0) rotate3d(0, 0, 1, -10deg) scale3d(1, 1, 1); transform: translate3d(0, 150px, 0) rotate3d(0, 0, 1, -10deg) scale3d(1, 1, 1); transform-origin: 50% 50%; } 88% { padding: 0 56px; height: 10px; width: 115px; border-radius: 30px / 4px; -moz-transform: rotate3d(1, 0, 1, 0deg) scale3d(1, 0, 1); -ms-transform: rotate3d(1, 0, 1, 0deg) scale3d(1, 0, 1); -webkit-transform: rotate3d(1, 0, 1, 0deg) scale3d(1, 0, 1); transform: rotate3d(1, 0, 1, 0deg) scale3d(1, 0, 1); transform-origin: 50% 100%; -moz-transform-style: flat; -webkit-transform-style: flat; transform-style: flat; visibility: visible; } 88.5% { visibility: hidden; padding: 26px 16px; height: 337px; width: 487px; border-radius: 24px; transform-origin: 50% 100%; -moz-transform-style: preserve-3d; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -moz-transform: rotate3d(1, 0, 0, -71deg) scale3d(0.6, 0.7, 1); -ms-transform: rotate3d(1, 0, 0, -71deg) scale3d(0.6, 0.7, 1); -webkit-transform: rotate3d(1, 0, 0, -71deg) scale3d(0.6, 0.7, 1); transform: rotate3d(1, 0, 0, -71deg) scale3d(0.6, 0.7, 1); } 93%, 100% { visibility: visible; padding: 26px 16px; height: 337px; width: 487px; border-radius: 24px; transform-origin: 50% 100%; -moz-transform-style: preserve-3d; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -moz-transform: rotate3d(1, 0, 0, 0deg) scale3d(1, 1, 1); -ms-transform: rotate3d(1, 0, 0, 0deg) scale3d(1, 1, 1); -webkit-transform: rotate3d(1, 0, 0, 0deg) scale3d(1, 1, 1); transform: rotate3d(1, 0, 0, 0deg) scale3d(1, 1, 1); }
}
@-moz-keyframes keyboard { 0%, 5% { -moz-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 8% { opacity: 1; -moz-transform: scale3d(1.1, 1, 1); transform: scale3d(1.1, 1, 1); } 10%, 86% { opacity: 0; -moz-transform: scale3d(0, 0, 0); transform: scale3d(0, 0, 0); } 88%, 100% { opacity: 1; -moz-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
}
@-webkit-keyframes keyboard { 0%, 5% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 8% { opacity: 1; -webkit-transform: scale3d(1.1, 1, 1); transform: scale3d(1.1, 1, 1); } 10%, 86% { opacity: 0; -webkit-transform: scale3d(0, 0, 0); transform: scale3d(0, 0, 0); } 88%, 100% { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
}
@keyframes keyboard { 0%, 5% { -moz-transform: scale3d(1, 1, 1); -ms-transform: scale3d(1, 1, 1); -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 8% { opacity: 1; -moz-transform: scale3d(1.1, 1, 1); -ms-transform: scale3d(1.1, 1, 1); -webkit-transform: scale3d(1.1, 1, 1); transform: scale3d(1.1, 1, 1); } 10%, 86% { opacity: 0; -moz-transform: scale3d(0, 0, 0); -ms-transform: scale3d(0, 0, 0); -webkit-transform: scale3d(0, 0, 0); transform: scale3d(0, 0, 0); } 88%, 100% { opacity: 1; -moz-transform: scale3d(1, 1, 1); -ms-transform: scale3d(1, 1, 1); -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
}
@-moz-keyframes overlay { 0%, 9%, 88%, 100% { -moz-transform: translate3d(-820px, 0, 0); transform: translate3d(-820px, 0, 0); } 13%, 86% { -moz-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
}
@-webkit-keyframes overlay { 0%, 9%, 88%, 100% { -webkit-transform: translate3d(-820px, 0, 0); transform: translate3d(-820px, 0, 0); } 13%, 86% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
}
@keyframes overlay { 0%, 9%, 88%, 100% { -moz-transform: translate3d(-820px, 0, 0); -ms-transform: translate3d(-820px, 0, 0); -webkit-transform: translate3d(-820px, 0, 0); transform: translate3d(-820px, 0, 0); } 13%, 86% { -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
}
@-moz-keyframes rounded { 0%, 56% { border-radius: 24px; } 61%, 82.5% { border-radius: 14px; } 83.5%, 100% { border-radius: 30px / 4px; }
}
@-webkit-keyframes rounded { 0%, 56% { border-radius: 24px; } 61%, 82.5% { border-radius: 14px; } 83.5%, 100% { border-radius: 30px / 4px; }
}
@keyframes rounded { 0%, 56% { border-radius: 24px; } 61%, 82.5% { border-radius: 14px; } 83.5%, 100% { border-radius: 30px / 4px; }
}
@-moz-keyframes cam { 0%, 18% { -moz-transform: scale3d(0, 0, 0); transform: scale3d(0, 0, 0); } 21% { -moz-transform: scale3d(1.15, 1.15, 1); transform: scale3d(1.15, 1.15, 1); } 22.5%, 62% { -moz-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 63% { -moz-transform: translate3d(-2px, 0, 0); transform: translate3d(-2px, 0, 0); } 64%, 83.5% { -moz-transform: translate3d(-1px, 0, 0); transform: translate3d(-1px, 0, 0); } 84.5%, 100% { -moz-transform: scale3d(0, 0, 0); transform: scale3d(0, 0, 0); }
}
@-webkit-keyframes cam { 0%, 18% { -webkit-transform: scale3d(0, 0, 0); transform: scale3d(0, 0, 0); } 21% { -webkit-transform: scale3d(1.15, 1.15, 1); transform: scale3d(1.15, 1.15, 1); } 22.5%, 62% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 63% { -webkit-transform: translate3d(-2px, 0, 0); transform: translate3d(-2px, 0, 0); } 64%, 83.5% { -webkit-transform: translate3d(-1px, 0, 0); transform: translate3d(-1px, 0, 0); } 84.5%, 100% { -webkit-transform: scale3d(0, 0, 0); transform: scale3d(0, 0, 0); }
}
@keyframes cam { 0%, 18% { -moz-transform: scale3d(0, 0, 0); -ms-transform: scale3d(0, 0, 0); -webkit-transform: scale3d(0, 0, 0); transform: scale3d(0, 0, 0); } 21% { -moz-transform: scale3d(1.15, 1.15, 1); -ms-transform: scale3d(1.15, 1.15, 1); -webkit-transform: scale3d(1.15, 1.15, 1); transform: scale3d(1.15, 1.15, 1); } 22.5%, 62% { -moz-transform: scale3d(1, 1, 1); -ms-transform: scale3d(1, 1, 1); -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 63% { -moz-transform: translate3d(-2px, 0, 0); -webkit-transform: translate3d(-2px, 0, 0); transform: translate3d(-2px, 0, 0); } 64%, 83.5% { -moz-transform: translate3d(-1px, 0, 0); -webkit-transform: translate3d(-1px, 0, 0); transform: translate3d(-1px, 0, 0); } 84.5%, 100% { -moz-transform: scale3d(0, 0, 0); -ms-transform: scale3d(0, 0, 0); -webkit-transform: scale3d(0, 0, 0); transform: scale3d(0, 0, 0); }
}
@-moz-keyframes mic { 0%, 51% { -moz-transform: scale3d(0, 0, 0); transform: scale3d(0, 0, 0); } 65% { -moz-transform: scale3d(1.15, 1.15, 1); transform: scale3d(1.15, 1.15, 1); } 67%, 83.5% { -moz-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 84.5%, 100% { -moz-transform: scale3d(0, 0, 0); transform: scale3d(0, 0, 0); }
}
@-webkit-keyframes mic { 0%, 51% { -webkit-transform: scale3d(0, 0, 0); transform: scale3d(0, 0, 0); } 65% { -webkit-transform: scale3d(1.15, 1.15, 1); transform: scale3d(1.15, 1.15, 1); } 67%, 83.5% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 84.5%, 100% { -webkit-transform: scale3d(0, 0, 0); transform: scale3d(0, 0, 0); }
}
@keyframes mic { 0%, 51% { -moz-transform: scale3d(0, 0, 0); -ms-transform: scale3d(0, 0, 0); -webkit-transform: scale3d(0, 0, 0); transform: scale3d(0, 0, 0); } 65% { -moz-transform: scale3d(1.15, 1.15, 1); -ms-transform: scale3d(1.15, 1.15, 1); -webkit-transform: scale3d(1.15, 1.15, 1); transform: scale3d(1.15, 1.15, 1); } 67%, 83.5% { -moz-transform: scale3d(1, 1, 1); -ms-transform: scale3d(1, 1, 1); -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 84.5%, 100% { -moz-transform: scale3d(0, 0, 0); -ms-transform: scale3d(0, 0, 0); -webkit-transform: scale3d(0, 0, 0); transform: scale3d(0, 0, 0); }
}
@-moz-keyframes ipad { 0%, 18% { -moz-transform: scale3d(0, 0, 0); transform: scale3d(0, 0, 0); } 21% { -moz-transform: scale3d(1.15, 1.15, 1); transform: scale3d(1.15, 1.15, 1); } 22.5%, 62% { -moz-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 63% { -moz-transform: translate3d(6px, -1px, 0); transform: translate3d(6px, -1px, 0); } 64%, 83.5% { -moz-transform: translate3d(4px, -1px, 0); transform: translate3d(4px, -1px, 0); } 84.5%, 100% { -moz-transform: scale3d(0, 0, 0); transform: scale3d(0, 0, 0); }
}
@-webkit-keyframes ipad { 0%, 18% { -webkit-transform: scale3d(0, 0, 0); transform: scale3d(0, 0, 0); } 21% { -webkit-transform: scale3d(1.15, 1.15, 1); transform: scale3d(1.15, 1.15, 1); } 22.5%, 62% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 63% { -webkit-transform: translate3d(6px, -1px, 0); transform: translate3d(6px, -1px, 0); } 64%, 83.5% { -webkit-transform: translate3d(4px, -1px, 0); transform: translate3d(4px, -1px, 0); } 84.5%, 100% { -webkit-transform: scale3d(0, 0, 0); transform: scale3d(0, 0, 0); }
}
@keyframes ipad { 0%, 18% { -moz-transform: scale3d(0, 0, 0); -ms-transform: scale3d(0, 0, 0); -webkit-transform: scale3d(0, 0, 0); transform: scale3d(0, 0, 0); } 21% { -moz-transform: scale3d(1.15, 1.15, 1); -ms-transform: scale3d(1.15, 1.15, 1); -webkit-transform: scale3d(1.15, 1.15, 1); transform: scale3d(1.15, 1.15, 1); } 22.5%, 62% { -moz-transform: scale3d(1, 1, 1); -ms-transform: scale3d(1, 1, 1); -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 63% { -moz-transform: translate3d(6px, -1px, 0); -webkit-transform: translate3d(6px, -1px, 0); transform: translate3d(6px, -1px, 0); } 64%, 83.5% { -moz-transform: translate3d(4px, -1px, 0); -webkit-transform: translate3d(4px, -1px, 0); transform: translate3d(4px, -1px, 0); } 84.5%, 100% { -moz-transform: scale3d(0, 0, 0); -ms-transform: scale3d(0, 0, 0); -webkit-transform: scale3d(0, 0, 0); transform: scale3d(0, 0, 0); }
}
@-moz-keyframes iphone { 0%, 60% { -moz-transform: translate3d(0, -2px, 0) scale3d(0, 0, 0); transform: translate3d(0, -2px, 0) scale3d(0, 0, 0); } 63% { -moz-transform: translate3d(0, -2px, 0) scale3d(1, 1, 1); transform: translate3d(0, -2px, 0) scale3d(1, 1, 1); } 64%, 83.5% { -moz-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 84.5%, 100% { -moz-transform: scale3d(0, 0, 0); transform: scale3d(0, 0, 0); }
}
@-webkit-keyframes iphone { 0%, 60% { -webkit-transform: translate3d(0, -2px, 0) scale3d(0, 0, 0); transform: translate3d(0, -2px, 0) scale3d(0, 0, 0); } 63% { -webkit-transform: translate3d(0, -2px, 0) scale3d(1, 1, 1); transform: translate3d(0, -2px, 0) scale3d(1, 1, 1); } 64%, 83.5% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 84.5%, 100% { -webkit-transform: scale3d(0, 0, 0); transform: scale3d(0, 0, 0); }
}
@keyframes iphone { 0%, 60% { -moz-transform: translate3d(0, -2px, 0) scale3d(0, 0, 0); -ms-transform: translate3d(0, -2px, 0) scale3d(0, 0, 0); -webkit-transform: translate3d(0, -2px, 0) scale3d(0, 0, 0); transform: translate3d(0, -2px, 0) scale3d(0, 0, 0); } 63% { -moz-transform: translate3d(0, -2px, 0) scale3d(1, 1, 1); -ms-transform: translate3d(0, -2px, 0) scale3d(1, 1, 1); -webkit-transform: translate3d(0, -2px, 0) scale3d(1, 1, 1); transform: translate3d(0, -2px, 0) scale3d(1, 1, 1); } 64%, 83.5% { -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 84.5%, 100% { -moz-transform: scale3d(0, 0, 0); -ms-transform: scale3d(0, 0, 0); -webkit-transform: scale3d(0, 0, 0); transform: scale3d(0, 0, 0); }
}
@-moz-keyframes scr-01 { 0%, 85% { z-index: 12; } 86%, 100% { z-index: 20; }
}
@-webkit-keyframes scr-01 { 0%, 85% { z-index: 12; } 86%, 100% { z-index: 20; }
}
@keyframes scr-01 { 0%, 85% { z-index: 12; } 86%, 100% { z-index: 20; }
}
@-moz-keyframes scr-01-after { 0%, 18%, 86%, 100% { -moz-transform: scaleY(0); transform: scaleY(0); z-index: 13; } 22.5%, 85% { -moz-transform: scaleY(1); transform: scaleY(1); z-index: 13; }
}
@-webkit-keyframes scr-01-after { 0%, 18%, 86%, 100% { -webkit-transform: scaleY(0); transform: scaleY(0); z-index: 13; } 22.5%, 85% { -webkit-transform: scaleY(1); transform: scaleY(1); z-index: 13; }
}
@keyframes scr-01-after { 0%, 18%, 86%, 100% { -moz-transform: scaleY(0); -ms-transform: scaleY(0); -webkit-transform: scaleY(0); transform: scaleY(0); z-index: 13; } 22.5%, 85% { -moz-transform: scaleY(1); -ms-transform: scaleY(1); -webkit-transform: scaleY(1); transform: scaleY(1); z-index: 13; }
}
@-moz-keyframes scr-02 { 0%, 20% { opacity: 0; } 23%, 100% { opacity: 1; }
}
@-webkit-keyframes scr-02 { 0%, 20% { opacity: 0; } 23%, 100% { opacity: 1; }
}
@keyframes scr-02 { 0%, 20% { opacity: 0; } 23%, 100% { opacity: 1; }
}
@-moz-keyframes icon-20 { 0%, 20% { -moz-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } 23%, 100% { -moz-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
}
@-webkit-keyframes icon-20 { 0%, 20% { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } 23%, 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
}
@keyframes icon-20 { 0%, 20% { -moz-transform: translate3d(0, 100%, 0); -ms-transform: translate3d(0, 100%, 0); -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } 23%, 100% { -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
}
@-moz-keyframes icon-21 { 0%, 23% { -moz-transform: scale3d(0, 0, 0); transform: scale3d(0, 0, 0); } 25% { -moz-transform: scale3d(1.35, 1.35, 1); transform: scale3d(1.35, 1.35, 1); } 26%, 100% { -moz-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
}
@-webkit-keyframes icon-21 { 0%, 23% { -webkit-transform: scale3d(0, 0, 0); transform: scale3d(0, 0, 0); } 25% { -webkit-transform: scale3d(1.35, 1.35, 1); transform: scale3d(1.35, 1.35, 1); } 26%, 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
}
@keyframes icon-21 { 0%, 23% { -moz-transform: scale3d(0, 0, 0); -ms-transform: scale3d(0, 0, 0); -webkit-transform: scale3d(0, 0, 0); transform: scale3d(0, 0, 0); } 25% { -moz-transform: scale3d(1.35, 1.35, 1); -ms-transform: scale3d(1.35, 1.35, 1); -webkit-transform: scale3d(1.35, 1.35, 1); transform: scale3d(1.35, 1.35, 1); } 26%, 100% { -moz-transform: scale3d(1, 1, 1); -ms-transform: scale3d(1, 1, 1); -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
}
@-moz-keyframes icon-22 { 0%, 25% { -moz-transform: scale3d(0, 0, 0); transform: scale3d(0, 0, 0); } 27% { -moz-transform: scale3d(1.35, 1.35, 1); transform: scale3d(1.35, 1.35, 1); } 28%, 100% { -moz-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
}
@-webkit-keyframes icon-22 { 0%, 25% { -webkit-transform: scale3d(0, 0, 0); transform: scale3d(0, 0, 0); } 27% { -webkit-transform: scale3d(1.35, 1.35, 1); transform: scale3d(1.35, 1.35, 1); } 28%, 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
}
@keyframes icon-22 { 0%, 25% { -moz-transform: scale3d(0, 0, 0); -ms-transform: scale3d(0, 0, 0); -webkit-transform: scale3d(0, 0, 0); transform: scale3d(0, 0, 0); } 27% { -moz-transform: scale3d(1.35, 1.35, 1); -ms-transform: scale3d(1.35, 1.35, 1); -webkit-transform: scale3d(1.35, 1.35, 1); transform: scale3d(1.35, 1.35, 1); } 28%, 100% { -moz-transform: scale3d(1, 1, 1); -ms-transform: scale3d(1, 1, 1); -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
}
@-moz-keyframes icon-23 { 0%, 27% { -moz-transform: scale3d(0, 0, 0); transform: scale3d(0, 0, 0); } 29% { -moz-transform: scale3d(1.35, 1.35, 1); transform: scale3d(1.35, 1.35, 1); } 30%, 100% { -moz-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
}
@-webkit-keyframes icon-23 { 0%, 27% { -webkit-transform: scale3d(0, 0, 0); transform: scale3d(0, 0, 0); } 29% { -webkit-transform: scale3d(1.35, 1.35, 1); transform: scale3d(1.35, 1.35, 1); } 30%, 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
}
@keyframes icon-23 { 0%, 27% { -moz-transform: scale3d(0, 0, 0); -ms-transform: scale3d(0, 0, 0); -webkit-transform: scale3d(0, 0, 0); transform: scale3d(0, 0, 0); } 29% { -moz-transform: scale3d(1.35, 1.35, 1); -ms-transform: scale3d(1.35, 1.35, 1); -webkit-transform: scale3d(1.35, 1.35, 1); transform: scale3d(1.35, 1.35, 1); } 30%, 100% { -moz-transform: scale3d(1, 1, 1); -ms-transform: scale3d(1, 1, 1); -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
}
@-moz-keyframes icon-24 { 0%, 29% { -moz-transform: scale3d(0, 0, 0); transform: scale3d(0, 0, 0); } 31% { -moz-transform: scale3d(1.35, 1.35, 1); transform: scale3d(1.35, 1.35, 1); } 32%, 100% { -moz-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
}
@-webkit-keyframes icon-24 { 0%, 29% { -webkit-transform: scale3d(0, 0, 0); transform: scale3d(0, 0, 0); } 31% { -webkit-transform: scale3d(1.35, 1.35, 1); transform: scale3d(1.35, 1.35, 1); } 32%, 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
}
@keyframes icon-24 { 0%, 29% { -moz-transform: scale3d(0, 0, 0); -ms-transform: scale3d(0, 0, 0); -webkit-transform: scale3d(0, 0, 0); transform: scale3d(0, 0, 0); } 31% { -moz-transform: scale3d(1.35, 1.35, 1); -ms-transform: scale3d(1.35, 1.35, 1); -webkit-transform: scale3d(1.35, 1.35, 1); transform: scale3d(1.35, 1.35, 1); } 32%, 100% { -moz-transform: scale3d(1, 1, 1); -ms-transform: scale3d(1, 1, 1); -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
}
@-moz-keyframes scr-02-after { 0%, 36.5% { -moz-transform: scaleX(0); transform: scaleX(0); } 40%, 100% { -moz-transform: scaleX(1); transform: scaleX(1); }
}
@-webkit-keyframes scr-02-after { 0%, 36.5% { -webkit-transform: scaleX(0); transform: scaleX(0); } 40%, 100% { -webkit-transform: scaleX(1); transform: scaleX(1); }
}
@keyframes scr-02-after { 0%, 36.5% { -moz-transform: scaleX(0); -ms-transform: scaleX(0); -webkit-transform: scaleX(0); transform: scaleX(0); } 40%, 100% { -moz-transform: scaleX(1); -ms-transform: scaleX(1); -webkit-transform: scaleX(1); transform: scaleX(1); }
}
@-moz-keyframes scr-03 { 0%, 40% { opacity: 0; } 40.5%, 100% { opacity: 1; }
}
@-webkit-keyframes scr-03 { 0%, 40% { opacity: 0; } 40.5%, 100% { opacity: 1; }
}
@keyframes scr-03 { 0%, 40% { opacity: 0; } 40.5%, 100% { opacity: 1; }
}
@-moz-keyframes icon-31 { 0%, 40%, 58%, 100% { -moz-transform: scale3d(0, 0, 0); transform: scale3d(0, 0, 0); } 42% { -moz-transform: scale3d(1.35, 1.35, 1); transform: scale3d(1.35, 1.35, 1); } 43%, 57% { -moz-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
}
@-webkit-keyframes icon-31 { 0%, 40%, 58%, 100% { -webkit-transform: scale3d(0, 0, 0); transform: scale3d(0, 0, 0); } 42% { -webkit-transform: scale3d(1.35, 1.35, 1); transform: scale3d(1.35, 1.35, 1); } 43%, 57% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
}
@keyframes icon-31 { 0%, 40%, 58%, 100% { -moz-transform: scale3d(0, 0, 0); -ms-transform: scale3d(0, 0, 0); -webkit-transform: scale3d(0, 0, 0); transform: scale3d(0, 0, 0); } 42% { -moz-transform: scale3d(1.35, 1.35, 1); -ms-transform: scale3d(1.35, 1.35, 1); -webkit-transform: scale3d(1.35, 1.35, 1); transform: scale3d(1.35, 1.35, 1); } 43%, 57% { -moz-transform: scale3d(1, 1, 1); -ms-transform: scale3d(1, 1, 1); -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
}
@-moz-keyframes icon-32 { 0%, 42%, 58%, 100% { -moz-transform: scale3d(0, 0, 0); transform: scale3d(0, 0, 0); } 44% { -moz-transform: scale3d(1.35, 1.35, 1); transform: scale3d(1.35, 1.35, 1); } 45%, 57% { -moz-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
}
@-webkit-keyframes icon-32 { 0%, 42%, 58%, 100% { -webkit-transform: scale3d(0, 0, 0); transform: scale3d(0, 0, 0); } 44% { -webkit-transform: scale3d(1.35, 1.35, 1); transform: scale3d(1.35, 1.35, 1); } 45%, 57% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
}
@keyframes icon-32 { 0%, 42%, 58%, 100% { -moz-transform: scale3d(0, 0, 0); -ms-transform: scale3d(0, 0, 0); -webkit-transform: scale3d(0, 0, 0); transform: scale3d(0, 0, 0); } 44% { -moz-transform: scale3d(1.35, 1.35, 1); -ms-transform: scale3d(1.35, 1.35, 1); -webkit-transform: scale3d(1.35, 1.35, 1); transform: scale3d(1.35, 1.35, 1); } 45%, 57% { -moz-transform: scale3d(1, 1, 1); -ms-transform: scale3d(1, 1, 1); -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
}
@-moz-keyframes icon-33 { 0%, 44%, 58%, 100% { -moz-transform: scale3d(0, 0, 0); transform: scale3d(0, 0, 0); } 46% { -moz-transform: scale3d(1.35, 1.35, 1); transform: scale3d(1.35, 1.35, 1); } 47%, 57% { -moz-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
}
@-webkit-keyframes icon-33 { 0%, 44%, 58%, 100% { -webkit-transform: scale3d(0, 0, 0); transform: scale3d(0, 0, 0); } 46% { -webkit-transform: scale3d(1.35, 1.35, 1); transform: scale3d(1.35, 1.35, 1); } 47%, 57% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
}
@keyframes icon-33 { 0%, 44%, 58%, 100% { -moz-transform: scale3d(0, 0, 0); -ms-transform: scale3d(0, 0, 0); -webkit-transform: scale3d(0, 0, 0); transform: scale3d(0, 0, 0); } 46% { -moz-transform: scale3d(1.35, 1.35, 1); -ms-transform: scale3d(1.35, 1.35, 1); -webkit-transform: scale3d(1.35, 1.35, 1); transform: scale3d(1.35, 1.35, 1); } 47%, 57% { -moz-transform: scale3d(1, 1, 1); -ms-transform: scale3d(1, 1, 1); -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
}
@-moz-keyframes icon-34 { 0%, 46%, 58%, 100% { -moz-transform: scale3d(0, 0, 0); transform: scale3d(0, 0, 0); } 48% { -moz-transform: scale3d(1.35, 1.35, 1); transform: scale3d(1.35, 1.35, 1); } 49%, 57% { -moz-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
}
@-webkit-keyframes icon-34 { 0%, 46%, 58%, 100% { -webkit-transform: scale3d(0, 0, 0); transform: scale3d(0, 0, 0); } 48% { -webkit-transform: scale3d(1.35, 1.35, 1); transform: scale3d(1.35, 1.35, 1); } 49%, 57% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
}
@keyframes icon-34 { 0%, 46%, 58%, 100% { -moz-transform: scale3d(0, 0, 0); -ms-transform: scale3d(0, 0, 0); -webkit-transform: scale3d(0, 0, 0); transform: scale3d(0, 0, 0); } 48% { -moz-transform: scale3d(1.35, 1.35, 1); -ms-transform: scale3d(1.35, 1.35, 1); -webkit-transform: scale3d(1.35, 1.35, 1); transform: scale3d(1.35, 1.35, 1); } 49%, 57% { -moz-transform: scale3d(1, 1, 1); -ms-transform: scale3d(1, 1, 1); -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
}
@-moz-keyframes scr-04 { 0%, 57% { -moz-transform: translate3d(477px, 0, 0); transform: translate3d(477px, 0, 0); } 60%, 65% { -moz-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); background-position: left center; } 85%, 100% { background-position: right center; }
}
@-webkit-keyframes scr-04 { 0%, 57% { -webkit-transform: translate3d(477px, 0, 0); transform: translate3d(477px, 0, 0); } 60%, 65% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); background-position: left center; } 85%, 100% { background-position: right center; }
}
@keyframes scr-04 { 0%, 57% { -moz-transform: translate3d(477px, 0, 0); -ms-transform: translate3d(477px, 0, 0); -webkit-transform: translate3d(477px, 0, 0); transform: translate3d(477px, 0, 0); } 60%, 65% { -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); background-position: left center; } 85%, 100% { background-position: right center; }
}
@-moz-keyframes scr-04-after { 0%, 60% { -moz-transform: scaleX(0); transform: scaleX(0); } 62%, 65% { -moz-transform: scaleX(1); transform: scaleX(1); } 67%, 100% { -moz-transform: translateX(-100%); transform: translateX(-100%); }
}
@-webkit-keyframes scr-04-after { 0%, 60% { -webkit-transform: scaleX(0); transform: scaleX(0); } 62%, 65% { -webkit-transform: scaleX(1); transform: scaleX(1); } 67%, 100% { -webkit-transform: translateX(-100%); transform: translateX(-100%); }
}
@keyframes scr-04-after { 0%, 60% { -moz-transform: scaleX(0); -ms-transform: scaleX(0); -webkit-transform: scaleX(0); transform: scaleX(0); } 62%, 65% { -moz-transform: scaleX(1); -ms-transform: scaleX(1); -webkit-transform: scaleX(1); transform: scaleX(1); } 67%, 100% { -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -webkit-transform: translateX(-100%); transform: translateX(-100%); }
}
@-moz-keyframes scr-05 { 0%, 88% { opacity: 0; z-index: 1; } 89%, 93% { opacity: 1; z-index: 21; height: 100%; } 99% { z-index: 21; height: 0; } 100% { z-index: 1; height: 0; }
}
@-webkit-keyframes scr-05 { 0%, 88% { opacity: 0; z-index: 1; } 89%, 93% { opacity: 1; z-index: 21; height: 100%; } 99% { z-index: 21; height: 0; } 100% { z-index: 1; height: 0; }
}
@keyframes scr-05 { 0%, 88% { opacity: 0; z-index: 1; } 89%, 93% { opacity: 1; z-index: 21; height: 100%; } 99% { z-index: 21; height: 0; } 100% { z-index: 1; height: 0; }
}

ELEKS Digital Production - Script Codes JS Codes

/*
Inspired by ELEKS Digital Production https://dribbble.com/shots/1438296-ELEKS-Digital-Production
*/

Home Page	Home
Developer	Arsen Zbidniakov
Username	ARS
Uploaded	October 13, 2022
Rating	4
Size	9,176 Kb
Views	12,144

Do you need developer help for ELEKS Digital Production?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Arsen Zbidniakov (ARS) Script Codes

Name	Size
Page Transition Loader	7,268 Kb
IPhone lockscreen	3,923 Kb
Infinity Morph	2,974 Kb
Long Shadows for Font Awesome	3,424 Kb
Apple Devices Mockup	2,484 Kb
HTML5 Audio Player	5,934 Kb
Shattering Text Animation	5,244 Kb
Understanding CSS clip	8,794 Kb
Animated Gradient Ghost Button Concept	3,590 Kb
Timer	2,845 Kb

Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!

Similar Scripts & Codes

Name	Username	Size
A Pen by Dalton Liu	Liudalton	12,437 Kb
Transitioning application screens with semantically named classes	Djgrant	3,697 Kb
Click Based Rotation Demo	Zeaklous	2,086 Kb
Underlined form fields	Mitchdot	2,323 Kb
Wavy Road with Dashes	Jonobr1	2,679 Kb
Simple DevTools	Deegill	2,511 Kb
Nice responsive team page	Infomiho	3,139 Kb
Scrolling Horizontal Isotope	Bramus	2,017 Kb
Navier Stoke Fluid Simulation	Esimov	8,584 Kb
Canvas snow	Win7killer	2,572 Kb

Do you want hide your ip address?

Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!