Underwater text effect.
A Pen by redesigned on CodePen.
<div class="bubbles"><div class="test" contenteditable> | |
Living Lakes | |
<p class="smaller">– with – <p/> | |
<p class="small">Editable Text</p> | |
<p class="ex-small">You can simply click here and type anything you like...</p> | |
</div></div> | |
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> | |
<defs> | |
<filter id="squiggly-0"> | |
<feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="0"/> | |
<feDisplacementMap id="displacement" in="SourceGraphic" in2="noise" scale="3" /> | |
</filter> | |
<filter id="squiggly-1"> | |
<feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="1"/> | |
<feDisplacementMap in="SourceGraphic" in2="noise" scale="4" /> | |
</filter> | |
<filter id="squiggly-2"> | |
<feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="2"/> | |
<feDisplacementMap in="SourceGraphic" in2="noise" scale="3" /> | |
</filter> | |
<filter id="squiggly-3"> | |
<feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="3"/> | |
<feDisplacementMap in="SourceGraphic" in2="noise" scale="4" /> | |
</filter> | |
<filter id="squiggly-4"> | |
<feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="4"/> | |
<feDisplacementMap in="SourceGraphic" in2="noise" scale="3" /> | |
</filter> | |
</defs> | |
</svg> | |
<svg class="fish" id="fish"> | |
<path | |
id="fish2" | |
d="m 172.04828,20.913839 c 0.0489,-0.444179 -0.2178,-0.896934 -1.01784,-1.415715 -0.72801,-0.475049 -1.4826,-0.932948 -2.2149,-1.401138 -1.6035,-1.028129 -3.29018,-1.969653 -4.89798,-3.079244 -4.67074,-3.24131 -10.22127,-4.404923 -15.76322,-5.1509392 -2.27235,-0.286401 -4.81223,-0.168925 -6.72186,-1.574351 -1.48174,-1.081294 -4.04993,-4.828523 -6.86506,-6.456038 -0.4862,-0.290688 -2.77227,-1.44486897 -2.77227,-1.44486897 0,0 1.30939,3.55000597 1.60951,4.26429497 0.69542,1.644664 -0.38158,3.063809 -0.83262,4.642447 -0.29069,1.0418502 2.13772,0.8129002 2.26463,1.7827212 0.18179,1.432007 -4.15197,1.936211 -6.59152,2.417263 -3.65634,0.715146 -7.91635,2.082841 -11.56925,0.884071 -4.3046,-1.38313 -7.37269,-4.129669 -10.46566,-7.2354952 1.43801,6.7252892 5.4382,10.6028562 5.6157,11.4226162 0.18607,0.905509 -0.45961,1.091584 -1.04099,1.682394 -1.28967,1.265655 -6.91566,7.731125 -6.93366,9.781383 1.61379,-0.247815 3.56115,-1.660957 4.9803,-2.485862 1.58035,-0.905509 7.60593,-5.373029 9.29347,-6.065023 0.38587,-0.160351 5.0549,-1.531476 5.09434,-0.932949 0.0695,0.932949 -0.30784,1.137031 -0.18436,1.527189 0.22638,0.746016 1.44144,1.465449 2.02282,1.985088 1.50918,1.292237 3.21044,2.42841 4.27373,4.156252 1.49203,2.401827 1.55805,4.999163 1.98251,7.677102 0.99469,-0.111473 2.0091,-2.17545 2.55961,-2.992638 0.51278,-0.772598 2.38639,-4.07136 3.09725,-4.275442 0.67227,-0.204082 2.75511,0.958673 3.50284,1.180763 2.85973,0.848057 5.644,1.353976 8.56032,1.353976 3.50799,0.0094 12.726,0.258104 19.55505,-4.800226 0.75545,-0.567658 2.55703,-2.731104 2.55703,-2.731104 0,0 -0.37644,-0.577091 -1.04785,-0.790605 0.89779,-0.584808 1.8659,-1.211633 1.94993,-1.925922 z" | |
style="fill:#000000;fill-opacity:1" | |
inkscape:connector-curvature="0" | |
sodipodi:nodetypes="cccccccccccccccccccccccccccccccc" /> | |
<path | |
sodipodi:nodetypes="cccccccccccccccccccccccccccccccc" | |
inkscape:connector-curvature="0" | |
style="fill:#000000;fill-opacity:1" | |
d="m 234.99441,42.953992 c 0.0489,-0.44418 -0.2178,-0.896934 -1.01784,-1.415715 -0.72801,-0.47505 -1.4826,-0.932949 -2.2149,-1.401138 -1.6035,-1.02813 -3.29018,-1.969653 -4.89798,-3.079245 -4.67074,-3.24131 -10.22127,-4.404923 -15.76322,-5.150939 -2.27235,-0.286401 -4.81223,-0.168925 -6.72186,-1.574351 -1.48174,-1.081294 -4.04993,-4.828523 -6.86506,-6.456038 -0.4862,-0.290688 -2.77227,-1.444869 -2.77227,-1.444869 0,0 1.30939,3.550006 1.60951,4.264295 0.69542,1.644664 -0.38158,3.063809 -0.83262,4.642447 -0.29069,1.04185 2.13772,0.8129 2.26463,1.782721 0.18179,1.432007 -4.15197,1.936211 -6.59152,2.417263 -3.65634,0.715146 -7.91635,2.082842 -11.56925,0.884072 -4.3046,-1.383131 -7.37269,-4.12967 -10.46566,-7.235496 1.43801,6.725289 5.4382,10.602857 5.6157,11.422617 0.18607,0.905508 -0.45961,1.091583 -1.04099,1.682394 -1.28967,1.265654 -6.91566,7.731125 -6.93366,9.781382 1.61379,-0.247815 3.56115,-1.660957 4.9803,-2.485862 1.58035,-0.905509 7.60593,-5.373029 9.29347,-6.065023 0.38587,-0.160351 5.0549,-1.531476 5.09434,-0.932948 0.0695,0.932948 -0.30784,1.137031 -0.18436,1.527188 0.22638,0.746016 1.44144,1.46545 2.02282,1.985088 1.50918,1.292237 3.21044,2.42841 4.27373,4.156252 1.49203,2.401827 1.55805,4.999163 1.98251,7.677102 0.99469,-0.111473 2.0091,-2.17545 2.55961,-2.992638 0.51278,-0.772598 2.38639,-4.071359 3.09725,-4.275442 0.67227,-0.204082 2.75511,0.958673 3.50284,1.180763 2.85973,0.848057 5.644,1.353976 8.56032,1.353976 3.50799,0.0094 12.726,0.258104 19.55505,-4.800226 0.75545,-0.567658 2.55703,-2.731104 2.55703,-2.731104 0,0 -0.37644,-0.57709 -1.04785,-0.790605 0.89779,-0.584808 1.8659,-1.211633 1.94993,-1.925921 z" | |
id="fish3" /> | |
<path | |
id="fish6" | |
d="m 200.07076,80.737109 c 0.0489,-0.44418 -0.2178,-0.896934 -1.01784,-1.415715 -0.72801,-0.47505 -1.4826,-0.932949 -2.2149,-1.401138 -1.6035,-1.02813 -3.29018,-1.969653 -4.89798,-3.079245 -4.67074,-3.24131 -10.22127,-4.404923 -15.76322,-5.150939 -2.27235,-0.286401 -4.81223,-0.168925 -6.72186,-1.574351 -1.48174,-1.081294 -4.04993,-4.828523 -6.86506,-6.456038 -0.4862,-0.290688 -2.77227,-1.444869 -2.77227,-1.444869 0,0 1.30939,3.550006 1.60951,4.264295 0.69542,1.644664 -0.38158,3.063809 -0.83262,4.642447 -0.29069,1.04185 2.13772,0.8129 2.26463,1.782721 0.18179,1.432007 -4.15197,1.936211 -6.59152,2.417263 -3.65634,0.715146 -7.91635,2.082842 -11.56925,0.884072 -4.3046,-1.383131 -7.37269,-4.12967 -10.46566,-7.235496 1.43801,6.725289 5.4382,10.602857 5.6157,11.422617 0.18607,0.905508 -0.45961,1.091583 -1.04099,1.682394 -1.28967,1.265654 -6.91566,7.731125 -6.93366,9.781382 1.61379,-0.247815 3.56115,-1.660957 4.9803,-2.485862 1.58035,-0.905509 7.60593,-5.373029 9.29347,-6.065023 0.38587,-0.160351 5.0549,-1.531476 5.09434,-0.932948 0.0695,0.932948 -0.30784,1.137031 -0.18436,1.527188 0.22638,0.746016 1.44144,1.46545 2.02282,1.985088 1.50918,1.292237 3.21044,2.42841 4.27373,4.156252 1.49203,2.401827 1.55805,4.999163 1.98251,7.677102 0.99469,-0.111473 2.0091,-2.17545 2.55961,-2.992638 0.51278,-0.772598 2.38639,-4.071359 3.09725,-4.275442 0.67227,-0.204082 2.75511,0.958673 3.50284,1.180763 2.85973,0.848057 5.644,1.353976 8.56032,1.353976 3.50799,0.0094 12.726,0.258104 19.55505,-4.800226 0.75545,-0.567658 2.55703,-2.731104 2.55703,-2.731104 0,0 -0.37644,-0.57709 -1.04785,-0.790605 0.89779,-0.584808 1.8659,-1.211633 1.94993,-1.925921 z" | |
style="fill:#000000;fill-opacity:1" | |
inkscape:connector-curvature="0" | |
sodipodi:nodetypes="cccccccccccccccccccccccccccccccc" /> | |
<path | |
sodipodi:nodetypes="cccccccccccccccccccccccccccccccc" | |
inkscape:connector-curvature="0" | |
style="fill:#000000;fill-opacity:1" | |
d="m 77.275623,89.018799 c 0.0489,-0.44418 -0.2178,-0.896934 -1.01784,-1.415715 -0.72801,-0.47505 -1.4826,-0.932949 -2.2149,-1.401138 -1.6035,-1.02813 -3.29018,-1.969653 -4.89798,-3.079245 -4.67074,-3.24131 -10.22127,-4.404923 -15.76322,-5.150939 -2.272347,-0.286401 -4.812227,-0.168925 -6.721857,-1.574351 -1.48174,-1.081294 -4.04993,-4.828523 -6.86506,-6.456038 -0.4862,-0.290688 -2.77227,-1.444869 -2.77227,-1.444869 0,0 1.30939,3.550006 1.60951,4.264295 0.69542,1.644664 -0.38158,3.063809 -0.83262,4.642447 -0.29069,1.04185 2.13772,0.8129 2.26463,1.782721 0.18179,1.432007 -4.15197,1.936211 -6.59152,2.417263 -3.65634,0.715146 -7.91635,2.082842 -11.56925,0.884072 -4.3046,-1.383131 -7.37269,-4.12967 -10.46566,-7.235496 1.43801,6.725289 5.4382,10.602857 5.6157,11.422617 0.18607,0.905508 -0.45961,1.091583 -1.04099,1.682394 -1.28967,1.265654 -6.9156603,7.731122 -6.9336603,9.781382 1.6137903,-0.24782 3.5611503,-1.66096 4.9803003,-2.48586 1.58035,-0.90551 7.60593,-5.37303 9.29347,-6.065025 0.38587,-0.160351 5.0549,-1.531476 5.09434,-0.932948 0.0695,0.932948 -0.30784,1.137031 -0.18436,1.527183 0.22638,0.74602 1.44144,1.46546 2.02282,1.98509 1.50918,1.29224 3.21044,2.42841 4.27373,4.15625 1.49203,2.40183 1.55805,4.999171 1.98251,7.677111 0.99469,-0.11148 2.0091,-2.17545 2.55961,-2.99264 0.51278,-0.7726 2.38639,-4.071361 3.09725,-4.275441 0.67227,-0.20408 2.75511,0.95867 3.50284,1.18076 2.85973,0.84806 5.644,1.35398 8.560317,1.35398 3.50799,0.009 12.726,0.2581 19.55505,-4.80023 0.75545,-0.56766 2.55703,-2.7311 2.55703,-2.7311 0,0 -0.37644,-0.57709 -1.04785,-0.79061 0.89779,-0.58481 1.8659,-1.211632 1.94993,-1.92592 z" | |
id="fish4" /> | |
<path | |
id="fish5" | |
d="m 127.65312,60.900973 c 0.0489,-0.44418 -0.2178,-0.896934 -1.01784,-1.415715 -0.72801,-0.47505 -1.4826,-0.932949 -2.2149,-1.401138 -1.6035,-1.02813 -3.29018,-1.969653 -4.89799,-3.079245 -4.67074,-3.24131 -10.22127,-4.404923 -15.76322,-5.150939 -2.27235,-0.286401 -4.812228,-0.168925 -6.721858,-1.574351 -1.48174,-1.081294 -4.04993,-4.828523 -6.86506,-6.456038 -0.4862,-0.290688 -2.77227,-1.444869 -2.77227,-1.444869 0,0 1.30939,3.550006 1.60951,4.264295 0.69542,1.644664 -0.38158,3.063809 -0.83262,4.642447 -0.29069,1.04185 2.13772,0.8129 2.26463,1.782721 0.18179,1.432007 -4.15197,1.936211 -6.59152,2.417263 -3.65634,0.715146 -7.91635,2.082842 -11.56925,0.884072 -4.3046,-1.383131 -7.37269,-4.12967 -10.46566,-7.235496 1.43801,6.725289 5.4382,10.602857 5.6157,11.422617 0.18607,0.905508 -0.45961,1.091583 -1.04099,1.682394 -1.28967,1.265654 -6.91566,7.731125 -6.93366,9.781382 1.61379,-0.247815 3.56115,-1.660957 4.9803,-2.485862 1.58035,-0.905509 7.60593,-5.373029 9.29347,-6.065023 0.38587,-0.160351 5.0549,-1.531476 5.09434,-0.932948 0.0695,0.932948 -0.30784,1.137031 -0.18436,1.527188 0.22638,0.746016 1.44144,1.46545 2.02282,1.985088 1.50918,1.292237 3.21044,2.42841 4.27373,4.156252 1.49203,2.401827 1.55805,4.999163 1.98251,7.677102 0.99469,-0.111473 2.0091,-2.17545 2.55961,-2.992638 0.51278,-0.772598 2.38639,-4.071359 3.09725,-4.275442 0.67227,-0.204082 2.75511,0.958673 3.50284,1.180763 2.85973,0.848057 5.643998,1.353976 8.560318,1.353976 3.50799,0.0094 12.726,0.258104 19.55506,-4.800226 0.75545,-0.567658 2.55703,-2.731104 2.55703,-2.731104 0,0 -0.37644,-0.57709 -1.04785,-0.790605 0.89779,-0.584808 1.8659,-1.211633 1.94993,-1.925921 z" | |
style="fill:#000000;fill-opacity:1" | |
inkscape:connector-curvature="0" | |
sodipodi:nodetypes="cccccccccccccccccccccccccccccccc" /> | |
<path style="fill:#000000;fill-opacity:1" | |
d="m 68.19699,20.522295 c 0.0489,-0.44418 -0.2178,-0.896934 -1.01784,-1.415715 -0.72801,-0.47505 -1.4826,-0.932949 -2.2149,-1.401138 -1.6035,-1.02813 -3.29018,-1.969653 -4.89798,-3.079245 C 55.39553,11.384887 49.845,10.221274 44.30305,9.4752582 42.0307,9.1888572 39.49082,9.3063332 37.58119,7.900907 36.09945,6.819613 33.53126,3.072384 30.71613,1.444869 30.22993,1.154181 27.94386,0 27.94386,0 c 0,0 1.30939,3.550006 1.60951,4.264295 0.69542,1.644664 -0.38158,3.063809 -0.83262,4.642447 -0.29069,1.0418502 2.13772,0.8129002 2.26463,1.782721 0.18179,1.432007 -4.15197,1.936211 -6.59152,2.417263 -3.65634,0.715146 -7.91635,2.082842 -11.56925,0.884072 C 8.52001,12.607667 5.45192,9.8611282 2.35895,6.755302 3.79696,13.480591 7.79715,17.358159 7.97465,18.177919 8.16072,19.083427 7.51504,19.269502 6.93366,19.860313 5.64399,21.125967 0.018,27.591438 0,29.641695 1.61379,29.39388 3.56115,27.980738 4.9803,27.155833 c 1.58035,-0.905509 7.60593,-5.373029 9.29347,-6.065023 0.38587,-0.160351 5.0549,-1.531476 5.09434,-0.932948 0.0695,0.932948 -0.30784,1.137031 -0.18436,1.527188 0.22638,0.746016 1.44144,1.46545 2.02282,1.985088 1.50918,1.292237 3.21044,2.42841 4.27373,4.156252 1.49203,2.401827 1.55805,4.999163 1.98251,7.677102 0.99469,-0.111473 2.0091,-2.17545 2.55961,-2.992638 0.51278,-0.772598 2.38639,-4.071359 3.09725,-4.275442 0.67227,-0.204082 2.75511,0.958673 3.50284,1.180763 2.85973,0.848057 5.644,1.353976 8.56032,1.353976 3.50799,0.0094 12.726,0.258104 19.55505,-4.800226 0.75545,-0.567658 2.55703,-2.731104 2.55703,-2.731104 0,0 -0.37644,-0.57709 -1.04785,-0.790605 0.89779,-0.584808 1.8659,-1.211633 1.94993,-1.925921 z" | |
id="fish1" /> | |
</svg> | |
<audio noautoplay loop volume="0.5"> | |
<source src="https://freesound.org/people/monica137142/sounds/211389/download/211389__monica137142__underwater.mp3" type="audio/mpeg"> | |
</audio> | |
<audio noautoplay loop volume="0.2"> | |
<source src="https://freesound.org/people/Kinoton/sounds/393819/download/393819__kinoton__underwater-ambience.wav" type="audio/mpeg"> | |
</audio> |
jQuery(document).ready(function($){ | |
var bArray = []; | |
// Define a size array, this will be used to vary bubble sizes | |
var sArray = [5,10,18,25]; | |
for (var i = 0; i < $('.bubbles').width(); i++) { | |
bArray.push(i); | |
} | |
function randomValue(arr) { | |
return arr[Math.floor(Math.random() * arr.length)]; | |
} | |
// setInterval function used to create new bubble every 350 milliseconds | |
setInterval(function(){ | |
var size = randomValue(sArray); | |
$('.bubbles').append('<div class="individual-bubble" style="left: ' + randomValue(bArray) + 'px; width: ' + size + 'px; height:' + size + 'px;"></div>'); | |
$('.individual-bubble').animate({ | |
'bottom': '100%', | |
'opacity' : '-=0.6' | |
}, 8000, function(){ | |
$(this).remove() | |
} | |
); | |
}, 300); | |
}); |
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
* { | |
-webkit-font-smoothing: antialiased; | |
-moz-osx-font-smoothing: grayscale; | |
} | |
html { | |
display: block; | |
background: #FFF; | |
background-size: cover; | |
} | |
body { | |
font-family: "Arial Black", sans-serif; | |
font-size: 100px; | |
display: block; | |
position: relative; | |
overflow-x: hidden; | |
overflow-y: hidden; | |
} | |
.test { | |
-webkit-animation: squiggly-anim 1.64s linear infinite; | |
animation: squiggly-anim 1.64s linear infinite; | |
} | |
body { | |
line-height: 100vh; | |
background: rgba(0, 0, 0, 0.6); | |
color: #fff; | |
} | |
.test { | |
display: inline-block; | |
vertical-align: middle; | |
width: 100%; | |
outline: none; | |
text-align: center; | |
line-height: 1; | |
background: transparent | |
url("https://redesigned.com/misc/movingwater_01.gif") bottom center | |
no-repeat; | |
background-size: cover; | |
-webkit-background-clip: text; | |
color: transparent; | |
} | |
.small { | |
font-size: 0.5em; | |
} | |
.smaller { | |
font-size: 0.2em; | |
padding: 20px; | |
} | |
.ex-small { | |
font-size: 16px; | |
margin-top: 45px; | |
} | |
p { | |
margin: 0; | |
} | |
@-webkit-keyframes squiggly-anim { | |
0% { | |
-webkit-filter: url("#squiggly-0"); | |
filter: url("#squiggly-0"); | |
} | |
25% { | |
-webkit-filter: url("#squiggly-1"); | |
filter: url("#squiggly-1"); | |
} | |
50% { | |
-webkit-filter: url("#squiggly-2"); | |
filter: url("#squiggly-2"); | |
} | |
75% { | |
-webkit-filter: url("#squiggly-3"); | |
filter: url("#squiggly-3"); | |
} | |
100% { | |
-webkit-filter: url("#squiggly-4"); | |
filter: url("#squiggly-4"); | |
} | |
} | |
@keyframes squiggly-anim { | |
0% { | |
-webkit-filter: url("#squiggly-0"); | |
filter: url("#squiggly-0"); | |
} | |
25% { | |
-webkit-filter: url("#squiggly-1"); | |
filter: url("#squiggly-1"); | |
} | |
50% { | |
-webkit-filter: url("#squiggly-2"); | |
filter: url("#squiggly-2"); | |
} | |
75% { | |
-webkit-filter: url("#squiggly-3"); | |
filter: url("#squiggly-3"); | |
} | |
100% { | |
-webkit-filter: url("#squiggly-4"); | |
filter: url("#squiggly-4"); | |
} | |
} | |
.bubbles { | |
display: block; | |
position: relative; | |
} | |
.bubbles h1 { | |
position: relative; | |
z-index: 2; | |
} | |
.individual-bubble { | |
position: absolute; | |
border-radius: 100%; | |
bottom: 10px; | |
background: radial-gradient( | |
rgba(162, 250, 245, 0.1), | |
rgba(255, 255, 255, 0.2) | |
); | |
z-index: 1; | |
box-shadow: -1px 0px rgba(255, 255, 255, 0.2), | |
0px -1px rgba(255, 255, 255, 0.1), 1px 0px rgba(3, 205, 190, 0.3), | |
0px 1px rgba(3, 205, 190, 0.3); | |
opacity: 0.4; | |
} | |
* { | |
-webkit-font-smoothing: antialiased; | |
-moz-osx-font-smoothing: grayscale; | |
} | |
html { | |
display: block; | |
background: #000 url("https://redesigned.com/misc/movingwater_02.gif") | |
top center no-repeat; | |
background-size: cover; | |
} | |
body { | |
font-family: "Arial Black", sans-serif; | |
font-size: 100px; | |
display: block; | |
position: relative; | |
} | |
svg#fish { | |
top: 20%; | |
opacity: 0.2; | |
} | |
/* Fish Animation */ | |
svg.fish { | |
overflow: visible; | |
transition: all 800ms easeInBack; | |
transition: rotate 100ms easeOut; | |
} | |
@-webkit-keyframes swim { | |
0% { | |
margin-left: -235px; | |
} | |
90% { | |
margin-left: 100%; | |
} | |
100% { | |
margin-left: 100%; | |
} | |
} | |
@keyframes swim { | |
0% { | |
margin-left: -435px; | |
transform: translateX(-10rem) scale(1.5); | |
} | |
30% { | |
margin-left: 0px; | |
transform: translateX(45rem) scale(0.5); | |
} | |
100% { | |
transform: translateX(110rem) scale(1.5); | |
} | |
} | |
.fish { | |
width: 235px; | |
height: 104px; | |
position: absolute; | |
animation: swim 20s; | |
-webkit-animation: swim 20s; | |
animation-iteration-count: infinite; | |
-webkit-animation-iteration-count: infinite; | |
animation-timing-function: linear; | |
-webkit-animation-timing-function: linear; | |
} | |
svg #fish1, | |
svg #fish2, | |
svg #fish3, | |
svg #fish4, | |
svg #fish5, | |
svg #fish6 { | |
fill: #528484; | |
-moz-animation: bounce 5s infinite; | |
-webkit-animation: bounce 5s infinite; | |
animation: bounce 5s infinite; | |
} | |
svg #fish2 { | |
animation-delay: 0.5s; | |
-webkit-animation-delay: 0.5s; | |
} | |
svg #fish3 { | |
animation-delay: 0.2s; | |
-webkit-animation-delay: 0.2s; | |
} | |
svg #fish4 { | |
animation-delay: 0.8s; | |
-webkit-animation-delay: 0.8s; | |
} | |
svg #fish5 { | |
animation-delay: 0.1s; | |
-webkit-animation-delay: 0.1s; | |
} | |
svg #fish6 { | |
animation-delay: 1.3s; | |
-webkit-animation-delay: 1.3s; | |
} | |
/**/ | |
@-moz-keyframes bounce { | |
0%, | |
50%, | |
100% { | |
-moz-transform: translateY(0); | |
transform: translateY(0); | |
} | |
25% { | |
-moz-transform: translateY(-5px); | |
transform: translateY(-5px); | |
} | |
75% { | |
-moz-transform: translateY(-3px); | |
transform: translateY(-3px); | |
} | |
} | |
@-webkit-keyframes bounce { | |
0%, | |
50%, | |
100% { | |
-webkit-transform: translateY(0); | |
transform: translateY(0); | |
} | |
25% { | |
-webkit-transform: translateY(-5px); | |
transform: translateY(-5px); | |
} | |
75% { | |
-webkit-transform: translateY(-3px); | |
transform: translateY(-3px); | |
} | |
} | |
@keyframes bounce { | |
0%, | |
50%, | |
100% { | |
} | |
0% { | |
transform: rotate(2deg) translateY(0); | |
} | |
15% { | |
-moz-transform: translateY(-8px); | |
-ms-transform: translateY(-8px); | |
-webkit-transform: translateY(-8px); | |
transform: translateY(-3px) scale(0.95) rotate(5deg); | |
} | |
25% { | |
-moz-transform: translateY(-8px); | |
-ms-transform: translateY(-8px); | |
-webkit-transform: translateY(-8px); | |
transform: translateY(-6px) scale(0.9) rotate(10deg); | |
} | |
55% { | |
-moz-transform: translateY(4px); | |
-ms-transform: translateY(4px); | |
-webkit-transform: translateY(4px); | |
transform: translateY(4px) scale(1.1) rotate(-10deg); | |
} | |
85% { | |
transform: rotate(0deg) scale(1) translateY(0px); | |
} | |
} | |
/*END Fish Animation*/ |
Underwater text effect.
A Pen by redesigned on CodePen.