Как сделать баннер с капающим краном

Как сделать баннер с капающем краном.
У меня есть изображение капающего крана

Сценарий анимации
Водопроводный кран, из которого тянется и падает капелька воды. Цикл повторяется несколько раз Кран медленно исчезает Появляется надпись: Из капающего крана, за сутки убегает 10 вёдер воды. Не хотите платить лишние деньги за ЖКХ, позвоните нам. Номер телефона сантехника Переход к первому пункту анимации
Вот так, по списку, должны идти этапы анимации, далее зацикливание,- переход к первому пункту.
Update 21.12.2018
Добавляю несколько векторных изображений водопроводных кранов. Делаю это по запросу в комментариях.












Конкурс завершён. Выбран ответ @UModeL

Ответ
Никаких картинок, SVG и JS. Only HTML & CSS (box-shadow и ...-gradient). Удалось обойтись даже без clip-path. Только, точной подгонкой таймингов анимаций, не занимался - прикинул "на глазок":


* { margin: 0 box-sizing: border-box padding: 0 } body { background-color: rgb(25, 25, 64) } .wrap { position: relative height: 800px width: 800px margin: 30px auto overflow: hidden } .valve { position: relative height: 570px width: 315px margin: 30px auto animation: fade 36s ease-in 10s infinite } .valve *, .valve *:before, .valve *:after { position: absolute left: 50% transform: translateX(-50%) } .nakladka { top: 102px height: 310px width: 310px border-radius: 50% background-color: rgba(200, 200, 200, .9) box-shadow: 4px 6px 26px 0px black, inset -20px -18px 110px 21px #000000b5 } .klapan { top: 185px height: 170px width: 185px border-radius: 50% background-color: rgba(255, 230, 200, 1) background-image: radial-gradient(circle, rgba(255, 255, 255, 0) 5%, rgb(255, 255, 255) 15%, rgba(255, 255, 255, 0.29) 38%, rgba(0, 0, 0, 0.14) 77%) background-position: 92% 6% background-size: 231% 100% background-repeat: no-repeat box-shadow: 15px 14px 57px -13px black, inset -10px -2px 57px -13px black } .klapan:before { content: '' top: -40px height: 125px width: 130px border-radius: 50% 50% 0 0 / 100% 100% 0 0 background-color: #ffe6c8 background-image: linear-gradient(102deg, rgba(255, 255, 255, 0) 5%, rgb(255, 255, 255) 15%, rgba(255, 255, 255, 0.29) 45%, rgba(0, 0, 0, 0.11) 82%) box-shadow: inset -4px 3px 23px -15px black } .klapan:after { content: '' top: -45px height: 60px width: 85px border-radius: 0 0 50% 50% background-color: #ffe6c8 background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 5%, rgb(255, 255, 255) 15%, rgba(255, 255, 255, 0.29) 45%, rgba(0, 0, 0, 0.11) 82%) background-position: 28% 0% background-size: 167% 100% background-repeat: no-repeat box-shadow: inset -2px 11px 24px -8px black } .mahovik { top: 5px height: 55px width: 20px border-radius: 10px 10px 0 0 background-color: rgba(100, 100, 100, 1) background-image: linear-gradient(115deg, rgba(255, 255, 255, 0.4) 5%, rgba(0, 0, 0, 0.65)) box-shadow: inset -2px 0px 10px rgba(0, 0, 0, .75) } .mahovik:before { content: '' top: 9px height: 34px width: 188px border-radius: 17px background-color: rgb(255, 0, 0) background-image: linear-gradient(90deg, rgba(255, 0, 0, 0.18) 5%, rgba(0, 0, 0, 0.15) 10%, rgba(255, 255, 255, 0.46) 15%, rgba(255, 0, 0, 0.18) 20%, rgba(255, 0, 0, 0.18) 25%, rgba(4, 4, 4, 0.18) 30%, rgba(255, 255, 255, 0.68) 40%, rgba(255, 0, 0, 0.18) 50%, rgba(255, 0, 0, 0.18) 50%, rgba(4, 4, 4, 0.18) 60%, rgba(255, 255, 255, 0.56) 71%, rgba(4, 4, 4, 0.25) 80%) box-shadow: inset -5px -4px 31px 4px rgba(0, 0, 0, .75) } .buksa { top: 96px height: 47px width: 134px border-radius: 10px 10px 2px 2px background-color: rgba(255, 230, 200, 1) background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.55) 20%, rgba(255, 255, 255, 0) 24%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.19) 78%) box-shadow: inset -1px -1px 9px 0px rgba(0, 0, 0, 0.65) } .buksa:before { content: '' top: -27px height: 28px width: 80% border-radius: 60% 60% 0 0 / 100% 100% 0 0 background-color: #ffe6c8 background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 5%, rgb(255, 255, 255) 15%, rgba(255, 255, 255, 0.29) 45%, rgba(0, 0, 0, 0.11) 82%) background-position: 28% 0% background-size: 167% 100% background-repeat: no-repeat box-shadow: inset -11px 4px 28px -8px black } .buksa:after { content: '' top: -40px height: 35px width: 70% border-radius: 30% 30% 0 0 / 80% 80% 0 0 background-color: #ffe6c8 background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 5%, rgb(255, 255, 255) 18%, rgba(255, 255, 255, 0.29) 35%, rgba(0, 0, 0, 0.11) 55%) background-position: 28% 0% background-size: 167% 100% background-repeat: no-repeat box-shadow: inset -9px 8px 25px -10px black } .nosik { top: 235px height: 115px width: 115px border-radius: 50% background-color: rgba(255, 230, 200, 1) background-image: radial-gradient(circle, rgba(255, 255, 255, 0) 5%, rgb(255, 255, 255) 15%, rgba(255, 255, 255, 0.29) 38%, rgba(0, 0, 0, 0.14) 77%) background-position: 92% 6% background-size: 231% 100% background-repeat: no-repeat box-shadow: 6px 9px 35px -7px black } .nosik:before { content: '' top: 50% height: 165px width: 100% border-radius: 10px 10px 5px 5px background-color: #ffe6c8 background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 5%, rgb(255, 255, 255) 15%, rgba(255, 255, 255, 0.29) 45%, rgba(0, 0, 0, 0.11) 82%) } .water { z-index: -1 } .emmiter { top: 140px height: 100px width: 100px transform: translateX(-50%) rotate(135deg) border: 1px dotted #090 border-radius: 100% 0 50% 60% / 50% 0 100% 60% background-color: rgba(180, 206, 255, 0) background-image: linear-gradient(60deg, rgb(180, 206, 255), rgba(180, 206, 255, 0)) animation: emmiter 4s ease-in infinite } .drop { top: 140px height: 100px width: 100px transform: translateX(-50%) rotate(-45deg) border-radius: 100% 0 55% 50% / 55% 0 100% 50% background-color: rgba(180, 206, 255, 0) background-image: linear-gradient(60deg, rgb(180, 206, 255), rgba(180, 206, 255, 0)) box-shadow: inset -2px -20px 15px -5px rgba(255, 255, 255, 0.5) animation: drop 4s ease-in infinite } .txt_block { position: absolute top: 0 height: 100% width: 100% overflow: hidden text-align: center text-transform: uppercase font: bold 48px 'Arial' color: rgb(240, 248, 255) } .txt_1 { position: absolute left: -800px width: 2400px background-image: linear-gradient(60deg, rgb(180, 206, 255), rgba(180, 206, 255, 0), rgba(180, 206, 255, 1)) animation: txt_1 36s ease-in-out 10s infinite } .txt_1 div { position: absolute width: 800px } .txt_1 div:nth-child(1) { top: 3em left: 0px } .txt_1 div:nth-child(2) { top: 6em right: 0px } .txt_1 div:nth-child(3) { top: 9em left: 0px } @keyframes drop { 0% { top: 140px width: 50px height: 50px opacity: 0.0 border-radius: 100% 0 55% 50% / 55% 0 100% 50% } 75% { height: 100px width: 100px } 83% { border-radius: 100% 0 55% 50% / 55% 0 100% 50% } 89% { top: 250px opacity: 1.0 } 95% { top: 470px border-radius: 50% 50% 50% 50% / 50% 50% 50% 50% } 100% { top: 450px opacity: 0.0 border-radius: 50% 100% 50% 100% / 50% 100% 50% 100% } } @keyframes emmiter { 0%, 100% { top: 140px border-radius: 50% 100% 50% 100% / 50% 100% 50% 100% } 80% { top: 130px border-radius: 100% 0 55% 50% / 55% 0 100% 50% } 88% { top: 120px } 90% { border-radius: 50% 35% 50% 50% / 50% 35% 50% 50% } } @keyframes fade { 0%, 100% { opacity: 1.0 } 10%, 80% { opacity: 0.2 } } @keyframes txt_1 { 0%, 100% { left: -800px width: 2400px transform: scale(1.0) opacity: 0.0 } 15%, 20% { left: 0px width: 800px transform: scale(1.0) opacity: 1.0 } 25% { opacity: 0.0 } 99.99% { left: 0px width: 800px transform: scale(1.3) } } .txt_2 { position: absolute height: 100% width: 800px vertical-align: middle } .txt_2 div:not(:last-child) { display: inline-block transform: scaleY(1.2) rotate(0deg) opacity: 0.0 animation: txt_2 36s ease-out 18s infinite } @keyframes txt_2 { 0%, 100% { opacity: 0.0 line-height: 30em } 13% { opacity: 1.0 line-height: 3em } 50% { opacity: 1.0 line-height: 3em } 60%, 99.99% { opacity: 0.0 line-height: 4em } } .txt_3 { transform: scaleY(1.2) rotate(0deg) font: bold 84px 'Arial' color: rgb(253, 236, 34) opacity: 0.0 animation: txt_2 36s ease-in-out 18s infinite, txt_3 36s linear 26s infinite } @keyframes txt_3 { 0%, 8%, 100% { transform: scaleY(1.2) rotate(0deg) } 1%, 3%, 5% { transform: scaleY(1.2) rotate(2deg) } 2%, 4%, 6% { transform: scaleY(1.2) rotate(-2deg) } 7% { transform: scaleY(1.2) rotate(2deg) } }

Смотреть лучше развернув страницу.