<div> <svg id="isi-wave" xmlns="http://www.w3.org/2000/svg" viewBox="519 0 2022 1225.25"> <g id="wave"> <path d="M5983.25,234v991.28H0V233.7c8.66.74,17.26,1.13,26,1.52l.23.18C209.57,244,520.63,39,785.09,39c242.62,0,530.06,179.27,710.72,195v-.27c8.66.74,17.26,1.13,26,1.52l.23.18C1705.39,244,2016.44,39,2280.9,39c242.62,0,530.06,179.27,710.72,195v-.27c8.67.74,17.26,1.13,26,1.52l.23.18C3201.2,244,3512.26,39,3776.71,39c242.62,0,530.07,179.27,710.72,195v-.27c8.66.74,17.26,1.13,26,1.52l.23.18C4697,244,5008.07,39,5272.53,39,5515.15,39,5802.6,218.26,5983.25,234Z" fill="#00a6dd"/> <path d="M5983.25,187.32v51C5707.9,230.8,5516.38,86.11,5214.88,86.11c-237.08,0-397.67,115.57-615.18,145-9.24,1.23-18.56,2.35-28,3.23-18.87,1.85-38.17,3-58,3.35h-.23c-30.14.56-21.88.69-26,.62v0c-275.35-7.47-466.86-152.16-768.37-152.16-237.07,0-397.66,115.57-615.17,145-9.25,1.23-18.57,2.35-28,3.23-18.87,1.85-38.16,3-58,3.35h-.23c-30.13.56-21.88.69-25.95.62v0c-275.35-7.47-466.87-152.16-768.37-152.16-237.07,0-397.67,115.57-615.18,145-9.24,1.23-18.56,2.35-28,3.23-18.87,1.85-38.17,3-58,3.35h-.23c-30.13.56-21.88.69-26,.62C1220.45,230.8,1028.94,86.11,727.44,86.11c-237.08,0-397.67,115.57-615.18,145-9.24,1.23-18.56,2.35-28,3.23-18.87,1.85-38.16,3-58,3.35H26c-30.14.56-21.89.69-26,.62v-51c35.7,6.16,50.4,9.7,110.6,9.7C276.1,197,592.14,0,841.93,0c218.51,0,473.38,146.92,653.88,187.32,35.7,6.16,50.4,9.7,110.6,9.7C1771.91,197,2088,0,2337.74,0c218.51,0,473.38,146.92,653.88,187.32h0c35.7,6.16,50.4,9.7,110.6,9.7,165.5,0,481.54-197,731.32-197,218.52,0,473.38,146.92,653.88,187.32v0c35.7,6.16,50.4,9.7,110.6,9.7,165.5,0,481.54-197,731.33-197C5547.88,0,5802.75,146.92,5983.25,187.32Z" fill="#0045ab"/> </g> <g id="bubbles"> <circle id="bubble_1" data-name="bubble 1" cx="707.51" cy="109.89" r="70.69" fill="#fff" opacity="0.57"/> <circle id="bubble_2" data-name="bubble 2" cx="906.53" cy="83.33" r="49.13" fill="#fff" opacity="0.4"/> <circle id="bubble_3" data-name="bubble 3" cx="1267.49" cy="128.73" r="101.27" fill="#fff" opacity="0.35"/> <circle id="bubble_4" data-name="bubble 4" cx="1528.18" cy="88.09" r="61.16" fill="#fff" opacity="0.65"/> <circle id="bubble_5" data-name="bubble 5" cx="1892.64" cy="175.38" r="128.84" fill="#fff" opacity="0.52"/> <circle id="bubble_6" data-name="bubble 6" cx="2081.9" cy="83.86" r="44.87" fill="#fff" opacity="0.56"/> <circle id="bubble_7" data-name="bubble 7" cx="2339.83" cy="103.63" r="76.7" fill="#fff" opacity="0.7"/> </g> </svg>
</div>
<img class='waves-img' src="https://assets.website-files.com/5d016609a151693900497381/5d1f7a94fd3194c9ef4637c4_Wave%20test.png">
body {
font: 1.25em sans-serif;
background-color: white;
}
/* modernizr targeting */
.no-webanimations body{
background-color:blue;
}
/*
* Hides the element from the old browsers
*/
.no-webanimations svg#isi-wave{display:none;}
/*
* Hides the element from browsers that can render the animations */
.webanimations .waves-img {display:none;}
.no-webanimations .waves-img.img {display:inline-block;}
/* your code from the forums */
#isi-wave #wave {
-webkit-animation: moveWave 4s linear 0s infinite;
animation: moveWave 4s linear 0s infinite;
}
#isi-wave #bubble_1 {
-webkit-transform: translate(0px, 220px);
-ms-transform: translate(0px, 220px);
transform: translate(0px, 220px);
-webkit-animation: moveIn 2s ease-in-out -1.8s infinite alternate;
animation: moveIn 2s ease-in-out -1.8s infinite alternate;
}
#isi-wave #bubble_2 {
-webkit-transform: translate(0px, 200px);
-ms-transform: translate(0px, 200px);
transform: translate(0px, 200px);
-webkit-animation: moveIn 2s ease-in-out -2.28s infinite alternate;
animation: moveIn 2s ease-in-out -2.28s infinite alternate;
}
#isi-wave #bubble_3 {
-webkit-transform: translate(0px, 230px);
-ms-transform: translate(0px, 230px);
transform: translate(0px, 230px);
-webkit-animation: moveIn 2s ease-in-out -3.2s infinite alternate;
animation: moveIn 2s ease-in-out -3.2s infinite alternate;
}
#isi-wave #bubble_4 {
-webkit-transform: translate(0px, 210px);
-ms-transform: translate(0px, 210px);
transform: translate(0px, 210px);
-webkit-animation: moveIn 2s ease-in-out -3.8s infinite alternate;
animation: moveIn 2s ease-in-out -3.8s infinite alternate;
}
#isi-wave #bubble_5 {
-webkit-transform: translate(0px, 210px);
-ms-transform: translate(0px, 210px);
transform: translate(0px, 210px);
-webkit-animation: moveIn 2s ease-in-out -0.92s infinite alternate;
animation: moveIn 2s ease-in-out -0.92s infinite alternate;
}
#isi-wave #bubble_6 {
-webkit-transform: translate(0px, 210px);
-ms-transform: translate(0px, 210px);
transform: translate(0px, 210px);
-webkit-animation: moveIn 2s ease-in-out -1.32s infinite alternate;
animation: moveIn 2s ease-in-out -1.32s infinite alternate;
}
.cssamimations.animations #isi-wave #bubble_7 {
-webkit-transform: translate(0px, 220px);
-ms-transform: translate(0px, 220px);
transform: translate(0px, 220px);
-webkit-animation: moveIn 2s ease-in-out -2.04s infinite alternate;
animation: moveIn 2s ease-in-out -2.04s infinite alternate;
}
@-webkit-keyframes moveIn {
to {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
}
@keyframes moveIn {
to {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
}
@-webkit-keyframes moveWave {
to {
-webkit-transform: translate(-1495.81px, 0px);
transform: translate(-1495.81px, 0px);
}
}
@keyframes moveWave {
to {
-webkit-transform: translate(-1495.81px, 0px);
transform: translate(-1495.81px, 0px);
}
}
/* Webflow default breakpoints */
@media screen and (max-width: 991px) {
/* Your responsive CSS */
}
@media screen and (max-width: 767px) {
/* Your responsive CSS */
}
@media screen and (max-width: 479px) {
/* Your responsive CSS */
}
View Compiled
/*! modernizr 3.6.0 (Custom Build) | MIT *
* https://modernizr.com/download/?-animation-cssanimations-smil-setclasses !*/
!function(e,n,t){function r(e,n){return typeof e===n}function o(){var e,n,t,o,s,i,a;for(var l in w)if(w.hasOwnProperty(l)){if(e=[],n=w[l],n.name&&(e.push(n.name.toLowerCase()),n.options&&n.options.aliases&&n.options.aliases.length))for(t=0;t<n.options.aliases.length;t++)e.push(n.options.aliases[t].toLowerCase());for(o=r(n.fn,"function")?n.fn():n.fn,s=0;s<e.length;s++)i=e[s],a=i.split("."),1===a.length?Modernizr[a[0]]=o:(!Modernizr[a[0]]||Modernizr[a[0]]instanceof Boolean||(Modernizr[a[0]]=new Boolean(Modernizr[a[0]])),Modernizr[a[0]][a[1]]=o),C.push((o?"":"no-")+a.join("-"))}}function s(e){var n=_.className,t=Modernizr._config.classPrefix||"";if(b&&(n=n.baseVal),Modernizr._config.enableJSClass){var r=new RegExp("(^|\\s)"+t+"no-js(\\s|$)");n=n.replace(r,"$1"+t+"js$2")}Modernizr._config.enableClasses&&(n+=" "+t+e.join(" "+t),b?_.className.baseVal=n:_.className=n)}function i(){return"function"!=typeof n.createElement?n.createElement(arguments[0]):b?n.createElementNS.call(n,"http://www.w3.org/2000/svg",arguments[0]):n.createElement.apply(n,arguments)}function a(e,n){return function(){return e.apply(n,arguments)}}function l(e,n,t){var o;for(var s in e)if(e[s]in n)return t===!1?e[s]:(o=n[e[s]],r(o,"function")?a(o,t||n):o);return!1}function u(e){return e.replace(/([a-z])-([a-z])/g,function(e,n,t){return n+t.toUpperCase()}).replace(/^-/,"")}function f(e,n){return!!~(""+e).indexOf(n)}function c(e){return e.replace(/([A-Z])/g,function(e,n){return"-"+n.toLowerCase()}).replace(/^ms-/,"-ms-")}function d(n,t,r){var o;if("getComputedStyle"in e){o=getComputedStyle.call(e,n,t);var s=e.console;if(null!==o)r&&(o=o.getPropertyValue(r));else if(s){var i=s.error?"error":"log";s[i].call(s,"getComputedStyle returning null, its possible modernizr test results are inaccurate")}}else o=!t&&n.currentStyle&&n.currentStyle[r];return o}function p(){var e=n.body;return e||(e=i(b?"svg":"body"),e.fake=!0),e}function m(e,t,r,o){var s,a,l,u,f="modernizr",c=i("div"),d=p();if(parseInt(r,10))for(;r--;)l=i("div"),l.id=o?o[r]:f+(r+1),c.appendChild(l);return s=i("style"),s.type="text/css",s.id="s"+f,(d.fake?d:c).appendChild(s),d.appendChild(c),s.styleSheet?s.styleSheet.cssText=e:s.appendChild(n.createTextNode(e)),c.id=f,d.fake&&(d.style.background="",d.style.overflow="hidden",u=_.style.overflow,_.style.overflow="hidden",_.appendChild(d)),a=t(c,e),d.fake?(d.parentNode.removeChild(d),_.style.overflow=u,_.offsetHeight):c.parentNode.removeChild(c),!!a}function v(n,r){var o=n.length;if("CSS"in e&&"supports"in e.CSS){for(;o--;)if(e.CSS.supports(c(n[o]),r))return!0;return!1}if("CSSSupportsRule"in e){for(var s=[];o--;)s.push("("+c(n[o])+":"+r+")");return s=s.join(" or "),m("@supports ("+s+") { #modernizr { position: absolute; } }",function(e){return"absolute"==d(e,null,"position")})}return t}function g(e,n,o,s){function a(){c&&(delete T.style,delete T.modElem)}if(s=r(s,"undefined")?!1:s,!r(o,"undefined")){var l=v(e,o);if(!r(l,"undefined"))return l}for(var c,d,p,m,g,y=["modernizr","tspan","samp"];!T.style&&y.length;)c=!0,T.modElem=i(y.shift()),T.style=T.modElem.style;for(p=e.length,d=0;p>d;d++)if(m=e[d],g=T.style[m],f(m,"-")&&(m=u(m)),T.style[m]!==t){if(s||r(o,"undefined"))return a(),"pfx"==n?m:!0;try{T.style[m]=o}catch(h){}if(T.style[m]!=g)return a(),"pfx"==n?m:!0}return a(),!1}function y(e,n,t,o,s){var i=e.charAt(0).toUpperCase()+e.slice(1),a=(e+" "+P.join(i+" ")+i).split(" ");return r(n,"string")||r(n,"undefined")?g(a,n,o,s):(a=(e+" "+N.join(i+" ")+i).split(" "),l(a,n,t))}function h(e,n,r){return y(e,t,t,n,r)}var C=[],w=[],S={_version:"3.6.0",_config:{classPrefix:"",enableClasses:!0,enableJSClass:!0,usePrefixes:!0},_q:[],on:function(e,n){var t=this;setTimeout(function(){n(t[e])},0)},addTest:function(e,n,t){w.push({name:e,fn:n,options:t})},addAsyncTest:function(e){w.push({name:null,fn:e})}},Modernizr=function(){};Modernizr.prototype=S,Modernizr=new Modernizr;var _=n.documentElement,b="svg"===_.nodeName.toLowerCase();Modernizr.addTest("webanimations","animate"in i("div"));var x={}.toString;Modernizr.addTest("smil",function(){return!!n.createElementNS&&/SVGAnimate/.test(x.call(n.createElementNS("http://www.w3.org/2000/svg","animate")))});var E="Moz O ms Webkit",N=S._config.usePrefixes?E.toLowerCase().split(" "):[];S._domPrefixes=N;var P=S._config.usePrefixes?E.split(" "):[];S._cssomPrefixes=P;var z={elem:i("modernizr")};Modernizr._q.push(function(){delete z.elem});var T={style:z.elem.style};Modernizr._q.unshift(function(){delete T.style}),S.testAllProps=y,S.testAllProps=h,Modernizr.addTest("cssanimations",h("animationName","a",!0)),o(),s(C),delete S.addTest,delete S.addAsyncTest;for(var j=0;j<Modernizr._q.length;j++)Modernizr._q[j]();e.Modernizr=Modernizr}(window,document);
