SEO Animated
How do I make an seo animated?
A micro animation for my website to explain SEO simply. What is a seo animated? How do you make a seo animated? This script and codes were developed by Jordane on 14 December 2022, Wednesday.
SEO Animated Previews
SEO Animated - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>SEO Animated</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="browser-elements"> <div class="top"> <span class="top-ellipse"></span> <span class="top-ellipse"></span> <span class="top-ellipse"></span> <span class="top-input"><span class="top-url"></span></span> </div> <!--.top--> <div class="center"> <span class="scroll-line"></span> <span class="scroll"></span> <div class="browser-page-1"> <div class="center-wrapper-ellipse center-wrapper-ellipse-1"> <span class="center-ellipse center-ellipse-1"></span> <span class="center-ellipse center-ellipse-1"></span> <span class="center-ellipse center-ellipse-1"></span> <span class="center-ellipse center-ellipse-1"></span> <span class="center-ellipse center-ellipse-1"></span> <span class="center-ellipse center-ellipse-1"></span> </div> <span class="center-google-country"></span> <span class="center-google-input google-input-1"> <span class="keyword1"></span> <span class="keyword2"></span> </span> <span class="center-search"><span class="reaction"></span></span> <span class="center-lucky"></span> </div> <!--.browser-page-1--> <div class="browser-page-2 browser-page-2-bis"> <div class="center-wrapper-ellipse center-wrapper-ellipse-2"> <span class="center-ellipse center-ellipse-2"></span> <span class="center-ellipse center-ellipse-2"></span> <span class="center-ellipse center-ellipse-2"></span> <span class="center-ellipse center-ellipse-2"></span> <span class="center-ellipse center-ellipse-2"></span> <span class="center-ellipse center-ellipse-2"></span> <span class="center-google-input google-input-2"> <span class="keyword1"></span> <span class="keyword2"></span> </span> <span class="center-google-input-search"></span> </div> <!--.center-wrapper-ellipse--> <div class="center-wrapper-google-category"> <span class="center-google-category"></span> <span class="center-google-category"></span> <span class="center-google-category"></span> <span class="center-google-category"></span> <span class="center-google-category"></span> <span class="center-google-category"></span> <span class="center-google-category"></span> </div> <!--.center-wrapper-google-category--> <div class="center-wrapper-google-site-web"> <div class="google-site-web"> <span class="title"></span> <span class="url"></span> <span class="description"></span> </div> <div class="google-site-web"> <span class="title"></span> <span class="url"></span> <span class="description"></span> </div> <div class="google-site-web"> <span class="title"></span> <span class="url"></span> <span class="description"></span> </div> <div class="google-site-web"> <span class="title"></span> <span class="url"></span> <span class="description"></span> </div> <div class="google-site-web"> <span class="title"><span class="reaction"></span></span> <span class="url"></span> <span class="description"></span> </div> </div> <!--.center-wrapper-google-site-web--> <span class="aside"></span> </div> <!--.browser-page-2--> <div class="browser-page-3"> <!--<span class="website-title"></span> <span class="website-main"></span> <span class="website-aside"></span> <span class="website-prefooter"></span> <span class="website-footer"></span>--> <svg version="1.1" id="stats" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 610.5 411" style="enable-background:new 0 0 610.5 411;" xml:space="preserve"> <polyline id="stat-trace" class="stat-trace" points="42.9,27.9 42.9,387.4 582.4,387.4 " /> <g id="pic"> <polyline class="stat-line" points="75.6,117.7 135,187.2 218.9,32.1 350.2,271.7 429.1,178 507.7,326.2 534,296.8 556.1,328 " /> <polygon class="stat-cursor" points="568.1,346.6 555.6,340.9 543.2,335.3 554.3,327.3 565.4,319.3 566.8,332.9 " /> </g> <g id="points"> <circle id="point-6" class="stat-point" cx="78.2" cy="123.5" r="13" /> <circle id="point-5" class="stat-point" cx="134.2" cy="183.5" r="13" /> <circle id="point-4" class="stat-point" cx="218.2" cy="40.5" r="13" /> <circle id="point-3" class="stat-point" cx="350.2" cy="264.5" r="13" /> <circle id="point-2" class="stat-point" cx="428.2" cy="183.5" r="13" /> <circle id="point-1" class="stat-point" cx="509.2" cy="319.5" r="13" /> </g> </svg> <h4 class="message-stat">Need Optimization</h4> </div> <!--.browser-page-3--> <div class="browser-page-4"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 282 324" style="enable-background:new 0 0 282 324;" xml:space="preserve"> <g id="svg-footer"> <rect x="11.7" y="246.9" class="st0" width="256.2" height="32.9" /> </g> <g id="svg-aside"> <rect x="228.4" y="41" class="st1" width="39.4" height="197" /> </g> <g id="svg-main-3"> <rect x="124.3" y="90.1" class="st1" width="96.8" height="148.5" /> </g> <g id="svg-main-2"> <rect x="11.9" y="90.1" class="st1" width="105" height="148.5" /> </g> <g id="svg-main-1"> <rect x="11.9" y="41" class="st1" width="209.3" height="42.1" /> </g> <g id="svg-title"> <rect x="11.9" y="15" class="st2" width="105" height="16.7" /> </g> </svg> </div> <!--.browser-page-4--> <div class="browser-page-5"> <span class="reflect"></span> <svg version="1.1" id="cup" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 594 567" style="enable-background:new 0 0 594 567;" xml:space="preserve"> <path id="cup" class="cup" d="M503.8,110.1c-1.1-1.7-3.1-2.9-5.8-2.9h-55.4c-2.2-14.5-5.2-25.1-6.5-29.1c1.4-1.5,2.8-3,4.2-4.5 c2.2-2.4,2.4-6.1,0-8.5c-0.7-0.7-1.7-1.2-2.7-1.5c-0.8-0.4-1.7-0.7-2.8-0.7H159c-1.1,0-2,0.2-2.8,0.7c-1,0.3-1.9,0.8-2.7,1.5 c-2.4,2.4-2.2,6.1,0,8.5c1.4,1.5,2.8,3,4.2,4.5c-1.3,4-4.3,14.5-6.5,29.1H96c-2.5,0-4.3,1-5.4,2.4c-1.4,1.4-2.4,3.2-2.2,5.2 c2.8,37.6,17.3,73.4,41.1,102.7c25,30.7,59.8,53.1,98,63.3c-1.8,6.6-2.6,17,8.1,21.3c7.3,3,15.3,6.5,20.6,12.5 c5.7,6.4,3.6,13.5-2.2,19.1c-2.2,2.1-2.9,4-2.2,7l14.6,82.1h-13.9c-2.7,0-6.9,1.1-9.2,2.4l-25.7,14.1c-2.4,1.3-4.3,4.6-4.3,7.2v15.6 c0,2.7,2.2,4.9,4.9,4.9h157.7c2.7,0,4.9-2.2,4.9-4.9l0-15.8c0-2.9-1.6-5.6-4.2-7c-6.5-3.6-19.3-10.5-25.9-14.2 c-2.4-1.3-6.5-2.4-9.2-2.4h-13.8c0,0,14.5-81.8,14.6-82.1c0.4-2.2,0.5-4.2-1-5.9c-1.6-1.8-3.4-3.2-4.7-5.2c-1.9-2.9-2.8-6.4-1.7-9.8 c2.3-7.2,10.6-11.6,16.8-14.6c2.2-1.1,4.6-2.1,6.9-3.1c10.7-4.3,9.9-14.8,8.1-21.3c38.2-10.2,73-32.6,98-63.3 c23.8-29.3,38.3-65,41.1-102.7C505.7,113.1,505,111.4,503.8,110.1z M177.3,238.3c-7.7-5.1-12.4-8.7-19.2-14.8 c-4.1-3.7-8.1-7.6-11.9-11.7c-2-2.1-3.9-4.3-5.8-6.5c-0.9-1-1.7-2-2.5-3.1c-0.4-0.5-0.8-1.1-1.2-1.5c0-0.1-0.6-0.7-0.7-1 c-6.6-8.7-12.5-18-17.4-27.7c-1.3-2.6-2.5-5.2-3.7-7.8c-0.3-0.6-0.5-1.2-0.8-1.8c0-0.1-0.4-1.1-0.5-1.2c-0.4-1.1-0.9-2.1-1.3-3.2 c-2-5.2-3.8-10.5-5.3-15.9c-1.5-5.4-2.8-10.9-3.8-16.4c-0.2-1.2-0.4-2.5-0.6-3.7h44.9c-2.1,37.9,5.4,89.7,50.6,128.1 C190.8,246.6,183.9,242.7,177.3,238.3z M365.3,148.5l-40.2,29.2l15.4,47.3c1.1,3.3-0.4,4.3-3.2,2.3l-40.2-29.2l-40.2,29.3 c-2.8,2.1-4.3,1-3.2-2.3l15.4-47.3l-40.2-29.2c-2.8-2.1-2.3-3.7,1.2-3.7h49.7l15.4-47.3c1.1-3.3,2.8-3.3,3.9,0l15.4,47.3h49.7 C367.5,144.8,368.1,146.5,365.3,148.5z M487,125.6c-1,5.5-2.2,11-3.8,16.4c-1.5,5.4-3.3,10.7-5.3,15.9c-0.4,1.1-0.8,2.2-1.3,3.2 c0,0.1-0.5,1.1-0.5,1.2c-0.3,0.6-0.5,1.2-0.8,1.8c-1.2,2.6-2.4,5.2-3.7,7.8c-4.9,9.8-10.8,19-17.4,27.7c-0.2,0.2-0.7,0.9-0.7,1 c-0.4,0.5-0.8,1.1-1.2,1.5c-0.8,1.1-1.7,2.1-2.5,3.1c-1.8,2.2-3.8,4.3-5.8,6.5c-3.8,4.1-7.8,8-11.9,11.7 c-6.8,6.1-11.6,9.7-19.2,14.8c-6.6,4.4-13.5,8.3-20.6,11.8c45.2-38.5,52.7-90.3,50.6-128.2h44.9C487.4,123.2,487.2,124.4,487,125.6z " /> </svg> <h4 class="message-cup">better visibility, better conversion</h4> </div> <!--.browser-page-5--> </div> <!--.center--> </div> <!--.browser-elements--> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>
SEO Animated - Script Codes CSS Codes
/* switching to border-box model for all elements */
html { box-sizing: border-box;
}
* { box-sizing: inherit;
}
html { /* set base font-size to equiv "10px", which is adapted to rem unit */ font-size: 62.5%; /* IE9-IE11 math fixing. See https://bit.ly/1g4X0bX */ /* thanks to @guardian, @victorbritopro and @eQRoeil */ font-size: calc(1em * 0.625);
}
body { background: white; font-size: 1.4em;
}
/* BROWSER-ELEMENTS */
.browser-elements { margin-left: 30rem; margin-bottom: 50rem;
}
.browser-elements .top { width: 30rem; background: #cccccc; border: 1px solid #cccccc; padding: 1rem 0;
}
.browser-elements .top-ellipse { display: inline-block; vertical-align: middle; background: #999999; width: 0.75rem; height: 0.75rem; border-radius: 0.75rem;
}
.browser-elements .top-ellipse:nth-child(1) { margin-left: 0.5rem;
}
.browser-elements .top-ellipse:nth-child(3) { margin-right: 0.2rem;
}
.browser-elements .top-input { display: inline-block; vertical-align: middle; height: 2.5rem; padding: .5rem 0; width: 24rem; background: white;
}
.browser-elements .top-url { display: inline-block; vertical-align: middle; background: #cccccc; width: 15rem; height: 1rem; margin-left: 1rem;
}
.browser-elements .center { overflow: hidden; background: white; border: 1px solid #cccccc; width: 30rem; height: 40rem;
}
.browser-elements .scroll { display: inline-block; vertical-align: top; width: .74rem; height: 4.7rem; background: #cccccc; margin-top: 1rem; margin-left: 28.7rem; -webkit-animation: anim-scroll 40s linear infinite forwards ; animation: anim-scroll 40s linear infinite forwards;
}
@-webkit-keyframes anim-scroll { 0% {margin-top: 1rem;opacity: 0;} 10% {margin-top: 1rem;opacity: 0;} 14% {margin-top: 1rem;opacity: 1;} 16% {margin-top: 15rem;opacity: 1;} 22% {margin-top: 15rem;opacity: 1;} 23% {margin-top: 15rem;opacity: 0;} 49% {margin-top: 15rem;opacity: 0;} 50% {margin-top: 15rem;opacity: 1;} 52% {margin-top: 1rem;opacity: 1;} 58% {margin-top: 1rem;opacity: 0;} 100% {margin-top: 1rem;opacity: 0;}
}
@keyframes anim-scroll { 0% {margin-top: 1rem;opacity: 0;} 10% {margin-top: 1rem;opacity: 0;} 14% {margin-top: 1rem;opacity: 1;} 16% {margin-top: 15rem;opacity: 1;} 22% {margin-top: 15rem;opacity: 1;} 23% {margin-top: 15rem;opacity: 0;} 49% {margin-top: 15rem;opacity: 0;} 50% {margin-top: 15rem;opacity: 1;} 52% {margin-top: 1rem;opacity: 1;} 58% {margin-top: 1rem;opacity: 0;} 100% {margin-top: 1rem;opacity: 0;}
}
/* DIAPO 1 */
.browser-page-1 { /*display: none;*/ display: block; text-align: center; margin-left: 0rem; -webkit-animation: anim-slide1 40s linear infinite forwards; animation: anim-slide1 40s linear infinite forwards;
}
@-webkit-keyframes anim-slide1 { 0% {margin-left: 0rem;} 9% {margin-left: 0rem;} 10% {margin-left: -58rem;} 100% {margin-left: -58rem;}
}
@keyframes anim-slide1 { 0% {margin-left: 0rem;} 9% {margin-left: 0rem;} 10% {margin-left: -58rem;} 100% {margin-left: -58rem;}
}
.browser-page-1 .center-wrapper-ellipse-1 { display: block;
}
.center-ellipse { display: inline-block; vertical-align: middle; border-radius: 2rem;
}
.center-ellipse-1 { width: 1.5rem; height: 1.5rem;
}
.center-ellipse:nth-child(1) { width: 3rem; height: 3rem;
}
.center-ellipse:nth-child(1), .center-ellipse:nth-child(4) { background: #1368e9;
}
.center-ellipse:nth-child(2), .center-ellipse:nth-child(6) { background: #d5422d;
}
.center-ellipse:nth-child(3) { background: #ffb708;
}
.center-ellipse:nth-child(5) { background: #009857;
}
.center-google-country { display: block; margin-left: 17rem; background: #cccccc; width: 4rem; height: 1rem;
}
.center-google-input { display: block; margin: 2rem auto; background: white; border: 1px solid #cccccc;
}
.browser-page-1 .keyword1{ display: inline-block; background: #CCCCCC; width: 2rem; height: 1.3rem; margin-left: 0rem; margin: 0.45rem 0 0 -12rem; -webkit-animation: anim-keyword1 40s linear infinite forwards; animation: anim-keyword1 40s linear infinite forwards;
}
@-webkit-keyframes anim-keyword1 { 0%{width: 0rem;height: 1.3rem;} 3%{width: 0rem;height: 1.3rem;} 4%{width: 2rem;height: 1.3rem;} 100%{width: 2rem;height: 1.3rem;}
}
@keyframes anim-keyword1 { 0%{width: 0rem;height: 1.3rem;} 3%{width: 0rem;height: 1.3rem;} 4%{width: 2rem;height: 1.3rem;} 100%{width: 2rem;height: 1.3rem;}
}
.browser-page-1 .keyword2{ display: inline-block; background: #CCCCCC; width: 8.0rem; height: 1.3rem; margin: 0.45rem 0 0 0rem; -webkit-animation: anim-keyword2 40s linear infinite forwards; animation: anim-keyword2 40s linear infinite forwards;
}
@-webkit-keyframes anim-keyword2 { 0%{width: 0rem;height: 1.3rem;} 5%{width: 0rem;height: 1.3rem;} 7%{width: 8rem;height: 1.3rem;} 100%{width: 8rem;height: 1.3rem;}
}
@keyframes anim-keyword2 { 0%{width: 0rem;height: 1.3rem;} 5%{width: 0rem;height: 1.3rem;} 7%{width: 8rem;height: 1.3rem;} 100%{width: 8rem;height: 1.3rem;}
}
.google-input-1 { width: 24rem; height: 2.5rem;
}
.center-search { display: inline-block; background: #CCCCCC; border: 1px solid #CCCCCC; margin: 0 auto; width: 7rem; height: 2rem;
}
.center-search .reaction { background: white; margin: 0 auto; opacity: 0; display: block; width: 0%; height: 0%; padding: 0.9rem 3.5rem; -webkit-animation: anim-clicSearch 40s linear infinite forwards; animation: anim-clicSearch 40s linear infinite forwards;
}
@-webkit-keyframes anim-clicSearch { 0% {width: 0%;height: 0%;opacity: 0;} 7% {width: 0%;height: 0%;opacity: 0;} 8% {width: 100%;height: 100%;opacity: 0.4;} 9% {width: 0%;height: 0%;opacity: 0;} 100% {width: 0%;height: 0%;opacity: 0;}
}
@keyframes anim-clicSearch { 0% {width: 0%;height: 0%;opacity: 0;} 7% {width: 0%;height: 0%;opacity: 0;} 8% {width: 100%;height: 100%;opacity: 0.4;} 9% {width: 0%;height: 0%;opacity: 0;} 100% {width: 0%;height: 0%;opacity: 0;}
}
.center-lucky { display: inline-block; background: #CCCCCC; margin: 0 0 0 1rem; width: 7rem; height: 2rem;
}
/* DIAPO 2 */
.browser-page-2 { /*display: none;*/ display: block; width: 30rem; margin-top: -14rem; margin-left: 30rem; -webkit-animation: anim-slide2 40s linear infinite forwards; animation: anim-slide2 40s linear infinite forwards;
}
@-webkit-keyframes anim-slide2 { 0% {margin-top: -14rem;margin-left: 30rem;} 10% {margin-top: -14rem;margin-left: 30rem;} 12% {margin-top: -14rem;margin-left: 0rem;} 14% {margin-top: -14rem;margin-left: 0rem;} 16% {margin-top: -42rem;margin-left: 0rem;} 21% {margin-top: -42rem;margin-left: 0rem;} 23% {margin-top: -42rem;margin-left: -30rem;} 24% {margin-top: 12rem;margin-left: -30rem;} 25% {margin-top: 12rem;margin-left: -30rem;} 26% {margin-top: 12rem;margin-left: -0rem;} 27% {margin-top: 12rem;margin-left: -0rem;} 43%{margin-top: 12rem;margin-left: 0rem;} 44%{margin-top: -42rem;margin-left: 0rem;} 50%{margin-top: -42rem;margin-left: 0rem;} 52%{margin-top: -14rem;margin-left: 0rem;opacity: 1;} 57%{opacity: 1;} 58%{opacity: 0;} 100% {margin-top: -14rem;margin-left: 0rem;opacity: 0;}
}
@keyframes anim-slide2 { 0% {margin-top: -14rem;margin-left: 30rem;} 10% {margin-top: -14rem;margin-left: 30rem;} 12% {margin-top: -14rem;margin-left: 0rem;} 14% {margin-top: -14rem;margin-left: 0rem;} 16% {margin-top: -42rem;margin-left: 0rem;} 21% {margin-top: -42rem;margin-left: 0rem;} 23% {margin-top: -42rem;margin-left: -30rem;} 24% {margin-top: 12rem;margin-left: -30rem;} 25% {margin-top: 12rem;margin-left: -30rem;} 26% {margin-top: 12rem;margin-left: -0rem;} 27% {margin-top: 12rem;margin-left: -0rem;} 43%{margin-top: 12rem;margin-left: 0rem;} 44%{margin-top: -42rem;margin-left: 0rem;} 50%{margin-top: -42rem;margin-left: 0rem;} 52%{margin-top: -14rem;margin-left: 0rem;opacity: 1;} 57%{opacity: 1;} 58%{opacity: 0;} 100% {margin-top: -14rem;margin-left: 0rem;opacity: 0;}
}
.center-wrapper-ellipse-2 { display: inline-block; vertical-align: top; margin-top: -5rem; margin-left: 1rem;
} .browser-page-2 .center-ellipse-2 { width: 1rem; height: 1rem;
} .browser-page-2 .center-ellipse:nth-child(1) { width: 2rem; height: 2rem;
}
.google-input-2 { display: inline-block; vertical-align: middle; width: 14rem; height: 1.5rem;
} .browser-page-2 .keyword1 { display: inline-block; background: #CCCCCC; width: 1.3rem; height: 0.5rem; margin-left: 1rem; margin-bottom: 0.2rem;
} .browser-page-2 .keyword2 { display: inline-block; background: #CCCCCC; width: 4.0rem; height: 0.5rem; margin-bottom: 0.2rem;
}
.center-google-input-search { display: inline-block; margin-left: -0.5rem; vertical-align: middle; background: #CCCCCC; width: 1.5rem; height: 1.5rem;
}
.center-wrapper-google-category { margin-left: 2rem;
}
.center-google-category { display: inline-block; vertical-align: top; background: #CCCCCC; width: 2.3rem; height: 1rem;
}
.center-google-category:nth-child(6):after { content: ""; display: inline-block; vertical-align: middle; margin-left: 2.7rem; margin-top: -0.5rem; width: 0; height: 0; border-style: solid; border-width: 2.5px 2.25px 0 2.25px; border-color: #cccccc transparent transparent transparent;
}
.center-google-category:nth-child(7) { margin-left: 1rem;
}
.center-wrapper-google-site-web { margin-top: 2rem; margin-left: 2rem; display: inline-block; vertical-align: top;
}
.google-site-web { margin-bottom: 2rem;
}
.google-site-web:nth-child(1),.google-site-web:nth-child(2),.google-site-web:nth-child(3),.google-site-web:nth-child(4),.aside { -webkit-animation: anim-googleSiteWeb 40s linear infinite forwards; animation: anim-googleSiteWeb 40s linear infinite forwards;
}
@-webkit-keyframes anim-googleSiteWeb { 0% {opacity: 1;} 16% {opacity: 1;} 18% {opacity: 0.2;} 46% {opacity: 1;} 47% {opacity: 1;} 100% {opacity: 1;}
}
@keyframes anim-googleSiteWeb { 0% {opacity: 1;} 16% {opacity: 1;} 18% {opacity: 0.2;} 46% {opacity: 1;} 47% {opacity: 1;} 100% {opacity: 1;}
}
.google-site-web:nth-child(1) .title{ -webkit-animation: anim-googleSiteWebTitle1 40s linear infinite forwards; animation: anim-googleSiteWebTitle1 40s linear infinite forwards;
}
@-webkit-keyframes anim-googleSiteWebTitle1 { 0% {background: #CCCCCC;opacity: 1;} 53% {background: #CCCCCC;opacity: 1;} 54% {background: #e7c791;opacity: 0.7;} 55% {background: #e7c791;opacity: 0.7;} 56% {background: #e7c791;opacity: 0.7;} 100% {background: #e7c791;opacity: 0.7;}
}
@keyframes anim-googleSiteWebTitle1 { 0% {background: #CCCCCC;opacity: 1;} 53% {background: #CCCCCC;opacity: 1;} 54% {background: #e7c791;opacity: 0.7;} 55% {background: #e7c791;opacity: 0.7;} 56% {background: #e7c791;opacity: 0.7;} 100% {background: #e7c791;opacity: 0.7;}
}
.google-site-web:nth-child(1) .url{ -webkit-animation: anim-googleSiteWebUrl1 40s linear infinite forwards; animation: anim-googleSiteWebUrl1 40s linear infinite forwards;
}
@-webkit-keyframes anim-googleSiteWebUrl1 { 0% {background: #CCCCCC;opacity: 1;} 53% {background: #CCCCCC;opacity: 1;} 54% {background: #e7c791;opacity: 1;} 55% {background: #e7c791;opacity: 1;} 56% {background: #e7c791;opacity: 1;} 100% {background: #e7c791;opacity: 1;}
}
@keyframes anim-googleSiteWebUrl1 { 0% {background: #CCCCCC;opacity: 1;} 53% {background: #CCCCCC;opacity: 1;} 54% {background: #e7c791;opacity: 1;} 55% {background: #e7c791;opacity: 1;} 56% {background: #e7c791;opacity: 1;} 100% {background: #e7c791;opacity: 1;}
}
.google-site-web:nth-child(1) .description{ -webkit-animation: anim-googleSiteWebDescription1 40s linear infinite forwards; animation: anim-googleSiteWebDescription1 40s linear infinite forwards;
}
@-webkit-keyframes anim-googleSiteWebDescription1 { 0% {background: #CCCCCC;opacity: 1;} 53% {background: #CCCCCC;opacity: 1;} 54% {background: #e7c791;opacity: 0.2;} 55% {background: #e7c791;opacity: 0.2;} 56% {background: #e7c791;opacity: 0.2;} 100% {background: #e7c791;opacity: 0.2;}
}
@keyframes anim-googleSiteWebDescription1 { 0% {background: #CCCCCC;opacity: 1;} 53% {background: #CCCCCC;opacity: 1;} 54% {background: #e7c791;opacity: 0.2;} 55% {background: #e7c791;opacity: 0.2;} 56% {background: #e7c791;opacity: 0.2;} 100% {background: #e7c791;opacity: 0.2;}
}
.google-site-web:nth-child(2) .title{ -webkit-animation: anim-googleSiteWebTitle2 40s linear infinite forwards; animation: anim-googleSiteWebTitle2 40s linear infinite forwards;
}
@-webkit-keyframes anim-googleSiteWebTitle2 { 0% {background: #CCCCCC;opacity: 1;} 51% {background: #CCCCCC;opacity: 1;} 52% {background: #e7c791;opacity: 0.7;} 53% {background: #e7c791;opacity: 0.7;} 54% {background: #cccccc;opacity: 0.2;} 100% {background: #cccccc;opacity: 0.2;}
}
@keyframes anim-googleSiteWebTitle2 { 0% {background: #CCCCCC;opacity: 1;} 51% {background: #CCCCCC;opacity: 1;} 52% {background: #e7c791;opacity: 0.7;} 53% {background: #e7c791;opacity: 0.7;} 54% {background: #cccccc;opacity: 0.2;} 100% {background: #cccccc;opacity: 0.2;}
}
.google-site-web:nth-child(2) .url{ -webkit-animation: anim-googleSiteWebUrl2 40s linear infinite forwards; animation: anim-googleSiteWebUrl2 40s linear infinite forwards;
}
@-webkit-keyframes anim-googleSiteWebUrl2 { 0% {background: #CCCCCC;opacity: 1;} 51% {background: #CCCCCC;opacity: 1;} 52% {background: #e7c791;opacity: 1;} 53% {background: #e7c791;opacity: 1;} 54% {background: #cccccc;opacity: 0.2;} 100% {background: #cccccc;opacity: 0.2;}
}
@keyframes anim-googleSiteWebUrl2 { 0% {background: #CCCCCC;opacity: 1;} 51% {background: #CCCCCC;opacity: 1;} 52% {background: #e7c791;opacity: 1;} 53% {background: #e7c791;opacity: 1;} 54% {background: #cccccc;opacity: 0.2;} 100% {background: #cccccc;opacity: 0.2;}
}
.google-site-web:nth-child(2) .description{ -webkit-animation: anim-googleSiteWebDescription2 40s linear infinite forwards; animation: anim-googleSiteWebDescription2 40s linear infinite forwards;
}
@-webkit-keyframes anim-googleSiteWebDescription2 { 0% {background: #CCCCCC;opacity: 1;} 51% {background: #CCCCCC;opacity: 1;} 52% {background: #e7c791;opacity: 0.2;} 53% {background: #e7c791;opacity: 0.2;} 54% {background: #cccccc;opacity: 0.2;} 100% {background: #cccccc;opacity: 0.2;}
}
@keyframes anim-googleSiteWebDescription2 { 0% {background: #CCCCCC;opacity: 1;} 51% {background: #CCCCCC;opacity: 1;} 52% {background: #e7c791;opacity: 0.2;} 53% {background: #e7c791;opacity: 0.2;} 54% {background: #cccccc;opacity: 0.2;} 100% {background: #cccccc;opacity: 0.2;}
}
.google-site-web:nth-child(3) .title{ -webkit-animation: anim-googleSiteWebTitle3 40s linear infinite forwards; animation: anim-googleSiteWebTitle3 40s linear infinite forwards;
}
@-webkit-keyframes anim-googleSiteWebTitle3 { 0% {background: #CCCCCC;opacity: 1;} 49% {background: #CCCCCC;opacity: 1;} 50% {background: #e7c791;opacity: 0.7;} 51% {background: #e7c791;opacity: 0.7;} 52% {background: #cccccc;opacity: 0.2;} 100% {background: #cccccc;opacity: 0.2;}
}
@keyframes anim-googleSiteWebTitle3 { 0% {background: #CCCCCC;opacity: 1;} 49% {background: #CCCCCC;opacity: 1;} 50% {background: #e7c791;opacity: 0.7;} 51% {background: #e7c791;opacity: 0.7;} 52% {background: #cccccc;opacity: 0.2;} 100% {background: #cccccc;opacity: 0.2;}
}
.google-site-web:nth-child(3) .url{ -webkit-animation: anim-googleSiteWebUrl3 40s linear infinite forwards; animation: anim-googleSiteWebUrl3 40s linear infinite forwards;
}
@-webkit-keyframes anim-googleSiteWebUrl3 { 0% {background: #CCCCCC;opacity: 1;} 49% {background: #CCCCCC;opacity: 1;} 50% {background: #e7c791;opacity: 1;} 51% {background: #e7c791;opacity: 1;} 52% {background: #cccccc;opacity: 0.2;} 100% {background: #cccccc;opacity: 0.2;}
}
@keyframes anim-googleSiteWebUrl3 { 0% {background: #CCCCCC;opacity: 1;} 49% {background: #CCCCCC;opacity: 1;} 50% {background: #e7c791;opacity: 1;} 51% {background: #e7c791;opacity: 1;} 52% {background: #cccccc;opacity: 0.2;} 100% {background: #cccccc;opacity: 0.2;}
}
.google-site-web:nth-child(3) .description{ -webkit-animation: anim-googleSiteWebDescription3 40s linear infinite forwards; animation: anim-googleSiteWebDescription3 40s linear infinite forwards;
}
@-webkit-keyframes anim-googleSiteWebDescription3 { 0% {background: #CCCCCC;opacity: 1;} 49% {background: #CCCCCC;opacity: 1;} 50% {background: #e7c791;opacity: 0.2;} 51% {background: #e7c791;opacity: 0.2;} 52% {background: #cccccc;opacity: 0.2;} 100% {background: #cccccc;opacity: 0.2;}
}
@keyframes anim-googleSiteWebDescription3 { 0% {background: #CCCCCC;opacity: 1;} 49% {background: #CCCCCC;opacity: 1;} 50% {background: #e7c791;opacity: 0.2;} 51% {background: #e7c791;opacity: 0.2;} 52% {background: #cccccc;opacity: 0.2;} 100% {background: #cccccc;opacity: 0.2;}
}
.google-site-web:nth-child(4) .title{ -webkit-animation: anim-googleSiteWebTitle4 40s linear infinite forwards; animation: anim-googleSiteWebTitle4 40s linear infinite forwards;
}
@-webkit-keyframes anim-googleSiteWebTitle4 { 0% {background: #CCCCCC;opacity: 1;} 47% {background: #CCCCCC;opacity: 1;} 48% {background: #e7c791;opacity: 0.7;} 49% {background: #e7c791;opacity: 0.7;} 50% {background: #cccccc;opacity: 0.2;} 100% {background: #cccccc;opacity: 0.2;}
}
@keyframes anim-googleSiteWebTitle4 { 0% {background: #CCCCCC;opacity: 1;} 47% {background: #CCCCCC;opacity: 1;} 48% {background: #e7c791;opacity: 0.7;} 49% {background: #e7c791;opacity: 0.7;} 50% {background: #cccccc;opacity: 0.2;} 100% {background: #cccccc;opacity: 0.2;}
}
.google-site-web:nth-child(4) .url{ -webkit-animation: anim-googleSiteWebUrl4 40s linear infinite forwards; animation: anim-googleSiteWebUrl4 40s linear infinite forwards;
}
@-webkit-keyframes anim-googleSiteWebUrl4 { 0% {background: #CCCCCC;opacity: 1;} 47% {background: #CCCCCC;opacity: 1;} 48% {background: #e7c791;opacity: 1;} 49% {background: #e7c791;opacity: 1;} 50% {background: #cccccc;opacity: 0.2;} 100% {background: #cccccc;opacity: 0.2;}
}
@keyframes anim-googleSiteWebUrl4 { 0% {background: #CCCCCC;opacity: 1;} 47% {background: #CCCCCC;opacity: 1;} 48% {background: #e7c791;opacity: 1;} 49% {background: #e7c791;opacity: 1;} 50% {background: #cccccc;opacity: 0.2;} 100% {background: #cccccc;opacity: 0.2;}
}
.google-site-web:nth-child(4) .description{ -webkit-animation: anim-googleSiteWebDescription4 40s linear infinite forwards; animation: anim-googleSiteWebDescription4 40s linear infinite forwards;
}
@-webkit-keyframes anim-googleSiteWebDescription4 { 0% {background: #CCCCCC;opacity: 1;} 47% {background: #CCCCCC;opacity: 1;} 48% {background: #e7c791;opacity: 0.2;} 49% {background: #e7c791;opacity: 0.2;} 50% {background: #cccccc;opacity: 0.2;} 100% {background: #cccccc;opacity: 0.2;}
}
@keyframes anim-googleSiteWebDescription4 { 0% {background: #CCCCCC;opacity: 1;} 47% {background: #CCCCCC;opacity: 1;} 48% {background: #e7c791;opacity: 0.2;} 49% {background: #e7c791;opacity: 0.2;} 50% {background: #cccccc;opacity: 0.2;} 100% {background: #cccccc;opacity: 0.2;}
}
.google-site-web:nth-child(5) .title { -webkit-animation: anim-googleSiteWebTitle5 40s linear infinite forwards; animation: anim-googleSiteWebTitle5 40s linear infinite forwards;
}
@-webkit-keyframes anim-googleSiteWebTitle5 { 0% {background: #CCCCCC;opacity: 1;} 45% {background: #CCCCCC;opacity: 1;} 46% {background: #e7c791;opacity: 0.7;} 47% {background: #e7c791;opacity: 0.7;} 48% {background: #CCCCCC;opacity: 0.2;} 100% {background: #CCCCCC;opacity: 0.2;}
}
@keyframes anim-googleSiteWebTitle5 { 0% {background: #CCCCCC;opacity: 1;} 45% {background: #CCCCCC;opacity: 1;} 46% {background: #e7c791;opacity: 0.7;} 47% {background: #e7c791;opacity: 0.7;} 48% {background: #CCCCCC;opacity: 0.2;} 100% {background: #CCCCCC;opacity: 0.2;}
}
.google-site-web:nth-child(5) .url { -webkit-animation: anim-googleSiteWebUrl5 40s linear infinite forwards; animation: anim-googleSiteWebUrl5 40s linear infinite forwards;
}
@-webkit-keyframes anim-googleSiteWebUrl5 { 0% {background: #CCCCCC;opacity: 1;} 45% {background: #CCCCCC;opacity: 1;} 46% {background: #e7c791;opacity: 1;} 47% {background: #e7c791;opacity: 1;} 48% {background: #CCCCCC;opacity: 0.2;} 100% {background: #CCCCCC;opacity: 0.2;}
}
@keyframes anim-googleSiteWebUrl5 { 0% {background: #CCCCCC;opacity: 1;} 45% {background: #CCCCCC;opacity: 1;} 46% {background: #e7c791;opacity: 1;} 47% {background: #e7c791;opacity: 1;} 48% {background: #CCCCCC;opacity: 0.2;} 100% {background: #CCCCCC;opacity: 0.2;}
}
.google-site-web:nth-child(5) .description { -webkit-animation: anim-googleSiteWebDescription5 40s linear infinite forwards; animation: anim-googleSiteWebDescription5 40s linear infinite forwards;
}
@-webkit-keyframes anim-googleSiteWebDescription5 { 0% {background: #CCCCCC;opacity: 1;} 45% {background: #CCCCCC;opacity: 1;} 46% {background: #e7c791;opacity: 0.2;} 47% {background: #e7c791;opacity: 0.2;} 48% {background: #CCCCCC;opacity: 0.2;} 100% {background: #CCCCCC;opacity: 0.2;}
}
@keyframes anim-googleSiteWebDescription5 { 0% {background: #CCCCCC;opacity: 1;} 45% {background: #CCCCCC;opacity: 1;} 46% {background: #e7c791;opacity: 0.2;} 47% {background: #e7c791;opacity: 0.2;} 48% {background: #CCCCCC;opacity: 0.2;} 100% {background: #CCCCCC;opacity: 0.2;}
}
.google-site-web .title { display: block; background: #CCCCCC; width: 16.5rem; height: 1rem;
}
.google-site-web .reaction { background: white; margin: 0 auto; opacity: 0; display: block; width: 0%; height: 0%; padding: 0.5rem 8.25rem; -webkit-animation: anim-clicUrl 40s linear infinite forwards; animation: anim-clicUrl 40s linear infinite forwards;
}
@-webkit-keyframes anim-clicUrl { 0% {width: 0%;height: 0%;opacity: 0;} 19% {width: 0%;height: 0%;opacity: 0;} 20% {width: 100%;height: 100%;opacity: 0.8;} 21% {width: 0%;height: 0%;opacity: 0;} 100% {width: 0%;height: 0%;opacity: 0;}
}
@keyframes anim-clicUrl { 0% {width: 0%;height: 0%;opacity: 0;} 19% {width: 0%;height: 0%;opacity: 0;} 20% {width: 100%;height: 100%;opacity: 0.8;} 21% {width: 0%;height: 0%;opacity: 0;} 100% {width: 0%;height: 0%;opacity: 0;}
}
.google-site-web .url { display: block; background: #CCCCCC; width: 7.5rem; height: 0.5rem; margin-top: 0.3rem;
}
.google-site-web .description { display: block; background: #CCCCCC; width: 16.5rem; height: 5rem; margin-top: 0.3rem;
}
.aside { display: inline-block; vertical-align: top; background: #CCCCCC; width: 5.5rem; height: 16.2rem; margin-top: 2rem; margin-left: 2rem;
}
/* DIAPO 3 */
.browser-page-3 { /*display: none;*/ display: block; width: 21rem; opacity: 1; -webkit-animation: anim-slide3 40s linear infinite forwards; animation: anim-slide3 40s linear infinite forwards;
}
@-webkit-keyframes anim-slide3 { 0% {margin-top: -85rem;margin-left: 30rem;opacity: 1;} 25% {margin-top: -85rem;margin-left: 30rem;opacity: 1;} 27% {margin-top: -85rem;margin-left: 4rem;opacity: 1;} 28% {margin-top: -85rem;margin-left: 4rem;opacity: 1;} 36% {margin-top: -85rem;margin-left: 4rem;opacity: 0;} 100% {margin-top: -85rem;margin-left: 4rem;opacity: 0;}
}
@keyframes anim-slide3 { 0% {margin-top: -85rem;margin-left: 30rem;opacity: 1;} 25% {margin-top: -85rem;margin-left: 30rem;opacity: 1;} 27% {margin-top: -85rem;margin-left: 4rem;opacity: 1;} 28% {margin-top: -85rem;margin-left: 4rem;opacity: 1;} 36% {margin-top: -85rem;margin-left: 4rem;opacity: 0;} 100% {margin-top: -85rem;margin-left: 4rem;opacity: 0;}
}
/*.browser-page-3 .website-title,.browser-page-3 .website-prefooter, .browser-page-3 .website-footer{ display: block; background: #CCCCCC;
}
.browser-page-3 .website-title { width: 21rem; height: 1.6rem; margin-bottom: 1rem;
}
.browser-page-3 .website-prefooter { width: 21rem; height: 8rem; margin-bottom: 2rem;
}
.browser-page-3 .website-main, .browser-page-3 .website-aside{ display: inline-block; background: #CCCCCC; margin-bottom: 1rem;
}
.browser-page-3 .website-main { height: 20rem; width: 15rem;
}
.browser-page-3 .website-aside { height: 20rem; width: 5rem; margin-left: 0.5rem;
}
.browser-page-3 .website-footer { width: 21rem; height: 2rem;
}*/
.browser-page-3 .stat-trace { fill:none; stroke:#999999; stroke-width:7; stroke-linecap:round; stroke-linejoin:round; stroke-miterlimit:10;
}
.browser-page-3 .stat-line { fill:none; stroke:#CCCCCC; stroke-width:7; stroke-linecap:round; stroke-linejoin:round; stroke-miterlimit:10; stroke-dasharray:1000; stroke-dashoffset:1000; -webkit-animation: anim-statLine 40s linear infinite forwards; animation: anim-statLine 40s linear infinite forwards;
}
@-webkit-keyframes anim-statLine { 0%{stroke: #cccccc; fill:none;stroke-dashoffset:1000;} 27%{stroke: #cccccc; fill:none;stroke-dashoffset:1000;} 28%{stroke: #cccccc; fill:none;stroke-dashoffset:1000;} 31%{stroke: #cccccc; fill:none;stroke-dashoffset:0;} 100%{stroke: #cccccc; fill:none;stroke-dashoffset:0;}
}
@keyframes anim-statLine { 0%{stroke: #cccccc; fill:none;stroke-dashoffset:1000;} 27%{stroke: #cccccc; fill:none;stroke-dashoffset:1000;} 28%{stroke: #cccccc; fill:none;stroke-dashoffset:1000;} 31%{stroke: #cccccc; fill:none;stroke-dashoffset:0;} 100%{stroke: #cccccc; fill:none;stroke-dashoffset:0;}
}
.browser-page-3 .stat-cursor { -webkit-animation: anim-statCursor 40s linear infinite forwards; animation: anim-statCursor 40s linear infinite forwards;
}
@-webkit-keyframes anim-statCursor { 0%{stroke:none;fill: none;} 30%{stroke:none;fill: none;} 31%{stroke:none;fill:#cccccc;} 100%{stroke:none;fill:#cccccc;}
}
@keyframes anim-statCursor { 0%{stroke:transparent;fill: transparent;} 30%{stroke:transparent;fill: transparent;} 31%{stroke:transparent;fill:#cccccc;} 100%{stroke:transparent;fill:#cccccc;}
}
.browser-page-3 .stat-point { fill:#666666; stroke: none;
}
.browser-page-3 .message-stat { margin-top: 2rem; color: #cccccc; font-family: verdana; font-weight: normal; font-size: 18px; text-align: center;
}
/* DIAPO 4 */
.browser-page-4 { /*display: none;*/ display: block; -webkit-animation: anim-slide4 40s linear infinite forwards; animation: anim-slide4 40s linear infinite forwards;
}
@-webkit-keyframes anim-slide4 { 0%{margin-top: -28rem;margin-left: 0rem;} 40%{margin-top: -28rem;margin-left: 0rem;} 42%{margin-top: -28rem;margin-left: 0rem;} 44%{margin-top: 75rem;margin-left: 0rem;} 100%{margin-top: 75rem;margin-left: 0rem;}
}
@keyframes anim-slide4 { 0%{margin-top: -28rem;margin-left: 0rem;} 40%{margin-top: -28rem;margin-left: 0rem;} 42%{margin-top: -28rem;margin-left: 0rem;} 44%{margin-top: 75rem;margin-left: 0rem;} 100%{margin-top: 75rem;margin-left: 0rem;}
}
.browser-page-4 #svg-title, .browser-page-4 #svg-main-1, .browser-page-4 #svg-main-2, .browser-page-4 #svg-main-3, .browser-page-4 #svg-aside, .browser-page-4 #svg-footer { stroke-dasharray:1000; stroke-dashoffset:1000; -webkit-animation: anim-wireframe 40s linear infinite forwards; animation: anim-wireframe 40s linear infinite forwards;
}
@-webkit-keyframes anim-wireframe { 0% {stroke: #cccccc; fill:transparent;stroke-dashoffset:1000;} 35% {stroke: #cccccc; fill:transparent;stroke-dashoffset:1000;} 38% {stroke: #cccccc; fill:transparent;stroke-dashoffset:0;} 41% {stroke: #cccccc; fill:#cccccc;stroke-dashoffset:0;} 43% {stroke: #cccccc; fill:#cccccc;stroke-dashoffset:0;} 100% {stroke: #cccccc; fill:#cccccc;stroke-dashoffset:0;}
}
@keyframes anim-wireframe { 0% {stroke: #cccccc; fill:transparent;stroke-dashoffset:1000;} 35% {stroke: #cccccc; fill:transparent;stroke-dashoffset:1000;} 38% {stroke: #cccccc; fill:transparent;stroke-dashoffset:0;} 41% {stroke: #cccccc; fill:#cccccc;stroke-dashoffset:0;} 43% {stroke: #cccccc; fill:#cccccc;stroke-dashoffset:0;} 100% {stroke: #cccccc; fill:#cccccc;stroke-dashoffset:0;}
}
.browser-elements .top-url { -webkit-animation: anim-topUrl 40s linear infinite forwards; animation: anim-topUrl 40s linear infinite forwards;
}
@-webkit-keyframes anim-topUrl { 0% {background: #CCCCCC;} 38% {background: #CCCCCC;} 39% {background: #e7c791;} 40% {background: #e7c791;} 45% {background: #cccccc;} 100% {background: #cccccc;}
}
@keyframes anim-topUrl { 0% {background: #CCCCCC;} 38% {background: #CCCCCC;} 39% {background: #e7c791;} 40% {background: #e7c791;} 45% {background: #cccccc;} 100% {background: #cccccc;}
}
.browser-page-4 #svg-title { -webkit-animation: anim-wireframeTitle 40s linear infinite forwards; animation: anim-wireframeTitle 40s linear infinite forwards;
}
@-webkit-keyframes anim-wireframeTitle { 0% {stroke: #CCCCCC; fill:transparent;stroke-dashoffset:1000;} 36% {stroke: #CCCCCC; fill:transparent;stroke-dashoffset:1000;} 37% {opacity: 1;stroke: #cccccc; fill:#cccccc;stroke-dashoffset:0;} 38% {opacity: 1;stroke: #cccccc; fill:#cccccc;stroke-dashoffset:0;} 39% {opacity: 1;stroke: #cccccc;fill:#cccccc;stroke-dashoffset:0;} 40% {opacity: 0.5;stroke: #e7c791;fill:#e7c791;stroke-dashoffset:0;} 100% {opacity: 0.5;stroke: #e7c791;fill:#e7c791;stroke-dashoffset:0;}
}
@keyframes anim-wireframeTitle { 0% {stroke: #CCCCCC; fill:transparent;stroke-dashoffset:1000;} 36% {stroke: #CCCCCC; fill:transparent;stroke-dashoffset:1000;} 37% {opacity: 1;stroke: #cccccc; fill:#cccccc;stroke-dashoffset:0;} 38% {opacity: 1;stroke: #cccccc; fill:#cccccc;stroke-dashoffset:0;} 39% {opacity: 1;stroke: #cccccc;fill:#cccccc;stroke-dashoffset:0;} 40% {opacity: 0.5;stroke: #e7c791;fill:#e7c791;stroke-dashoffset:0;} 100% {opacity: 0.5;stroke: #e7c791;fill:#e7c791;stroke-dashoffset:0;}
}
.browser-page-4 #svg-main-2, .browser-page-4 #svg-main-3 { -webkit-animation: anim-wireframeContent 40s linear infinite forwards; animation: anim-wireframeContent 40s linear infinite forwards;
}
@-webkit-keyframes anim-wireframeContent { 0% {stroke: #CCCCCC; fill:transparent;stroke-dashoffset:1000;} 36% {stroke: #CCCCCC; fill:transparent;stroke-dashoffset:1000;} 37% {opacity: 1;stroke: #cccccc; fill:#cccccc;stroke-dashoffset:0;} 38% {opacity: 1;stroke: #cccccc; fill:#cccccc;stroke-dashoffset:0;} 39% {opacity: 1;stroke: #cccccc;fill:#cccccc;stroke-dashoffset:0;} 40% {opacity: 0.5;stroke: #e7c791;fill:#e7c791;stroke-dashoffset:0;} 100% {opacity: 0.5;stroke: #e7c791;fill:#e7c791;stroke-dashoffset:0;}
}
@keyframes anim-wireframeContent { 0% {stroke: #CCCCCC; fill:transparent;stroke-dashoffset:1000;} 36% {stroke: #CCCCCC; fill:transparent;stroke-dashoffset:1000;} 37% {opacity: 1;stroke: #cccccc; fill:#cccccc;stroke-dashoffset:0;} 38% {opacity: 1;stroke: #cccccc; fill:#cccccc;stroke-dashoffset:0;} 39% {opacity: 1;stroke: #cccccc;fill:#cccccc;stroke-dashoffset:0;} 40% {opacity: 0.5;stroke: #e7c791;fill:#e7c791;stroke-dashoffset:0;} 100% {opacity: 0.5;stroke: #e7c791;fill:#e7c791;stroke-dashoffset:0;}
}
.browser-page-4 #svg-aside { margin-left: 0rem;
}
/* DIAPO 5 */
.browser-page-5 { /*display: none;*/ display: block; margin: 0rem auto 0; margin-top: -130rem; -webkit-animation: anim-slide5 40s linear infinite forwards; animation: anim-slide5 40s linear infinite forwards;
}
@-webkit-keyframes anim-slide5 { 0%{opacity: 0;} 58%{opacity: 0;} 60%{opacity: 1;} 100%{opacity: 1;}
}
@keyframes anim-slide5 { 0%{opacity: 0;} 58%{opacity: 0;} 60%{opacity: 1;} 100%{opacity: 1;}
}
.cup { width: 80%; height: 80%; -webkit-animation: anim-cup 40s linear infinite forwards; animation: anim-cup 40s linear infinite forwards;
}
@-webkit-keyframes anim-cup { 0%{stroke-width:3;fill:none;stroke: #E7C791;stroke-dasharray:500;stroke-dashoffset:1000;opacity: 1;} 60%{stroke-width:3;fill:none;stroke: #E7C791;stroke-dasharray:500;stroke-dashoffset:1000;opacity: 1;} 65%{stroke-width:3;fill:none;stroke: #E7C791;stroke-dasharray:500;stroke-dashoffset:0;opacity: 1;} 67%{stroke-width:3;fill:none;stroke: #E7C791;stroke-dasharray:500;stroke-dashoffset:0;opacity: 1;} 67%{stroke-width:3;fill:none;stroke: #E7C791;stroke-dasharray:1000;stroke-dashoffset:0;opacity: 0;} 68%{stroke-width:3;fill:none;stroke: #E7C791;stroke-dasharray:1000;stroke-dashoffset:0;opacity: 0;} 69%{stroke-width:3;fill:#E7C791;stroke: none;stroke-dasharray:1000;stroke-dashoffset:0;opacity: 1;} 100%{stroke-width:3;fill:#E7C791;stroke: none;stroke-dasharray:1000;stroke-dashoffset:0;opacity: 1;}
}
@keyframes anim-cup { 0%{stroke-width:3;fill:transparent;stroke: #E7C791;stroke-dasharray:500;stroke-dashoffset:1000;opacity: 1;} 60%{stroke-width:3;fill:transparent;stroke: #E7C791;stroke-dasharray:500;stroke-dashoffset:1000;opacity: 1;} 65%{stroke-width:3;fill:transparent;stroke: #E7C791;stroke-dasharray:500;stroke-dashoffset:0;opacity: 1;} 67%{stroke-width:3;fill:transparent;stroke: #E7C791;stroke-dasharray:500;stroke-dashoffset:0;opacity: 1;} 67%{stroke-width:3;fill:transparent;stroke: #E7C791;stroke-dasharray:1000;stroke-dashoffset:0;opacity: 0;} 68%{stroke-width:3;fill:transparent;stroke: #E7C791;stroke-dasharray:1000;stroke-dashoffset:0;opacity: 0;} 69%{stroke-width:3;fill:#E7C791;stroke: transparent;stroke-dasharray:0;stroke-dashoffset:0;opacity: 1;} 100%{stroke-width:3;fill:#E7C791;stroke: transparent;stroke-dasharray:0;stroke-dashoffset:0;opacity: 1;}
}
.browser-page-5 .message-cup { margin-top: -2rem; color: #E7C791; font-family: verdana; font-size: 18px; font-weight: normal; text-align: center; -webkit-animation: anim-messageCup 40s linear infinite forwards; animation: anim-messageCup 40s linear infinite forwards;
}
@-webkit-keyframes anim-messageCup { 0%{opacity: 0;} 71%{opacity: 0;} 72%{opacity: 1;} 73%{opacity: 1;} 74%{opacity: 0;} 75%{opacity: 0;} 76%{opacity: 1;} 77%{opacity: 1;} 78%{opacity: 0;} 79%{opacity: 0;} 80%{opacity: 1;} 81%{opacity: 1;} 82%{opacity: 0;} 83%{opacity: 0;} 84%{opacity: 1;} 85%{opacity: 1;} 100%{opacity: 1;}
}
@keyframes anim-messageCup { 0%{opacity: 0;} 71%{opacity: 0;} 72%{opacity: 1;} 73%{opacity: 1;} 74%{opacity: 0;} 75%{opacity: 0;} 76%{opacity: 1;} 77%{opacity: 1;} 78%{opacity: 0;} 79%{opacity: 0;} 80%{opacity: 1;} 81%{opacity: 1;} 82%{opacity: 0;} 83%{opacity: 0;} 84%{opacity: 1;} 85%{opacity: 1;} 100%{opacity: 1;}
}
.browser-page-5 .reflect { background: white; display: inline-block; vertical-align: top; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); width: 3rem; height: 50rem; margin: 19rem 0rem -34rem 35rem; -webkit-animation: anim-reflectCup 40s linear infinite forwards; animation: anim-reflectCup 40s linear infinite forwards;
}
@-webkit-keyframes anim-reflectCup { 0%{opacity: 0;margin:19rem 0rem -34rem -3rem;} 70%{opacity: 0;margin:19rem 0rem -34rem -3rem;} 71%{opacity: 0.3;margin:19rem 0rem -34rem 35rem;} 100%{opacity: 0.3;margin:19rem 0rem -34rem 35rem;}
}
@keyframes anim-reflectCup { 0%{opacity: 0;margin:19rem 0rem -34rem -3rem;} 70%{opacity: 0;margin:19rem 0rem -34rem -3rem;} 71%{opacity: 0.3;margin:19rem 0rem -34rem 35rem;} 100%{opacity: 0.3;margin:19rem 0rem -34rem 35rem;}
}
| Developer | Jordane |
| Username | Ananze |
| Uploaded | December 14, 2022 |
| Rating | 3 |
| Size | 7,164 Kb |
| Views | 8,096 |
Do you need developer help for SEO Animated?
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!
Jordane (Ananze) Script Codes
| Name | Size |
| Media queries Isabelle | 1,423 Kb |
| Les familles de type block et inline | 1,692 Kb |
| Flex Isabelle | 1,396 Kb |
| Hack css checkbox menu complexe | 1,452 Kb |
| Pseudo class before et after | 2,949 Kb |
| Bouton-label | 1,219 Kb |
| Fruits pour Isabelle | 1,452 Kb |
| Drawing SVG Animated | 13,426 Kb |
| Clipping Mask SVG | 1,875 Kb |
| 3D website | 7,366 Kb |
Create amazing video scripts 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 |
| Android Play Store With Slick Carousel | -J0hn- | 4,982 Kb |
| Faces SVG animation | ScavengerFrontend | 2,957 Kb |
| Myprofile | SoufianeAbid | 2,451 Kb |
| Css3 slide | Nakome | 3,190 Kb |
| Glitchy Text Effect | Kescoe | 2,208 Kb |
| Nested table email layout | Massimo-cassandro | 2,355 Kb |
| Barber Shop | Bhlaird | 6,270 Kb |
| NgEasyModal | Lorenzodianni | 4,159 Kb |
| CSS Bot Confusion | Jpod | 3,456 Kb |
| Testimonial Fancy tabs responsive | Amit-webdesigner | 3,056 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!