Advertisement
ikai2

Wavy animation HTML/CSS

May 30th, 2023
348
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 2.05 KB | None | 0 0
  1. <div style="background-color: transparent;  margin-top: 5px; fill: #FFE9F9;">
  2.     <div class="wavy-svg-wrap">
  3.       <div class="wavy-svg-container">
  4.        
  5. <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1332 90" preserveAspectRatio="none" class="animated"><defs></defs><path class="cls-11" d="M1165.5,27.76c-91.14,31.56-186.69,51.59-283,34.91C813.85,50.79,748.33,24.26,678,22a499.49,499.49,0,0,0-149.3,17.59c-49.87,13.84-96.84,28.6-149.13,29.05-51.79.46-103.28-8.57-153.1-22.19-20.21-5.53-40.2-11.84-60-18.69A509.62,509.62,0,0,0,0,0V90H1332V0A509.62,509.62,0,0,0,1165.5,27.76Z"></path></svg>
  6.  
  7.  
  8. <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1332 90" preserveAspectRatio="none" class="animated"><defs></defs><path class="cls-11" d="M1165.5,27.76c-91.14,31.56-186.69,51.59-283,34.91C813.85,50.79,748.33,24.26,678,22a499.49,499.49,0,0,0-149.3,17.59c-49.87,13.84-96.84,28.6-149.13,29.05-51.79.46-103.28-8.57-153.1-22.19-20.21-5.53-40.2-11.84-60-18.69A509.62,509.62,0,0,0,0,0V90H1332V0A509.62,509.62,0,0,0,1165.5,27.76Z"></path></svg>
  9.  
  10.  
  11.       </div>
  12.     </div>
  13. </div>
  14.  
  15. <style>
  16.   @keyframes mymove {
  17.     0% {
  18.     transform: translateX(0);
  19. }
  20. 100% {
  21.     transform: translateX(-100%);
  22. }
  23.   }
  24.   .wavy-svg-wrap {
  25.     position: relative;
  26.     z-index: 0;
  27.     margin-bottom: -3px;
  28.     width: 100%;
  29.     height: 100px;
  30.     overflow: hidden;
  31. }
  32.   .wavy-svg-container {
  33.     display: flex;
  34.     position: absolute;
  35.     bottom: 0;
  36.     transform: scaleY(1);
  37.     transition: transform 1s ease;
  38.     z-index: 3;
  39.     transform-origin: 50% 100%;
  40. }
  41. .wavy-svg-container .animated {
  42.     animation: mymove 5s infinite;
  43.     animation-duration: 10s;
  44.     animation-timing-function: cubic-bezier(0.22, 0.33, 0.86, 0.76);
  45. }
  46. .wavy-svg-container svg {
  47.     transition: fill 300ms;
  48.     transition-property: fill;
  49.     transition-duration: 300ms;
  50.     transition-timing-function: ease;
  51.     transition-delay: 0s;
  52.     margin-left: -1px;
  53.     width: 300vw;
  54.     height: 100px;
  55.     vertical-align: middle;
  56. }
  57.  
  58. </style>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement