"animation"
Bootstrap 3.0.0 Snippet by evarevirus

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html><html class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/christiannaths/pen/aBYyEm?limit=all&page=9&q=service" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <style class="cp-pen-styles">/** * -------------------------------------------------- Brand Colors */ /** * -------------------------------------------------- Color Palette */ .floating-box { display: block; background: #fff; border-color: rgba(0, 39, 69, 0.11); border-radius: 4px; border-style: solid; border-width: 1px; box-shadow: 0 4px 7px rgba(0, 33, 60, 0.04); z-index: 1; } @font-face { font-family: 'Brace'; src: url("/assets/brace-medium.eot"); src: url("/assets/brace-medium.eot?#iefix") format("embedded-opentype"), url("/assets/brace-medium.woff2") format("woff2"), url("/assets/brace-medium.woff") format("woff"), url("/assets/brace-medium.ttf") format("truetype"), url("/assets/brace-medium.svg#wf") format("svg"); } html { font: 112.5%/1 sans-serif; } body { font: inherit; letter-spacing: -0.003em; font-family: "acumin-pro", "Helvetica Neue", helvetica, sans-serif; text-rendering: optimizeLegibility; text-rendering: geometricPrecision; font-smooth: always; font-smooth: never; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; color: #384051; } p, li { line-height: 1.6; color: inherit; margin-top: 1.6rem; } li { margin-top: 0.2666666667rem; } label { line-height: 1.6; color: inherit; } h1, h2, h3, h4, h5, h6 { color: inherit; } input { font-size: 1em; color: inherit; font-family: "acumin-pro", "Helvetica Neue", helvetica, sans-serif; } button { font-size: inherit; padding: 0.375em 1em; border: 2px solid currentColor; color: inherit; cursor: pointer; } .section-title { font-family: "Brace", "acumin-pro", "Helvetica Neue", helvetica, sans-serif; line-height: 1.18; font-size: 1.833333333em; font-weight: normal; letter-spacing: -0.02em; margin-bottom: 0; color: #384051; } .section-subtitle { line-height: 1.18; font-size: 1.166666667em; font-weight: bold; letter-spacing: -0.02em; margin-bottom: 0; color: #384051; } .hint { font-size: 0.888888889em; font-style: italic; opacity: 0.8; } .page-layout { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .how-it-works { padding: 4.8rem 2em; width: 100%; max-width: 64em; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-pack: distribute; justify-content: space-around; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; overflow: hidden; } .how-it-works > .section-title { text-align: center; -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; } .how-it-works > .diagram { width: 100%; margin: 1.6rem 0; -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; } .how-it-works > .instructions { overflow: hidden; -webkit-box-flex: 0; -ms-flex: 0 0 300vw; flex: 0 0 300vw; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .how-it-works > .instructions > .instruction { -webkit-box-flex: 0.333333333333; -ms-flex: 0.333333333333; flex: 0.333333333333; padding: 0 2em; text-align: center; -webkit-transition: -webkit-transform 600ms ease; transition: -webkit-transform 600ms ease; transition: transform 600ms ease; transition: transform 600ms ease, -webkit-transform 600ms ease; } .how-it-works > .instructions > .instruction > p { margin-top: 0.1966666667em; } .how-it-works > .instructions > .instruction { -webkit-transform: translateX(100%); transform: translateX(100%); } .how-it-works.-step2a > .instructions > .instruction, .how-it-works.-step2b > .instructions > .instruction, .how-it-works.-step2c > .instructions > .instruction { -webkit-transform: translateX(0); transform: translateX(0); } .how-it-works.-step3a > .instructions > .instruction, .how-it-works.-step3b > .instructions > .instruction, .how-it-works.-step3c > .instructions > .instruction { -webkit-transform: translateX(-100%); transform: translateX(-100%); } @media (min-width: 36em) { .how-it-works > .instructions { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; } .how-it-works > .instructions > .instruction { -webkit-transform: none !important; transform: none !important; display: -webkit-box; display: -ms-flexbox; display: flex; text-align: left; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .how-it-works > .instructions > .instruction > .section-subtitle { text-align: right; margin-right: 1em; -webkit-box-flex: 0; -ms-flex: 0 0 25%; flex: 0 0 25%; } .how-it-works > .instructions > .instruction > p { -webkit-box-flex: 0; -ms-flex: 0 1 30em; flex: 0 1 30em; margin: 0; } .how-it-works > .instructions > .instruction + .instruction { margin-top: 1.6rem; } .how-it-works > .instructions > .instruction { opacity: 0.3333333; -webkit-transition: opacity 600ms ease; transition: opacity 600ms ease; } .how-it-works.-step1a > .instructions > .instruction.-step1, .how-it-works.-step1b > .instructions > .instruction.-step1, .how-it-works.-step1c > .instructions > .instruction.-step1 { opacity: 1; } .how-it-works.-step2a > .instructions > .instruction.-step2, .how-it-works.-step2b > .instructions > .instruction.-step2, .how-it-works.-step2c > .instructions > .instruction.-step2 { opacity: 1; } .how-it-works.-step3a > .instructions > .instruction.-step3, .how-it-works.-step3b > .instructions > .instruction.-step3, .how-it-works.-step3c > .instructions > .instruction.-step3 { opacity: 1; } } @media (min-width: 64em) { .how-it-works > .instructions { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: start; -ms-flex-align: start; -ms-grid-row-align: flex-start; align-items: flex-start; overflow: hidden; -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; } .how-it-works > .instructions > .instruction { text-align: left; -webkit-box-flex: 0.3; -ms-flex: 0.3; flex: 0.3; padding: 0; display: block; } .how-it-works > .instructions > .instruction > .section-subtitle { text-align: left; } .how-it-works > .instructions > .instruction + .instruction { margin-top: 0; } } .neighborhood-diagram .line, .neighborhood-diagram .shape { fill: white; stroke: #384051; stroke-width: 2; stroke-linecap: round; stroke-miterlimit: 10; } .neighborhood-diagram .line { fill: none; } .neighborhood-diagram .antenna > .shape { fill: #384051; stroke: none; } .neighborhood-diagram .antenna > .line { fill: none; stroke: #384051; } .neighborhood-diagram .antenna > .radio-waves { opacity: 0; } .neighborhood-diagram .location-marker > .shape { fill: #f97168; stroke: none; } .neighborhood-diagram .map > .shape { fill: #e9e5dc; stroke: none; } .neighborhood-diagram .computer > .shape { stroke: none; } .neighborhood-diagram .computer > .stand { fill: #cacaca; } .neighborhood-diagram .computer > .strip, .neighborhood-diagram .computer > .back { fill: #384051; } .neighborhood-diagram .computer > .screen { fill: #384051; } .neighborhood-diagram .phone > .line { stroke: #ccc; } .neighborhood-diagram .phone > .button { stroke: none; fill: #ccc; } .neighborhood-diagram .phone > .back { stroke: none; fill: #384051; } .neighborhood-diagram .phone > .screen { stroke: none; fill: #384051; } .neighborhood-diagram .phone > .order-button { stroke: none; fill: #64be6c; } .neighborhood-diagram .handset > .shape { stroke: none; fill: #384051; } .neighborhood-diagram .lawn-mower > .body, .neighborhood-diagram .lawn-mower > .cap { fill: #29e877; } .neighborhood-diagram .ground .shape { fill: #29e877; stroke-width: 0; } .neighborhood-diagram .ground .mask { fill: white; } .neighborhood-diagram .checkmark > .shape { fill: #29e877; } .neighborhood-diagram .checkmark > .line { fill: none; stroke: #384051; } .neighborhood-diagram .grass > .line { stroke: #64be6c; } .neighborhood-diagram > .city-skyline .shape { stroke-width: 0; fill: #f3f3f3; } .neighborhood-diagram > .yardly-office > .yardly-logo .shape { stroke-width: 0; fill: #384051; } .neighborhood-diagram > .customer-property .customer-house > .roof .shape { fill: #ff4900; } .neighborhood-diagram > .sun .shape { fill: #ffe877; } .neighborhood-diagram .cloud-large { -webkit-animation: floating-clouds 120s linear infinite; animation: floating-clouds 120s linear infinite; } .neighborhood-diagram .cloud-small { -webkit-animation: floating-clouds 240s linear infinite; animation: floating-clouds 240s linear infinite; } .neighborhood-diagram > .customer-property, .neighborhood-diagram > .yardly-office, .neighborhood-diagram > .city-skyline { -webkit-transition: -webkit-transform 3s ease; transition: -webkit-transform 3s ease; transition: transform 3s ease; transition: transform 3s ease, -webkit-transform 3s ease; } .neighborhood-diagram > .lawn-mower { -webkit-transition: -webkit-transform 5s ease; transition: -webkit-transform 5s ease; transition: transform 5s ease; transition: transform 5s ease, -webkit-transform 5s ease; } .neighborhood-diagram > .order-method-app, .neighborhood-diagram > .order-method-web, .neighborhood-diagram > .order-method-phone { -webkit-transition: -webkit-transform 1s cubic-bezier(0.87, -0.41, 0.19, 1.44); transition: -webkit-transform 1s cubic-bezier(0.87, -0.41, 0.19, 1.44); transition: transform 1s cubic-bezier(0.87, -0.41, 0.19, 1.44); transition: transform 1s cubic-bezier(0.87, -0.41, 0.19, 1.44), -webkit-transform 1s cubic-bezier(0.87, -0.41, 0.19, 1.44); -webkit-transform: translate3d(-128px, 0, 0); transform: translate3d(-128px, 0, 0); } .neighborhood-diagram > .wind { -webkit-transform: translate3d(-100px, 60px, 0) scale(0.75); transform: translate3d(-100px, 60px, 0) scale(0.75); } .neighborhood-diagram > .clouds { -webkit-transform: translate3d(0, 60px, 0) scale(0.75); transform: translate3d(0, 60px, 0) scale(0.75); } .neighborhood-diagram > .sun { -webkit-transform: translate3d(-480px, 50px, 0) scale(0.75); transform: translate3d(-480px, 50px, 0) scale(0.75); } .neighborhood-diagram > .customer-property, .neighborhood-diagram > .yardly-office, .neighborhood-diagram > .lawn-mower { -webkit-transform: translateX(-130px); transform: translateX(-130px); } .neighborhood-diagram > .customer-property > .antenna, .neighborhood-diagram > .yardly-office > .antenna, .neighborhood-diagram > .lawn-mower > .antenna { -webkit-transform: translateY(40px); transform: translateY(40px); -webkit-transition: -webkit-transform 1s cubic-bezier(0.87, -0.41, 0.19, 1.44); transition: -webkit-transform 1s cubic-bezier(0.87, -0.41, 0.19, 1.44); transition: transform 1s cubic-bezier(0.87, -0.41, 0.19, 1.44); transition: transform 1s cubic-bezier(0.87, -0.41, 0.19, 1.44), -webkit-transform 1s cubic-bezier(0.87, -0.41, 0.19, 1.44); } .neighborhood-diagram > .customer-property > .tall-grass { -webkit-transform: scaleY(1); transform: scaleY(1); -webkit-transform-origin: bottom; transform-origin: bottom; -webkit-transition: -webkit-transform 1s ease; transition: -webkit-transform 1s ease; transition: transform 1s ease; transition: transform 1s ease, -webkit-transform 1s ease; } .neighborhood-diagram > .city-skyline { -webkit-transform: translate3d(-30px, 80px, 0) scale(0.5); transform: translate3d(-30px, 80px, 0) scale(0.5); } .neighborhood-diagram > .checkmark { -webkit-transform: translate3d(-140px, 0px, 0) scale(0.5); transform: translate3d(-140px, 0px, 0) scale(0.5); -webkit-transform-origin: center; transform-origin: center; -webkit-transition: -webkit-transform 1s cubic-bezier(0.87, -0.41, 0.19, 1.44); transition: -webkit-transform 1s cubic-bezier(0.87, -0.41, 0.19, 1.44); transition: transform 1s cubic-bezier(0.87, -0.41, 0.19, 1.44); transition: transform 1s cubic-bezier(0.87, -0.41, 0.19, 1.44), -webkit-transform 1s cubic-bezier(0.87, -0.41, 0.19, 1.44); } .-step1b .neighborhood-diagram > .order-method-app { -webkit-transform: translate3d(-99px, -134px, 0); transform: translate3d(-99px, -134px, 0); } .-step1b .neighborhood-diagram > .order-method-web { -webkit-transform: translate3d(-150px, -120px, 0); transform: translate3d(-150px, -120px, 0); } .-step1b .neighborhood-diagram > .order-method-phone { -webkit-transform: translate3d(-70px, -90px, 0); transform: translate3d(-70px, -90px, 0); } .-step1c .neighborhood-diagram > .customer-property, .-step1c .neighborhood-diagram > .yardly-office { -webkit-transform: translateX(-700px); transform: translateX(-700px); -webkit-transition: -webkit-transform 3s ease 1s; transition: -webkit-transform 3s ease 1s; transition: transform 3s ease 1s; transition: transform 3s ease 1s, -webkit-transform 3s ease 1s; } .-step1c .neighborhood-diagram > .city-skyline { -webkit-transform: translate3d(-220px, 80px, 0) scale(0.5); transform: translate3d(-220px, 80px, 0) scale(0.5); -webkit-transition: -webkit-transform 3s ease 1s; transition: -webkit-transform 3s ease 1s; transition: transform 3s ease 1s; transition: transform 3s ease 1s, -webkit-transform 3s ease 1s; } .-step1c .neighborhood-diagram > .order-method-app { -webkit-transform: translate3d(-117px, -114px, 0); transform: translate3d(-117px, -114px, 0); -webkit-transition: -webkit-transform 1s ease; transition: -webkit-transform 1s ease; transition: transform 1s ease; transition: transform 1s ease, -webkit-transform 1s ease; } .-step2a .neighborhood-diagram > .order-method-app { -webkit-transform: translate3d(-128px, 0, 0); transform: translate3d(-128px, 0, 0); -webkit-transition: none; transition: none; } .-step2a .neighborhood-diagram > .customer-property, .-step2a .neighborhood-diagram > .yardly-office { -webkit-transform: translateX(-700px); transform: translateX(-700px); } .-step2a .neighborhood-diagram > .customer-property > .antenna, .-step2a .neighborhood-diagram > .yardly-office > .antenna { -webkit-transform: translateY(0px); transform: translateY(0px); } .-step2a .neighborhood-diagram > .customer-property > .antenna > .radio-waves, .-step2a .neighborhood-diagram > .yardly-office > .antenna > .radio-waves { -webkit-animation: sending-signals 1s infinite linear; animation: sending-signals 1s infinite linear; } .-step2a .neighborhood-diagram > .city-skyline { -webkit-transform: translate3d(-220px, 80px, 0) scale(0.5); transform: translate3d(-220px, 80px, 0) scale(0.5); } .-step2b .neighborhood-diagram > .customer-property, .-step2b .neighborhood-diagram > .yardly-office { -webkit-transform: translateX(-130px); transform: translateX(-130px); } .-step2b .neighborhood-diagram > .customer-property > .antenna .-step2b .neighborhood-diagram > .customer-property > .radio-waves, .-step2b .neighborhood-diagram > .yardly-office > .antenna .-step2b .neighborhood-diagram > .customer-property > .radio-waves, .-step2b .neighborhood-diagram > .customer-property > .antenna .-step2b .neighborhood-diagram > .yardly-office > .radio-waves, .-step2b .neighborhood-diagram > .yardly-office > .antenna .-step2b .neighborhood-diagram > .yardly-office > .radio-waves { -webkit-animation: none; animation: none; } .-step2b .neighborhood-diagram > .city-skyline { -webkit-transform: translate3d(-30px, 80px, 0) scale(0.5); transform: translate3d(-30px, 80px, 0) scale(0.5); } .-step2c .neighborhood-diagram > .lawn-mower { -webkit-animation: mowing-lawns 5s ease; animation: mowing-lawns 5s ease; } .-step2c .neighborhood-diagram > .customer-property > .tall-grass { -webkit-transform: scaleY(0); transform: scaleY(0); -webkit-transition: -webkit-transform 1s ease 2.5s; transition: -webkit-transform 1s ease 2.5s; transition: transform 1s ease 2.5s; transition: transform 1s ease 2.5s, -webkit-transform 1s ease 2.5s; } .-step3a .neighborhood-diagram > .customer-property, .-step3a .neighborhood-diagram > .yardly-office { -webkit-transform: translateX(-700px); transform: translateX(-700px); -webkit-transition: -webkit-transform 1s ease; transition: -webkit-transform 1s ease; transition: transform 1s ease; transition: transform 1s ease, -webkit-transform 1s ease; } .-step3a .neighborhood-diagram > .customer-property > .pictures, .-step3a .neighborhood-diagram > .yardly-office > .pictures { -webkit-transform: translate3d(0, -50px, 0); transform: translate3d(0, -50px, 0); -webkit-transition: -webkit-transform 1s cubic-bezier(0.87, -0.41, 0.19, 1.44) 1s; transition: -webkit-transform 1s cubic-bezier(0.87, -0.41, 0.19, 1.44) 1s; transition: transform 1s cubic-bezier(0.87, -0.41, 0.19, 1.44) 1s; transition: transform 1s cubic-bezier(0.87, -0.41, 0.19, 1.44) 1s, -webkit-transform 1s cubic-bezier(0.87, -0.41, 0.19, 1.44) 1s; } .-step3a .neighborhood-diagram > .city-skyline { -webkit-transform: translate3d(-220px, 80px, 0) scale(0.5); transform: translate3d(-220px, 80px, 0) scale(0.5); -webkit-transition: -webkit-transform 1s ease; transition: -webkit-transform 1s ease; transition: transform 1s ease; transition: transform 1s ease, -webkit-transform 1s ease; } .-step3a .neighborhood-diagram > .customer-property > .tall-grass { -webkit-transform: scaleY(0); transform: scaleY(0); } .-step3b .neighborhood-diagram > .customer-property, .-step3b .neighborhood-diagram > .yardly-office { -webkit-transform: translateX(-130px); transform: translateX(-130px); -webkit-transition: -webkit-transform 3s ease; transition: -webkit-transform 3s ease; transition: transform 3s ease; transition: transform 3s ease, -webkit-transform 3s ease; } .-step3b .neighborhood-diagram > .customer-property > .pictures, .-step3b .neighborhood-diagram > .yardly-office > .pictures { -webkit-transform: translate3d(-550px, 0, 0); transform: translate3d(-550px, 0, 0); -webkit-transition: -webkit-transform 3s ease; transition: -webkit-transform 3s ease; transition: transform 3s ease; transition: transform 3s ease, -webkit-transform 3s ease; } .-step3b .neighborhood-diagram > .customer-property > .tall-grass { -webkit-transform: scaleY(0); transform: scaleY(0); } .-step3b .neighborhood-diagram > .city-skyline { -webkit-transform: translate3d(-30px, 80px, 0) scale(0.5); transform: translate3d(-30px, 80px, 0) scale(0.5); -webkit-transition: -webkit-transform 3s ease; transition: -webkit-transform 3s ease; transition: transform 3s ease; transition: transform 3s ease, -webkit-transform 3s ease; } .-step3c .neighborhood-diagram > .yardly-office > .pictures { -webkit-transform: translate3d(-590px, 100px, 0) scale(0.25); transform: translate3d(-590px, 100px, 0) scale(0.25); -webkit-transform-origin: center; transform-origin: center; -webkit-transition: -webkit-transform 1s cubic-bezier(0.87, -0.41, 0.19, 1.44); transition: -webkit-transform 1s cubic-bezier(0.87, -0.41, 0.19, 1.44); transition: transform 1s cubic-bezier(0.87, -0.41, 0.19, 1.44); transition: transform 1s cubic-bezier(0.87, -0.41, 0.19, 1.44), -webkit-transform 1s cubic-bezier(0.87, -0.41, 0.19, 1.44); } .-step3c .neighborhood-diagram > .customer-property > .tall-grass { -webkit-transform: scaleY(0); transform: scaleY(0); } .-step3c .neighborhood-diagram > .checkmark { -webkit-transform: translate3d(-100px, -120px, 0) scale(1); transform: translate3d(-100px, -120px, 0) scale(1); -webkit-transition: -webkit-transform 1s cubic-bezier(0.87, -0.41, 0.19, 1.44) 0.5s; transition: -webkit-transform 1s cubic-bezier(0.87, -0.41, 0.19, 1.44) 0.5s; transition: transform 1s cubic-bezier(0.87, -0.41, 0.19, 1.44) 0.5s; transition: transform 1s cubic-bezier(0.87, -0.41, 0.19, 1.44) 0.5s, -webkit-transform 1s cubic-bezier(0.87, -0.41, 0.19, 1.44) 0.5s; } @media (min-width: 600px) { .neighborhood-diagram > .ground { -webkit-transform: translateX(-125px); transform: translateX(-125px); } .neighborhood-diagram > .lawn-mower, .neighborhood-diagram > .checkmark { -webkit-transform: translateX(-225px); transform: translateX(-225px); } .neighborhood-diagram > .sun { -webkit-transform: translate3d(-430px, 50px, 0) scale(0.75); transform: translate3d(-430px, 50px, 0) scale(0.75); } } @media (min-width: 800px) { .neighborhood-diagram > .ground { -webkit-transform: translateX(0); transform: translateX(0); } .neighborhood-diagram > .lawn-mower { -webkit-transform: translateX(-225px); transform: translateX(-225px); } .neighborhood-diagram > .checkmark { -webkit-transform: translate3d(-140px, 100px, 0) scale(0.5); transform: translate3d(-140px, 100px, 0) scale(0.5); -webkit-transform-origin: center; transform-origin: center; -webkit-transition: -webkit-transform 1s cubic-bezier(0.87, -0.41, 0.19, 1.44); transition: -webkit-transform 1s cubic-bezier(0.87, -0.41, 0.19, 1.44); transition: transform 1s cubic-bezier(0.87, -0.41, 0.19, 1.44); transition: transform 1s cubic-bezier(0.87, -0.41, 0.19, 1.44), -webkit-transform 1s cubic-bezier(0.87, -0.41, 0.19, 1.44); } .neighborhood-diagram > .city-skyline { -webkit-transform: translate3d(-100px, 40px, 0) scale(0.75); transform: translate3d(-100px, 40px, 0) scale(0.75); } .neighborhood-diagram > .sun { -webkit-transform: translate3d(-100px, 50px, 0) scale(0.75); transform: translate3d(-100px, 50px, 0) scale(0.75); } .neighborhood-diagram > .customer-property { -webkit-transform: translateX(-100px); transform: translateX(-100px); -webkit-transition: none; transition: none; } .neighborhood-diagram > .yardly-office { -webkit-transform: translateX(-300px); transform: translateX(-300px); } .-step1b .neighborhood-diagram > .order-method-app { -webkit-transform: translate3d(-75px, -134px, 0); transform: translate3d(-75px, -134px, 0); } .-step1b .neighborhood-diagram > .order-method-web { -webkit-transform: translate3d(-130px, -120px, 0); transform: translate3d(-130px, -120px, 0); } .-step1b .neighborhood-diagram > .order-method-phone { -webkit-transform: translate3d(-40px, -90px, 0); transform: translate3d(-40px, -90px, 0); } .-step1c .neighborhood-diagram > .city-skyline { -webkit-transform: translate3d(-100px, 40px, 0) scale(0.75); transform: translate3d(-100px, 40px, 0) scale(0.75); } .-step1c .neighborhood-diagram > .customer-property { -webkit-transform: translateX(-100px); transform: translateX(-100px); -webkit-transition: none; transition: none; } .-step1c .neighborhood-diagram > .yardly-office { -webkit-transform: translateX(-300px); transform: translateX(-300px); } .-step1c .neighborhood-diagram > .order-method-app { -webkit-transform: translate3d(283px, -115px, 0); transform: translate3d(283px, -115px, 0); -webkit-transition: -webkit-transform 1s ease; transition: -webkit-transform 1s ease; transition: transform 1s ease; transition: transform 1s ease, -webkit-transform 1s ease; } .-step2a .neighborhood-diagram > .city-skyline { -webkit-transform: translate3d(-100px, 40px, 0) scale(0.75); transform: translate3d(-100px, 40px, 0) scale(0.75); } .-step2a .neighborhood-diagram > .customer-property { -webkit-transform: translateX(-100px); transform: translateX(-100px); } .-step2a .neighborhood-diagram > .yardly-office { -webkit-transform: translateX(-300px); transform: translateX(-300px); } .-step2a .neighborhood-diagram > .order-method-app { -webkit-transform: translate3d(283px, 0px, 0); transform: translate3d(283px, 0px, 0); -webkit-transition: none; transition: none; } .-step2b .neighborhood-diagram > .city-skyline { -webkit-transform: translate3d(-100px, 40px, 0) scale(0.75); transform: translate3d(-100px, 40px, 0) scale(0.75); } .-step2b .neighborhood-diagram > .customer-property { -webkit-transform: translateX(-100px); transform: translateX(-100px); } .-step2b .neighborhood-diagram > .yardly-office { -webkit-transform: translateX(-300px); transform: translateX(-300px); } .-step2b .neighborhood-diagram > .lawn-mower { -webkit-animation: none; animation: none; -webkit-transform: translateX(130px) scale(1); transform: translateX(130px) scale(1); -webkit-transition: -webkit-transform 2s ease-out; transition: -webkit-transform 2s ease-out; transition: transform 2s ease-out; transition: transform 2s ease-out, -webkit-transform 2s ease-out; } .-step2b .neighborhood-diagram > .customer-property > .tall-grass { -webkit-transform: scaleY(0); transform: scaleY(0); -webkit-transition: -webkit-transform 500ms ease 1.5s; transition: -webkit-transform 500ms ease 1.5s; transition: transform 500ms ease 1.5s; transition: transform 500ms ease 1.5s, -webkit-transform 500ms ease 1.5s; } .-step2c .neighborhood-diagram > .city-skyline { -webkit-transform: translate3d(-100px, 40px, 0) scale(0.75); transform: translate3d(-100px, 40px, 0) scale(0.75); } .-step2c .neighborhood-diagram > .customer-property { -webkit-transform: translateX(-100px); transform: translateX(-100px); } .-step2c .neighborhood-diagram > .yardly-office { -webkit-transform: translateX(-300px); transform: translateX(-300px); } .-step2c .neighborhood-diagram > .lawn-mower { -webkit-animation: none; animation: none; -webkit-transform: translateX(1000px); transform: translateX(1000px); -webkit-transform-origin: center; transform-origin: center; -webkit-transition: -webkit-transform 2s ease-in; transition: -webkit-transform 2s ease-in; transition: transform 2s ease-in; transition: transform 2s ease-in, -webkit-transform 2s ease-in; } .-step3a .neighborhood-diagram > .city-skyline { -webkit-transform: translate3d(-100px, 40px, 0) scale(0.75); transform: translate3d(-100px, 40px, 0) scale(0.75); } .-step3a .neighborhood-diagram > .customer-property { -webkit-transform: translateX(-100px); transform: translateX(-100px); } .-step3a .neighborhood-diagram > .yardly-office { -webkit-transform: translateX(-300px); transform: translateX(-300px); } .-step3a .neighborhood-diagram > .lawn-mower { -webkit-transition: none; transition: none; } .-step3a .neighborhood-diagram > .yardly-office > .pictures { -webkit-transform: translate3d(0px, -75px, 0); transform: translate3d(0px, -75px, 0); -webkit-transform-origin: center; transform-origin: center; -webkit-transition: -webkit-transform 1s cubic-bezier(0.87, -0.41, 0.19, 1.44); transition: -webkit-transform 1s cubic-bezier(0.87, -0.41, 0.19, 1.44); transition: transform 1s cubic-bezier(0.87, -0.41, 0.19, 1.44); transition: transform 1s cubic-bezier(0.87, -0.41, 0.19, 1.44), -webkit-transform 1s cubic-bezier(0.87, -0.41, 0.19, 1.44); } .-step3b .neighborhood-diagram > .city-skyline { -webkit-transform: translate3d(-100px, 40px, 0) scale(0.75); transform: translate3d(-100px, 40px, 0) scale(0.75); } .-step3b .neighborhood-diagram > .customer-property { -webkit-transform: translateX(-100px); transform: translateX(-100px); } .-step3b .neighborhood-diagram > .yardly-office { -webkit-transform: translateX(-300px); transform: translateX(-300px); } .-step3b .neighborhood-diagram > .yardly-office > .pictures { -webkit-transform: translate3d(-350px, 0px, 0); transform: translate3d(-350px, 0px, 0); -webkit-transform-origin: center; transform-origin: center; -webkit-transition: -webkit-transform 1s ease; transition: -webkit-transform 1s ease; transition: transform 1s ease; transition: transform 1s ease, -webkit-transform 1s ease; } .-step3c .neighborhood-diagram > .yardly-office > .pictures { -webkit-transform: translate3d(-400px, 100px, 0) scale(0.25); transform: translate3d(-400px, 100px, 0) scale(0.25); -webkit-transform-origin: center; transform-origin: center; -webkit-transition: -webkit-transform 1s cubic-bezier(0.87, -0.41, 0.19, 1.44); transition: -webkit-transform 1s cubic-bezier(0.87, -0.41, 0.19, 1.44); transition: transform 1s cubic-bezier(0.87, -0.41, 0.19, 1.44); transition: transform 1s cubic-bezier(0.87, -0.41, 0.19, 1.44), -webkit-transform 1s cubic-bezier(0.87, -0.41, 0.19, 1.44); } .-step3c .neighborhood-diagram > .customer-property > .tall-grass { -webkit-transform: scaleY(0); transform: scaleY(0); } .-step3c .neighborhood-diagram > .checkmark { -webkit-transform: translate3d(-60px, -120px, 0) scale(1); transform: translate3d(-60px, -120px, 0) scale(1); -webkit-transition: -webkit-transform 1s cubic-bezier(0.87, -0.41, 0.19, 1.44) 0.5s; transition: -webkit-transform 1s cubic-bezier(0.87, -0.41, 0.19, 1.44) 0.5s; transition: transform 1s cubic-bezier(0.87, -0.41, 0.19, 1.44) 0.5s; transition: transform 1s cubic-bezier(0.87, -0.41, 0.19, 1.44) 0.5s, -webkit-transform 1s cubic-bezier(0.87, -0.41, 0.19, 1.44) 0.5s; } } @media (min-width: 1000px) { .neighborhood-diagram > .ground { -webkit-transform: translateX(0); transform: translateX(0); } .neighborhood-diagram > .lawn-mower { -webkit-transform: translateX(-225px); transform: translateX(-225px); } .neighborhood-diagram > .checkmark { -webkit-transform: translate3d(-140px, 100px, 0) scale(0.5); transform: translate3d(-140px, 100px, 0) scale(0.5); -webkit-transform-origin: center; transform-origin: center; -webkit-transition: -webkit-transform 1s cubic-bezier(0.87, -0.41, 0.19, 1.44); transition: -webkit-transform 1s cubic-bezier(0.87, -0.41, 0.19, 1.44); transition: transform 1s cubic-bezier(0.87, -0.41, 0.19, 1.44); transition: transform 1s cubic-bezier(0.87, -0.41, 0.19, 1.44), -webkit-transform 1s cubic-bezier(0.87, -0.41, 0.19, 1.44); } .neighborhood-diagram > .city-skyline { -webkit-transform: translate3d(-140px, 0px, 0) scale(1); transform: translate3d(-140px, 0px, 0) scale(1); } .neighborhood-diagram > .sun { -webkit-transform: translate3d(-120px, 0px, 0) scale(1); transform: translate3d(-120px, 0px, 0) scale(1); } .neighborhood-diagram > .wind { -webkit-transform: translate3d(0, 0, 0) scale(1); transform: translate3d(0, 0, 0) scale(1); } .neighborhood-diagram > .clouds { -webkit-transform: translate3d(0, 0, 0) scale(1); transform: translate3d(0, 0, 0) scale(1); } .neighborhood-diagram > .customer-property { -webkit-transform: translateX(-100px); transform: translateX(-100px); -webkit-transition: none; transition: none; } .neighborhood-diagram > .yardly-office { -webkit-transform: translateX(-125px); transform: translateX(-125px); } .-step1b .neighborhood-diagram > .city-skyline { -webkit-transform: translate3d(-140px, 0px, 0) scale(1); transform: translate3d(-140px, 0px, 0) scale(1); } .-step1b .neighborhood-diagram > .yardly-office { -webkit-transform: translateX(-125px); transform: translateX(-125px); } .-step1c .neighborhood-diagram > .city-skyline { -webkit-transform: translate3d(-140px, 0px, 0) scale(1); transform: translate3d(-140px, 0px, 0) scale(1); } .-step1c .neighborhood-diagram > .yardly-office { -webkit-transform: translateX(-125px); transform: translateX(-125px); } .-step1c .neighborhood-diagram > .order-method-app { -webkit-transform: translate3d(458px, -115px, 0); transform: translate3d(458px, -115px, 0); -webkit-transition: -webkit-transform 1s ease; transition: -webkit-transform 1s ease; transition: transform 1s ease; transition: transform 1s ease, -webkit-transform 1s ease; } .-step2a .neighborhood-diagram > .city-skyline { -webkit-transform: translate3d(-140px, 0px, 0) scale(1); transform: translate3d(-140px, 0px, 0) scale(1); } .-step2a .neighborhood-diagram > .yardly-office { -webkit-transform: translateX(-125px); transform: translateX(-125px); } .-step2a .neighborhood-diagram > .order-method-app { -webkit-transform: translate3d(458px, 200px, 0); transform: translate3d(458px, 200px, 0); -webkit-transition: none; transition: none; } .-step2b .neighborhood-diagram > .city-skyline { -webkit-transform: translate3d(-140px, 0px, 0) scale(1); transform: translate3d(-140px, 0px, 0) scale(1); } .-step2b .neighborhood-diagram > .yardly-office { -webkit-transform: translateX(-125px); transform: translateX(-125px); } .-step2b .neighborhood-diagram > .order-method-app { -webkit-transform: translate3d(458px, 200px, 0); transform: translate3d(458px, 200px, 0); -webkit-transition: -webkit-transform 1s ease; transition: -webkit-transform 1s ease; transition: transform 1s ease; transition: transform 1s ease, -webkit-transform 1s ease; } .-step2c .neighborhood-diagram > .city-skyline { -webkit-transform: translate3d(-140px, 0px, 0) scale(1); transform: translate3d(-140px, 0px, 0) scale(1); } .-step2c .neighborhood-diagram > .yardly-office { -webkit-transform: translateX(-125px); transform: translateX(-125px); } .-step2c .neighborhood-diagram > .order-method-app { -webkit-transform: translate3d(458px, 200px, 0); transform: translate3d(458px, 200px, 0); } .-step3a .neighborhood-diagram > .city-skyline { -webkit-transform: translate3d(-140px, 0px, 0) scale(1); transform: translate3d(-140px, 0px, 0) scale(1); } .-step3a .neighborhood-diagram > .yardly-office { -webkit-transform: translateX(-125px); transform: translateX(-125px); } .-step3b .neighborhood-diagram > .city-skyline { -webkit-transform: translate3d(-140px, 0px, 0) scale(1); transform: translate3d(-140px, 0px, 0) scale(1); } .-step3b .neighborhood-diagram > .yardly-office { -webkit-transform: translateX(-125px); transform: translateX(-125px); } .-step3b .neighborhood-diagram > .yardly-office > .pictures { -webkit-transform: translate3d(-525px, 0px, 0); transform: translate3d(-525px, 0px, 0); -webkit-transform-origin: center; transform-origin: center; -webkit-transition: -webkit-transform 1s ease; transition: -webkit-transform 1s ease; transition: transform 1s ease; transition: transform 1s ease, -webkit-transform 1s ease; } .-step3c .neighborhood-diagram > .city-skyline { -webkit-transform: translate3d(-140px, 0px, 0) scale(1); transform: translate3d(-140px, 0px, 0) scale(1); } .-step3c .neighborhood-diagram > .yardly-office { -webkit-transform: translateX(-125px); transform: translateX(-125px); } .-step3c .neighborhood-diagram > .yardly-office > .pictures { -webkit-transform: translate3d(-575px, 100px, 0) scale(0.25); transform: translate3d(-575px, 100px, 0) scale(0.25); -webkit-transform-origin: center; transform-origin: center; -webkit-transition: -webkit-transform 1s cubic-bezier(0.87, -0.41, 0.19, 1.44); transition: -webkit-transform 1s cubic-bezier(0.87, -0.41, 0.19, 1.44); transition: transform 1s cubic-bezier(0.87, -0.41, 0.19, 1.44); transition: transform 1s cubic-bezier(0.87, -0.41, 0.19, 1.44), -webkit-transform 1s cubic-bezier(0.87, -0.41, 0.19, 1.44); } .-step3c .neighborhood-diagram > .customer-property > .tall-grass { -webkit-transform: scaleY(0); transform: scaleY(0); } .-step3c .neighborhood-diagram > .checkmark { -webkit-transform: translate3d(-60px, -120px, 0) scale(1); transform: translate3d(-60px, -120px, 0) scale(1); -webkit-transition: -webkit-transform 1s cubic-bezier(0.87, -0.41, 0.19, 1.44) 0.5s; transition: -webkit-transform 1s cubic-bezier(0.87, -0.41, 0.19, 1.44) 0.5s; transition: transform 1s cubic-bezier(0.87, -0.41, 0.19, 1.44) 0.5s; transition: transform 1s cubic-bezier(0.87, -0.41, 0.19, 1.44) 0.5s, -webkit-transform 1s cubic-bezier(0.87, -0.41, 0.19, 1.44) 0.5s; } } @media (min-width: 1200px) { .neighborhood-diagram > .checkmark { -webkit-transform: translate3d(-140px, 100px, 0) scale(0.5); transform: translate3d(-140px, 100px, 0) scale(0.5); -webkit-transform-origin: center; transform-origin: center; -webkit-transition: -webkit-transform 1s cubic-bezier(0.87, -0.41, 0.19, 1.44); transition: -webkit-transform 1s cubic-bezier(0.87, -0.41, 0.19, 1.44); transition: transform 1s cubic-bezier(0.87, -0.41, 0.19, 1.44); transition: transform 1s cubic-bezier(0.87, -0.41, 0.19, 1.44), -webkit-transform 1s cubic-bezier(0.87, -0.41, 0.19, 1.44); } .neighborhood-diagram > .ground, .neighborhood-diagram > .sun, .neighborhood-diagram > .wind, .neighborhood-diagram > .clouds, .neighborhood-diagram > .city-skyline, .neighborhood-diagram > .customer-property, .neighborhood-diagram > .yardly-office { -webkit-transform: translate3d(0, 0, 0) scale(1); transform: translate3d(0, 0, 0) scale(1); } .-step1b .neighborhood-diagram > .city-skyline, .-step1b .neighborhood-diagram > .customer-property, .-step1b .neighborhood-diagram > .yardly-office { -webkit-transform: translate3d(0, 0, 0) scale(1); transform: translate3d(0, 0, 0) scale(1); } .-step1b .neighborhood-diagram > .order-method-app { -webkit-transform: translate3d(25px, -134px, 0); transform: translate3d(25px, -134px, 0); } .-step1b .neighborhood-diagram > .order-method-web { -webkit-transform: translate3d(-30px, -120px, 0); transform: translate3d(-30px, -120px, 0); } .-step1b .neighborhood-diagram > .order-method-phone { -webkit-transform: translate3d(60px, -90px, 0); transform: translate3d(60px, -90px, 0); } .-step1c .neighborhood-diagram > .city-skyline, .-step1c .neighborhood-diagram > .customer-property, .-step1c .neighborhood-diagram > .yardly-office { -webkit-transform: translate3d(0, 0, 0) scale(1); transform: translate3d(0, 0, 0) scale(1); } .-step1c .neighborhood-diagram > .order-method-app { -webkit-transform: translate3d(582px, -115px, 0); transform: translate3d(582px, -115px, 0); -webkit-transition: -webkit-transform 1s ease; transition: -webkit-transform 1s ease; transition: transform 1s ease; transition: transform 1s ease, -webkit-transform 1s ease; } .-step2a .neighborhood-diagram > .city-skyline, .-step2a .neighborhood-diagram > .customer-property, .-step2a .neighborhood-diagram > .yardly-office { -webkit-transform: translate3d(0, 0, 0) scale(1); transform: translate3d(0, 0, 0) scale(1); } .-step2a .neighborhood-diagram > .order-method-app { -webkit-transform: translate3d(582px, 200px, 0); transform: translate3d(582px, 200px, 0); } .-step2b .neighborhood-diagram > .city-skyline, .-step2b .neighborhood-diagram > .customer-property, .-step2b .neighborhood-diagram > .yardly-office { -webkit-transform: translate3d(0, 0, 0) scale(1); transform: translate3d(0, 0, 0) scale(1); } .-step2b .neighborhood-diagram > .lawn-mower { -webkit-animation: none; animation: none; -webkit-transform: translateX(230px) scale(1); transform: translateX(230px) scale(1); -webkit-transition: -webkit-transform 2s ease-out; transition: -webkit-transform 2s ease-out; transition: transform 2s ease-out; transition: transform 2s ease-out, -webkit-transform 2s ease-out; } .-step2c .neighborhood-diagram > .city-skyline, .-step2c .neighborhood-diagram > .customer-property, .-step2c .neighborhood-diagram > .yardly-office { -webkit-transform: translate3d(0, 0, 0) scale(1); transform: translate3d(0, 0, 0) scale(1); } .-step3a .neighborhood-diagram > .city-skyline, .-step3a .neighborhood-diagram > .customer-property, .-step3a .neighborhood-diagram > .yardly-office { -webkit-transform: translate3d(0, 0, 0) scale(1); transform: translate3d(0, 0, 0) scale(1); } .-step3b .neighborhood-diagram > .city-skyline, .-step3b .neighborhood-diagram > .customer-property, .-step3b .neighborhood-diagram > .yardly-office { -webkit-transform: translate3d(0, 0, 0) scale(1); transform: translate3d(0, 0, 0) scale(1); } .-step3b .neighborhood-diagram > .yardly-office > .pictures { -webkit-transform: translate3d(-525px, 0px, 0); transform: translate3d(-525px, 0px, 0); -webkit-transform-origin: center; transform-origin: center; -webkit-transition: -webkit-transform 1s ease; transition: -webkit-transform 1s ease; transition: transform 1s ease; transition: transform 1s ease, -webkit-transform 1s ease; } .-step3b .neighborhood-diagram > .checkmark { -webkit-transform: translate3d(-20px, 0px, 0) scale(1); transform: translate3d(-20px, 0px, 0) scale(1); -webkit-transition: -webkit-transform 1s cubic-bezier(0.87, -0.41, 0.19, 1.44) 0.5s; transition: -webkit-transform 1s cubic-bezier(0.87, -0.41, 0.19, 1.44) 0.5s; transition: transform 1s cubic-bezier(0.87, -0.41, 0.19, 1.44) 0.5s; transition: transform 1s cubic-bezier(0.87, -0.41, 0.19, 1.44) 0.5s, -webkit-transform 1s cubic-bezier(0.87, -0.41, 0.19, 1.44) 0.5s; } .-step3c .neighborhood-diagram > .city-skyline, .-step3c .neighborhood-diagram > .customer-property, .-step3c .neighborhood-diagram > .yardly-office { -webkit-transform: translate3d(0, 0, 0) scale(1); transform: translate3d(0, 0, 0) scale(1); } .-step3c .neighborhood-diagram > .yardly-office > .pictures { -webkit-transform: translate3d(-575px, 100px, 0) scale(0.25); transform: translate3d(-575px, 100px, 0) scale(0.25); -webkit-transform-origin: center; transform-origin: center; -webkit-transition: -webkit-transform 1s cubic-bezier(0.87, -0.41, 0.19, 1.44); transition: -webkit-transform 1s cubic-bezier(0.87, -0.41, 0.19, 1.44); transition: transform 1s cubic-bezier(0.87, -0.41, 0.19, 1.44); transition: transform 1s cubic-bezier(0.87, -0.41, 0.19, 1.44), -webkit-transform 1s cubic-bezier(0.87, -0.41, 0.19, 1.44); } .-step3c .neighborhood-diagram > .customer-property > .tall-grass { -webkit-transform: scaleY(0); transform: scaleY(0); } .-step3c .neighborhood-diagram > .checkmark { -webkit-transform: translate3d(40px, -120px, 0) scale(1); transform: translate3d(40px, -120px, 0) scale(1); -webkit-transition: -webkit-transform 1s cubic-bezier(0.87, -0.41, 0.19, 1.44) 0.5s; transition: -webkit-transform 1s cubic-bezier(0.87, -0.41, 0.19, 1.44) 0.5s; transition: transform 1s cubic-bezier(0.87, -0.41, 0.19, 1.44) 0.5s; transition: transform 1s cubic-bezier(0.87, -0.41, 0.19, 1.44) 0.5s, -webkit-transform 1s cubic-bezier(0.87, -0.41, 0.19, 1.44) 0.5s; } } @-webkit-keyframes floating-clouds { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { -webkit-transform: translate3d(1000px, 0, 0); transform: translate3d(1000px, 0, 0); } } @keyframes floating-clouds { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { -webkit-transform: translate3d(1000px, 0, 0); transform: translate3d(1000px, 0, 0); } } @-webkit-keyframes sending-signals { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } @keyframes sending-signals { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } @-webkit-keyframes mowing-lawns { 0% { -webkit-transform: translateX(-130px) scaleX(1); transform: translateX(-130px) scaleX(1); -webkit-transform-origin: center; transform-origin: center; } 50% { -webkit-transform: translateX(100px) scaleX(1); transform: translateX(100px) scaleX(1); -webkit-transform-origin: center; transform-origin: center; } 51% { -webkit-transform: translateX(90px) scaleX(-1); transform: translateX(90px) scaleX(-1); -webkit-transform-origin: center; transform-origin: center; } 100% { -webkit-transform: translateX(-130px) scaleX(-1); transform: translateX(-130px) scaleX(-1); -webkit-transform-origin: center; transform-origin: center; } } @keyframes mowing-lawns { 0% { -webkit-transform: translateX(-130px) scaleX(1); transform: translateX(-130px) scaleX(1); -webkit-transform-origin: center; transform-origin: center; } 50% { -webkit-transform: translateX(100px) scaleX(1); transform: translateX(100px) scaleX(1); -webkit-transform-origin: center; transform-origin: center; } 51% { -webkit-transform: translateX(90px) scaleX(-1); transform: translateX(90px) scaleX(-1); -webkit-transform-origin: center; transform-origin: center; } 100% { -webkit-transform: translateX(-130px) scaleX(-1); transform: translateX(-130px) scaleX(-1); -webkit-transform-origin: center; transform-origin: center; } } </style></head><body> <main class="page-layout landing-page page-layout"> <section class=how-it-works id=how-it-works><svg version=1.1 class="diagram neighborhood-diagram" xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink x=0px y=0px viewbox="0 50 200 150"><g class=city-skyline><path class=shape d="M823.5,181l-16.2-20.6l-10.5,12.5l-14.3-18.5L767.2,174l-8.8-9.9L743,183.9V99h-31v62h-4v8h-1 v11h-6V52h-11v-5h-13v5h-12v114h-3v18h-2v-11h-1v-14h-17v14h-3v-67.6l-9.8-17.8L613.1,105H609v78h-3v-17h-5v-3h-2v-7h-20v-6h-5V66 h-8v-3h-19v1h-8v95h-2v-5h-9v-4h-6v4h-3v4h-1v-58h-2V87h-2v-6h-0.7c0,0-4.1-4.9-12.4-4.9c-8.3,0-11.1,4.9-11.1,4.9H484v6h-1v15h-1 v57h-8v10h-4V87h-7v-4h-14v4h-6v82h-4v-15h-9v11h-2V76h-32v92h-3v-7h-9v9h-2v-14h-16.9l-6.2-4h-6.7c-1.4-5-7.2-7.7-15.2-8.6V140h-7 v3.4c-7,0.8-12.6,3.6-14,8.6h-6v-14h-4.6c-0.7-9-4.4-15.3-9.4-17.8v-5.6V107l-5-6.4l-5,6.4v7.6v5.6c-4,2.5-7.7,8.8-8.4,17.8H272v18 h-47v25h-25v19h633v-19H823.5z"></path></g><g class=sun><circle class=shape cx=874.5 cy=44.5 r=15.5></circle><path class=line d=M872.1,24.1c-9.4,1.1-16.8,8.5-18,17.9></path><path class=line d=M877,64.9c9.4-1.1,16.8-8.5,18-17.9></path><path class=line d=M894.9,42c-1.1-9.4-8.5-16.8-17.9-18></path><path class=line d=M854,47c1.1,9.4,8.5,16.8,17.9,18></path><path class=line d=M884,44.5c0-5.2-4.3-9.5-9.5-9.5></path></g><g class=wind><g class=gust><line class=line x1=210 y1=80 x2=219 y2=80></line><line class=line x1=185 y1=64 x2=200 y2=64></line><line class=line x1=197 y1=58 x2=207 y2=58></line><line class=line x1=219 y1=58 x2=221 y2=58></line><line class=line x1=225 y1=58 x2=227 y2=58></line><circle class=shape cx=213 cy=57 r=3></circle></g><g class=gust><line class=line x1=-21.5 y1=87.5 x2=-6.5 y2=87.5></line><line class=line x1=-9.5 y1=82.5 x2=1.5 y2=82.5></line><circle class=shape cx=12 cy=86 r=3></circle></g><g class=gust><line class=line x1=117 y1=98 x2=133 y2=98></line><line class=line x1=141 y1=108 x2=126 y2=108></line><line class=line x1=138 y1=103 x2=148 y2=103></line><line class=line x1=152 y1=103 x2=155 y2=103></line><line class=line x1=167 y1=103 x2=171 y2=103></line><line class=line x1=175 y1=103 x2=178 y2=103></line></g><g class=gust><line class=line x1=349 y1=81 x2=364 y2=81></line><line class=line x1=357 y1=92 x2=372 y2=92></line><line class=line x1=370 y1=86 x2=379 y2=86></line><line class=line x1=385 y1=86 x2=387 y2=86></line><line class=line x1=401 y1=86 x2=403 y2=86></line></g><g class=gust><line class=line x1=437 y1=57 x2=439 y2=57></line><line class=line x1=443 y1=57 x2=445 y2=57></line><line class=line x1=474 y1=56 x2=488 y2=56></line><line class=line x1=485 y1=50 x2=495 y2=50></line><line class=line x1=486 y1=62 x2=488 y2=62></line><line class=line x1=492 y1=62 x2=494 y2=62></line><circle class=shape cx=462 cy=56 r=3></circle></g><g class=gust><line class=line x1=486 y1=101 x2=489 y2=101></line><line class=line x1=493 y1=101 x2=503 y2=101></line><line class=line x1=508 y1=101 x2=510 y2=101></line><line class=line x1=481 y1=107 x2=496 y2=107></line></g><g class=gust><line class=line x1=574 y1=92 x2=589 y2=92></line><circle class=shape cx=602.5 cy=84.5 r=2.5></circle><line class=line x1=586 y1=85 x2=596 y2=85></line><line class=line x1=609 y1=85 x2=611 y2=85></line><line class=line x1=615 y1=85 x2=617 y2=85></line></g><g class=gust><line class=line x1=695 y1=61 x2=705 y2=61></line><line class=line x1=702 y1=55 x2=717 y2=55></line><line class=line x1=696 y1=50 x2=698 y2=50></line><line class=line x1=702 y1=50 x2=704 y2=50></line></g><g class=gust><line class=line x1=702 y1=112 x2=716 y2=112></line><line class=line x1=713 y1=106 x2=723 y2=106></line><line class=line x1=750 y1=110 x2=760 y2=110></line><line class=line x1=757 y1=104 x2=772 y2=104></line><line class=line x1=750 y1=99 x2=752 y2=99></line><line class=line x1=756 y1=99 x2=758 y2=99></line><circle class=shape cx=738 cy=101 r=3></circle></g><g class=gust><line class=line x1=973 y1=96 x2=988 y2=96></line><circle class=shape cx=1001 cy=90 r=3></circle><line class=line x1=985 y1=90 x2=995 y2=90></line><line class=line x1=1007 y1=90 x2=1009 y2=90></line><line class=line x1=1013 y1=90 x2=1015 y2=90></line><line class=line x1=1009 y1=115 x2=1018 y2=115></line><line class=line x1=997 y1=120 x2=1011 y2=120></line><line class=line x1=1009 y1=125 x2=1012 y2=125></line><line class=line x1=1016 y1=125 x2=1018 y2=125></line></g></g><g class=clouds><g class="cloud cloud-small"><path class=shape d="M374,30c0-3.4-2.5-6.3-5.7-6.9c0.2-0.5,0.3-1.1,0.3-1.7c0-3-2.4-5.5-5.4-5.5 c-1.2,0-2.3,0.4-3.2,1c-1.4-2.9-4.3-4.9-7.7-4.9c-4.7,0-8.6,3.8-8.6,8.6c0,0.7,0.1,1.4,0.2,2c-2.9,1-4.9,3.8-4.9,7 c0,4.1,3.3,7.4,7.4,7.4H367C370.9,37,374,33.9,374,30z"></path></g><g class="cloud cloud-small"><path class=shape d="M690,63c0-3.4-2.5-6.3-5.7-6.9c0.2-0.5,0.3-1.1,0.3-1.7c0-3-2.4-5.5-5.4-5.5 c-1.2,0-2.3,0.4-3.2,1c-1.4-2.9-4.3-4.9-7.7-4.9c-4.7,0-8.6,3.8-8.6,8.6c0,0.7,0.1,1.4,0.2,2c-2.9,1-4.9,3.8-4.9,7 c0,4.1,3.3,7.4,7.4,7.4H683C686.9,70,690,66.9,690,63z"></path></g><g class="cloud cloud-small"><path class=shape d="M-626,30c0-3.4-2.5-6.3-5.7-6.9c0.2-0.5,0.3-1.1,0.3-1.7c0-3-2.4-5.5-5.4-5.5 c-1.2,0-2.3,0.4-3.2,1c-1.4-2.9-4.3-4.9-7.7-4.9c-4.7,0-8.6,3.8-8.6,8.6c0,0.7,0.1,1.4,0.2,2c-2.9,1-4.9,3.8-4.9,7 c0,4.1,3.3,7.4,7.4,7.4h20.6C-629.1,37-626,33.9-626,30z"></path></g><g class="cloud cloud-small"><path class=shape d="M-310,63c0-3.4-2.5-6.3-5.7-6.9c0.2-0.5,0.3-1.1,0.3-1.7c0-3-2.4-5.5-5.4-5.5 c-1.2,0-2.3,0.4-3.2,1c-1.4-2.9-4.3-4.9-7.7-4.9c-4.7,0-8.6,3.8-8.6,8.6c0,0.7,0.1,1.4,0.2,2c-2.9,1-4.9,3.8-4.9,7 c0,4.1,3.3,7.4,7.4,7.4h20.6C-313.1,70-310,66.9-310,63z"></path></g><g class="cloud cloud-large"><path class=shape d="M114,71c5,0,9-4,9-9c0-4.4-3.2-8.1-7.3-8.8c0.2-0.7,0.3-1.4,0.3-2.2c0-3.9-3.1-7-7-7 c-1.5,0-2.9,0.5-4.1,1.3c-1.8-3.7-5.5-6.3-9.9-6.3c-6.1,0-11,4.9-11,11c0,0.9,0.1,1.7,0.3,2.6c-3.7,1.3-6.3,4.8-6.3,8.9 c0,5.2,4.3,9.5,9.5,9.5H114z"></path></g><g class="cloud cloud-large"><path class=shape d="M315,100c5,0,9-4,9-9c0-4.4-3.2-8.1-7.3-8.8c0.2-0.7,0.3-1.4,0.3-2.2c0-3.9-3.1-7-7-7 c-1.5,0-2.9,0.5-4.1,1.3c-1.8-3.7-5.5-6.3-9.9-6.3c-6.1,0-11,4.9-11,11c0,0.9,0.1,1.7,0.3,2.6c-3.7,1.3-6.3,4.8-6.3,8.9 c0,5.2,4.3,9.5,9.5,9.5H315z"></path></g><g class="cloud cloud-large"><path class=shape d="M950,91c5,0,9-4,9-9c0-4.4-3.2-8.1-7.3-8.8c0.2-0.7,0.3-1.4,0.3-2.2c0-3.9-3.1-7-7-7 c-1.5,0-2.9,0.5-4.1,1.3c-1.8-3.7-5.5-6.3-9.9-6.3c-6.1,0-11,4.9-11,11c0,0.9,0.1,1.7,0.3,2.6c-3.7,1.3-6.3,4.8-6.3,8.9 c0,5.2,4.3,9.5,9.5,9.5H950z"></path></g><g class="cloud cloud-large"><path class=shape d="M-886,71c5,0,9-4,9-9c0-4.4-3.2-8.1-7.3-8.8c0.2-0.7,0.3-1.4,0.3-2.2c0-3.9-3.1-7-7-7 c-1.5,0-2.9,0.5-4.1,1.3c-1.8-3.7-5.5-6.3-9.9-6.3c-6.1,0-11,4.9-11,11c0,0.9,0.1,1.7,0.3,2.6c-3.7,1.3-6.3,4.8-6.3,8.9 c0,5.2,4.3,9.5,9.5,9.5H-886z"></path></g><g class="cloud cloud-large"><path class=shape d="M-685,100c5,0,9-4,9-9c0-4.4-3.2-8.1-7.3-8.8c0.2-0.7,0.3-1.4,0.3-2.2c0-3.9-3.1-7-7-7 c-1.5,0-2.9,0.5-4.1,1.3c-1.8-3.7-5.5-6.3-9.9-6.3c-6.1,0-11,4.9-11,11c0,0.9,0.1,1.7,0.3,2.6c-3.7,1.3-6.3,4.8-6.3,8.9 c0,5.2,4.3,9.5,9.5,9.5H-685z"></path></g><g class="cloud cloud-large"><path class=shape d="M-50,91c5,0,9-4,9-9c0-4.4-3.2-8.1-7.3-8.8c0.2-0.7,0.3-1.4,0.3-2.2c0-3.9-3.1-7-7-7 c-1.5,0-2.9,0.5-4.1,1.3c-1.8-3.7-5.5-6.3-9.9-6.3c-6.1,0-11,4.9-11,11c0,0.9,0.1,1.7,0.3,2.6c-3.7,1.3-6.3,4.8-6.3,8.9 c0,5.2,4.3,9.5,9.5,9.5H-50z"></path></g></g><g class=order-method-phone><circle class=shape cx=205 cy=236 r=24></circle><g class=handset><path class=shape d="M195.8,222.4c-1-1-2,0-2,0l-5,5c-2,2,0,5,3,8l13,13c5,4,7,6,9,4l5-5c0,0,1-1,0-2s-6-3-6-3 l-4,1l-10-10l1-5C199.8,228.4,196.8,223.4,195.8,222.4z"></path><path class="shape hightlight" d=M189.2,227c-3.2,3-0.2,6,2.8,9l13,13c5,4,7,6,9.2,3L189.2,227z></path></g></g><g class=order-method-web><circle class=shape cx=205 cy=236 r=24></circle><g class=computer><polygon class="shape stand" points="208,250 210,251 210,253 200,253 200,251 202,250 202,247 208,247"></polygon><rect class="shape back" x=189 y=225 width=33 height=22></rect><rect class="shape strip" x=189 y=245 width=33 height=2></rect><rect class="shape screen" x=189 y=225 width=33 height=18></rect><g class=map><rect class=shape x=190 y=226 width=31 height=16></rect></g><g class=location-marker><path class=shape d="M208.2,232c0-1.7-1.3-3-3-3s-3,1.3-3,3c0,2,3,6,3,6S208.2,234,208.2,232z M205.2,231 c0.6,0,1,0.4,1,1s-0.4,1-1,1s-1-0.4-1-1S204.7,231,205.2,231z"></path></g></g></g><g class=order-method-app><circle class=shape cx=205 cy=236 r=24></circle><g class=phone><path class="shape back" d="M197,255c-1,0-2-1-2-2s0-33,0-34s1-2,2-2s16,0,17,0s2,1,2,2s0,32.8,0,34s-1,2-2,2 S198,255,197,255z"></path><rect class="shape screen" x=196 y=221 width=19 height=28></rect><circle class="shape button" cx=206 cy=252 r=2></circle><line class="line speaker" x1=201 y1=219 x2=206 y2=219></line><line class="line camera" x1=209 y1=219 x2=209 y2=219></line><g class=map><rect class=shape x=197 y=222 width=17 height=26></rect></g><g class=location-marker><path class=shape d="M209,231c0-1.7-1.3-3-3-3s-3,1.3-3,3c0,2,3,6,3,6S209,233,209,231z M206,230 c0.6,0,1,0.4,1,1s-0.4,1-1,1s-1-0.4-1-1S205.4,230,206,230z"></path></g><rect class="shape order-button" x=199 y=242 width=13 height=4></rect></g></g><g class=checkmark><circle class=shape cx=202.5 cy=234 r=21.5></circle><polyline class=line points="190.7,234 199.7,243 215.7,227"></polyline></g><g class=yardly-office><g class=pictures><g class=photo><rect class=shape x=769 y=111 width=43 height=29></rect></g><g class=photo><rect class=shape x=765 y=107 width=43 height=29></rect></g><g class=ground><rect class=shape x=766 y=132 width=41 height=3></rect></g><g class=tree-small><circle class=shape cx=803 cy=120.2 r=5></circle><line class=line x1=803 y1=119.8 x2=803 y2=132></line><line class=line x1=803 y1=122.2 x2=800 y2=120.2></line><line class=line x1=801.5 y1=118.8 x2=801 y2=120.8></line><line class=line x1=803 y1=121.2 x2=806 y2=118.8></line></g><g class="grass short-grass"><line class=line x1=765.5 y1=132 x2=765.5 y2=130></line><line class=line x1=768.5 y1=132 x2=768.5 y2=130></line><line class=line x1=771.5 y1=132 x2=771.5 y2=130></line><line class=line x1=774.5 y1=132 x2=774.5 y2=130></line><line class=line x1=777.5 y1=132 x2=777.5 y2=130></line><line class=line x1=780.5 y1=132 x2=780.5 y2=130></line><line class=line x1=783.5 y1=132 x2=783.5 y2=130></line><line class=line x1=786.5 y1=132 x2=786.5 y2=130></line><line class=line x1=789.5 y1=132 x2=789.5 y2=130></line><line class=line x1=792.5 y1=132 x2=792.5 y2=130></line><line class=line x1=795.5 y1=132 x2=795.5 y2=130></line><line class=line x1=798.5 y1=132 x2=798.5 y2=130></line></g></g><g class=antenna><polyline class=line points="808,101 808,82 800.5,74.5"></polyline><circle class=shape cx=800.5 cy=74.5 r=2.5></circle><g class="radio-waves -right"><path class=line d=M804.4,70.6c1,1,1.6,2.4,1.6,3.9></path><path class=line d=M807.2,67.8c1.7,1.7,2.8,4.1,2.8,6.7></path></g><g class="radio-waves -left"><path class=line d=M796.6,78.4c-1-1-1.6-2.4-1.6-3.9s0.6-2.9,1.6-3.9></path><path class=line d=M793.8,81.2c-1.7-1.7-2.8-4.1-2.8-6.7s1.1-5,2.8-6.7></path></g></g><path class=shape d=M762,99v82h52V99h-17c0-5-4-9-9-9s-9,4-9,9H762z></path><g class=window><rect x=790 y=154 class=shape width=6 height=18></rect><line class=line x1=790 y1=160 x2=796 y2=160></line></g><g class=window><rect x=780 y=154 class=shape width=6 height=18></rect><line class=line x1=780 y1=160 x2=786 y2=160></line></g><g class=window><rect x=770 y=154 class=shape width=6 height=18></rect><line class=line x1=770 y1=160 x2=776 y2=160></line></g><g class=window><rect x=800 y=154 class=shape width=6 height=18></rect><line class=line x1=800 y1=160 x2=806 y2=160></line></g><line class=line x1=762 y1=104 x2=814 y2=104></line><line class=line x1=762 y1=109 x2=814 y2=109></line><line class=line x1=762 y1=149 x2=814 y2=149></line><line class=line x1=762 y1=176 x2=814 y2=176></line><line class=line x1=763 y1=149 x2=769 y2=141></line><line class=line x1=772 y1=149 x2=778 y2=141></line><line class=line x1=781 y1=149 x2=787 y2=141></line><line class=line x1=790 y1=149 x2=796 y2=141></line><line class=line x1=799 y1=149 x2=805 y2=141></line><line class=line x1=808 y1=149 x2=814 y2=141></line><line class=line x1=762 y1=141 x2=814 y2=141></line><line class=line x1=762 y1=128 x2=767 y2=128></line><line class=line x1=762 y1=131 x2=765 y2=131></line><line class=line x1=762 y1=137 x2=766 y2=137></line><g class=yardly-logo><polygon class=shape points="797,114 796,114 789,121 788,121 781,114 780,114 779,115 779,116 786,123 787,125 787,135 788,136 789,136 790,135 790,125 791,123 798,116 798,115"></polygon></g><g class="tree tree-small"><circle class=shape cx=842 cy=157.5 r=10></circle><line class=line x1=842 y1=156.5 x2=842 y2=181></line><line class=line x1=842 y1=161.5 x2=836 y2=157.5></line><line class=line x1=839 y1=154.5 x2=838 y2=158.5></line><line class=line x1=842 y1=159.5 x2=848 y2=154.5></line></g></g><g class=customer-property><g class=customer-house><g class=wall><rect class=shape x=186 y=161 width=43 height=20></rect></g><g class=roof><polygon class=shape points="189,152 226,152 232,161 183,161"></polygon><line class=line x1=190 y1=161.5 x2=190 y2=165></line><line class=line x1=194 y1=152 x2=191 y2=157></line><line class=line x1=200 y1=152 x2=197 y2=157></line><line class=line x1=206 y1=152 x2=203 y2=157></line><line class=line x1=212 y1=152 x2=209 y2=157></line><line class=line x1=218 y1=152 x2=215 y2=157></line><line class=line x1=224 y1=152 x2=221 y2=157></line><line class=line x1=210 y1=161.5 x2=210 y2=165></line><line class=line x1=195 y1=161.5 x2=195 y2=165></line><line class=line x1=215 y1=161.5 x2=215 y2=165></line><line class=line x1=200 y1=161.5 x2=200 y2=165></line><line class=line x1=220 y1=161.5 x2=220 y2=165></line><line class=line x1=205 y1=161.5 x2=205 y2=165></line><line class=line x1=225 y1=161.5 x2=225 y2=165></line></g><g class=window><rect class=shape x=217 y=168 width=7 height=9></rect><line class=line x1=217 y1=172 x2=224 y2=172></line></g><g class=window><rect class=shape x=191 y=168 width=7 height=9></rect><line class=line x1=191 y1=172 x2=198 y2=172></line></g><g class=door><rect class=shape x=204 y=170 width=7 height=11></rect></g></g><g class=bush><path class=shape d="M170.2,181c-1.7,0-3-1.3-3-3c0-1.5,1.1-2.7,2.4-2.9c-0.1-0.2-0.1-0.5-0.1-0.7c0-1.3,1-2.3,2.3-2.3 c0.5,0,1,0.2,1.4,0.4c0.6-1.2,1.8-2.1,3.3-2.1c2,0,3.7,1.6,3.7,3.7c0,0.3,0,0.6-0.1,0.9c1.2,0.4,2.1,1.6,2.1,3 c0,1.7-1.4,3.2-3.2,3.2H170.2z"></path></g><g class="grass tall-grass"><line class=line x1=236 y1=181 x2=236 y2=174></line><line class=line x1=276 y1=181 x2=276 y2=177></line><line class=line x1=264 y1=181 x2=264 y2=177></line><line class=line x1=252 y1=181 x2=252 y2=177></line><line class=line x1=292 y1=181 x2=292 y2=177></line><line class=line x1=244 y1=181 x2=244 y2=172></line><line class=line x1=284 y1=181 x2=284 y2=172></line><line class=line x1=272 y1=181 x2=272 y2=172></line><line class=line x1=256 y1=181 x2=256 y2=171></line><line class=line x1=296 y1=181 x2=296 y2=173></line><line class=line x1=240 y1=176 x2=240 y2=170></line><line class=line x1=280 y1=176 x2=280 y2=170></line><line class=line x1=260 y1=175 x2=260 y2=172></line><line class=line x1=248 y1=181 x2=248 y2=171></line><line class=line x1=288 y1=181 x2=288 y2=171></line><line class=line x1=268 y1=181 x2=268 y2=170></line><line class=line x1=276 y1=174 x2=276 y2=171></line><line class=line x1=264 y1=174 x2=264 y2=171></line><line class=line x1=252 y1=174 x2=252 y2=170></line><line class=line x1=292 y1=174 x2=292 y2=170></line><line class=line x1=240 y1=181 x2=240 y2=179></line><line class=line x1=280 y1=181 x2=280 y2=179></line><line class=line x1=260 y1=181 x2=260 y2=178></line><line class=line x1=300 y1=181 x2=300 y2=178></line></g><g class="grass short-grass"><line class=line x1=236 y1=181 x2=236 y2=178></line><line class=line x1=276 y1=181 x2=276 y2=178></line><line class=line x1=264 y1=181 x2=264 y2=178></line><line class=line x1=252 y1=181 x2=252 y2=178></line><line class=line x1=292 y1=181 x2=292 y2=178></line><line class=line x1=244 y1=181 x2=244 y2=178></line><line class=line x1=284 y1=181 x2=284 y2=178></line><line class=line x1=272 y1=181 x2=272 y2=178></line><line class=line x1=256 y1=181 x2=256 y2=178></line><line class=line x1=296 y1=181 x2=296 y2=178></line><line class=line x1=248 y1=181 x2=248 y2=178></line><line class=line x1=288 y1=181 x2=288 y2=178></line><line class=line x1=268 y1=181 x2=268 y2=178></line><line class=line x1=240 y1=181 x2=240 y2=178></line><line class=line x1=280 y1=181 x2=280 y2=178></line><line class=line x1=260 y1=181 x2=260 y2=178></line><line class=line x1=300 y1=181 x2=300 y2=178></line></g><g class="tree tree-large"><ellipse class=shape cx=160 cy=153 rx=11.5 ry=11.5></ellipse><line class=line x1=160 y1=151.9 x2=160 y2=180></line><line class=line x1=160 y1=157.6 x2=153.1 y2=153></line><line class=line x1=156.6 y1=149.6 x2=155.4 y2=154.2></line><line class=line x1=160 y1=155.3 x2=166.9 y2=149.6></line></g><g class="tree tree-small"><circle class=shape cx=144 cy=157.5 r=10></circle><line class=line x1=144 y1=156.5 x2=144 y2=181></line><line class=line x1=144 y1=161.5 x2=138 y2=157.5></line><line class=line x1=141 y1=154.5 x2=140 y2=158.5></line><line class=line x1=144 y1=159.5 x2=150 y2=154.5></line></g><g class="tree tree-small"><circle class=shape cx=313 cy=157.5 r=10></circle><line class=line x1=313 y1=156.5 x2=313 y2=181></line><line class=line x1=313 y1=161.5 x2=307 y2=157.5></line><line class=line x1=310 y1=154.5 x2=309 y2=158.5></line><line class=line x1=313 y1=159.5 x2=319 y2=154.5></line></g></g><g class=lawn-mower><path class="shape body" d=M57,170c0-4,1.8-4,4-4s4,0,4,4H57z></path><path class="shape cap" d=M76,178H46v-6c0-1,1-2,2-2h26c1,0,2,1,2,2V178z></path><circle class="shape wheel" cx=52.5 cy=176.5 r=3.5></circle><circle class="shape wheel" cx=69.5 cy=176.5 r=3.5></circle><polyline class="line handle" points="47,169 42,160 39,160"></polyline></g><g class=ground><rect class="shape mask" x=0 y=180 width=1000 height=16></rect><rect class=shape x=5 y=185 width=1033 height=15></rect><line class=line x1=1040 y1=181 x2=0 y2=181></line><line class=line x1=1040 y1=195 x2=0 y2=195></line></g></svg> </main> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script> <script >/******/ (function(modules) { // webpackBootstrap /******/ // The module cache /******/ var installedModules = {}; /******/ // The require function /******/ function __webpack_require__(moduleId) { /******/ // Check if module is in cache /******/ if(installedModules[moduleId]) /******/ return installedModules[moduleId].exports; /******/ // Create a new module (and put it into the cache) /******/ var module = installedModules[moduleId] = { /******/ exports: {}, /******/ id: moduleId, /******/ loaded: false /******/ }; /******/ // Execute the module function /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); /******/ // Flag the module as loaded /******/ module.loaded = true; /******/ // Return the exports of the module /******/ return module.exports; /******/ } /******/ // expose the modules object (__webpack_modules__) /******/ __webpack_require__.m = modules; /******/ // expose the module cache /******/ __webpack_require__.c = installedModules; /******/ // __webpack_public_path__ /******/ __webpack_require__.p = ""; /******/ // Load entry module and return exports /******/ return __webpack_require__(0); /******/ }) /************************************************************************/ /******/ ([ /* 0 */ /***/ function(module, exports, __webpack_require__) { 'use strict'; __webpack_require__(1); /***/ }, /* 1 */ /***/ function(module, exports, __webpack_require__) { 'use strict'; var _utils = __webpack_require__(2); __webpack_require__(3); (function () { /** * Animation sequence **/ // TODO: set this to true before deployment var isTimerSet = true; var index = 0; var timer = void 0; var steps = []; var viewFlag = true; var setSteps = function setSteps() { if (window.screen.width < 800) { steps = [{ class: '-step1a', duration: 1000 }, { class: '-step1b', duration: 3000 }, { class: '-step1c', duration: 3500 }, { class: '-step2a', duration: 2000 }, { class: '-step2b', duration: 3000 }, { class: '-step2c', duration: 4000 }, { class: '-step3a', duration: 3000 }, { class: '-step3b', duration: 3000 }, { class: '-step3c', duration: 3000 }]; } else { steps = [{ class: '-step1a', duration: 1000 }, { class: '-step1b', duration: 2000 }, { class: '-step1c', duration: 3000 }, { class: '-step2a', duration: 2000 }, { class: '-step2b', duration: 2000 }, { class: '-step2c', duration: 3000 }, { class: '-step3a', duration: 1000 }, { class: '-step3b', duration: 1500 }, { class: '-step3c', duration: 5000 }]; } }; var section = document.querySelector('.how-it-works') || null; var isInViewport = function isInViewport(el) { var elemTop = el.getBoundingClientRect().top; var elemBottom = el.getBoundingClientRect().bottom; return elemTop < window.innerHeight && elemBottom >= 0; }; var animationSteps = function animationSteps() { var smCloud = document.getElementsByClassName('cloud-small'); var lgCloud = document.getElementsByClassName('cloud-large'); var i = void 0; if (viewFlag) { if (smCloud[0].style.animation == "none" || lgCloud[0].style.animation == "none") { for (i = 0; i < smCloud.length; i++) { smCloud[i].removeAttribute("style"); } for (i = 0; i < lgCloud.length; i++) { lgCloud[i].removeAttribute("style"); } } section.removeClass(steps[index].class); if (index < steps.length - 1) { index++; } else { index = 0; } section.addClass(steps[index].class); if (!isTimerSet) return; window.clearInterval(timer); timer = setInterval(function () { animationSteps(); }, steps[index].duration); } else { for (i = 0; i < smCloud.length; i++) { smCloud[i].style.animation = "none"; } for (i = 0; i < lgCloud.length; i++) { lgCloud[i].style.animation = "none"; } } }; /** * Responsive SVG Viewbox **/ var diagram = document.querySelector('.neighborhood-diagram'); if (!section || !diagram) return; var resizeNeighborhoodDiagram = function resizeNeighborhoodDiagram() { if (window.screen.width < 600) { diagram.setAttribute('viewBox', '0 50 200 150'); } else if (window.screen.width < 800) { diagram.setAttribute('viewBox', '-125 50 400 150'); } else if (window.screen.width < 1000) { diagram.setAttribute('viewBox', '0 0 600 200'); } else if (window.screen.width < 1200) { diagram.setAttribute('viewBox', '0 0 800 200'); } else { diagram.setAttribute('viewBox', '0 0 1000 200'); } }; (0, _utils.throttle)('resize', 'optimizedResize'); window.addEventListener('optimizedResize', function () { setSteps(); resizeNeighborhoodDiagram(); }); window.addEventListener('scroll', function () { viewFlag = isInViewport(section); }); if (!isTimerSet) { section.addEventListener('click', function () { animationSteps(); }); } /** * init **/ setSteps(); resizeNeighborhoodDiagram(); if (isTimerSet) { timer = setInterval(function () { animationSteps(); }, steps[index].duration); } })(); /***/ }, /* 2 */ /***/ function(module, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var throttle = function throttle(type, name) { var obj = arguments.length <= 2 || arguments[2] === undefined ? window : arguments[2]; var running = false; var func = function func() { if (running) return; running = true; requestAnimationFrame(function () { obj.dispatchEvent(new CustomEvent(name)); running = false; }); }; obj.addEventListener(type, func); }; exports.throttle = throttle; /***/ }, /* 3 */ /***/ function(module, exports) { (function(){Array.prototype.CSSClassIndexOf=Array.prototype.indexOf||function(item){var length=this.length;for(var i=0;i<length;i++)if(this[i]===item)return i;return-1};var cl="classList"in document.createElement("a");var p=Element.prototype;if(!p.hasClass)p.hasClass=function(c){var r=true,e=cl?Array.prototype.slice.call(this.classList):this.className.split(" ");c=c.split(" ");for(var i=0;i<c.length;i++)if(cl){if(!this.classList.contains(c[i]))r=false}else if(e.CSSClassIndexOf(c[i])===-1)r=false; return r};if(!p.addClass)p.addClass=function(c){c=c.split(" ");for(var i=0;i<c.length;i++)if(!this.hasClass(c[i]))if(cl)this.classList.add(c[i]);else this.className=this.className!==""?this.className+" "+c[i]:c[i];return this};if(!p.removeClass)p.removeClass=function(c){var e=this.className.split(" ");c=c.split(" ");for(var i=0;i<c.length;i++)if(this.hasClass(c[i]))if(cl)this.classList.remove(c[i]);else e.splice(e.CSSClassIndexOf(c[i]),1);if(!cl)this.className=e.join(" ");return this};if(!p.toggleClass)p.toggleClass= function(c){c=c.split(" ");for(var i=0;i<c.length;i++)if(cl)this.classList.toggle(c[i]);else if(this.hasClass(c[i]))this.removeClass(c[i]);else this.addClass(c[i]);return this}})(); /***/ } /******/ ]); //# sourceURL=pen.js </script> </body></html>

Related: See More


Questions / Comments: