Transitions Animations SVG Style01

<!DOCTYPE html>
<html>
<head>
  <title>Transitions & Animations Combiné avec des SVG | par NGLESSON </title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="author" content="Mezgani said">
  <meta name="copyright" content="NGLESSON">
  <link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
  <div class="arrow arrow--top">
    <svg xmlns="http://www.w3.org/2000/svg" width="270.11" height="649.9" overflow="visible">
      <style>
        .geo-arrow {
          fill: none;
          stroke: #fff;
          stroke-width: 2;
          stroke-miterlimit: 10
        }
      </style>
      <g class="item-to bounce-1">
        <path class="geo-arrow draw-in" d="M135.06 142.564L267.995 275.5 135.06 408.434 2.125 275.499z" />
      </g>
      <circle class="geo-arrow item-to bounce-2" cx="194.65" cy="69.54" r="7.96" />
      <circle class="geo-arrow draw-in" cx="194.65" cy="39.5" r="7.96" />
      <circle class="geo-arrow item-to bounce-3" cx="194.65" cy="9.46" r="7.96" />
      <g class="geo-arrow item-to bounce-2">
        <path class="st0 draw-in" d="M181.21 619.5l13.27 27 13.27-27zM194.48 644.5v-552" />
      </g>
    </svg>
  </div>
  <div class="arrow arrow--bottom">
    <svg xmlns="http://www.w3.org/2000/svg" width="31.35" height="649.9" overflow="visible">
      <style>
        .geo-arrow {
          fill: none;
          stroke: #fff;
          stroke-width: 2;
          stroke-miterlimit: 10
        }
      </style>
      <g class="item-to bounce-1">
        <circle class="geo-arrow item-to bounce-3" cx="15.5" cy="580.36" r="7.96" />
        <circle class="geo-arrow draw-in" cx="15.5" cy="610.4" r="7.96" />
        <circle class="geo-arrow item-to bounce-2" cx="15.5" cy="640.44" r="7.96" />
        <g class="item-to bounce-2">
          <path class="geo-arrow draw-in" d="M28.94 30.4l-13.26-27-13.27 27zM15.68 5.4v552" />
        </g>
      </g>
    </svg>
  </div>
  <div class="main">
    <div class="main__text-wrapper">
    <h1 class="main__title">Transitions & Animations</h1>
    <h2>Combiné avec des SVG</h2>      
      <svg xmlns="http://www.w3.org/2000/svg" class="dotted-circle" width="352" height="352" overflow="visible">
        <circle cx="176" cy="176" r="174" fill="none" stroke="#fff" stroke-width="2" stroke-miterlimit="10" stroke-dasharray="12.921,11.9271"/>
      </svg>
    </div>
  </div>
</body>
</html>
 body {
	 background: linear-gradient(#3800e7, #8a15ff);
	 height: 100vh;
	 font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
	 font-family: "DM Mono", monospace;
	 font-weight: 300;
	 overflow: hidden;
	 color: white;
	 text-align: center;
}
 h1 {
	 font-size: 3em;
	 margin-bottom: 0.2em;
}
 h2 {
	 font-size: 2em;
}
 .main {
	 height: 100vh;
	 display: flex;
	 flex-direction: column;
	 flex-wrap: wrap;
	 position: relative;
	 justify-content: center;
	 align-items: center;
}
 .main:before, .main:after {
	 content: "";
	 display: block;
	 position: absolute;
	 z-index: -3;
}
 .main:before {
	 right: 0;
	 bottom: -19;
	 height: 30em;
	 width: 30em;
	 border-radius: 30em;
	 background: linear-gradient(#3800e7, #8a15ff);
	 align-self: flex-end;
	 animation: gradient-fade 8s ease-in-out 3s infinite alternate;
}
 .main:after {
	 top: 0;
	 left: 30;
	 height: 10em;
	 width: 10em;
	 border-radius: 10em;
	 background: linear-gradient(#3800e7, #8a15ff);
	 animation: gradient-fade-alt 6s ease-in-out 3s infinite alternate;
}
 .main__text-wrapper {
	 position: relative;
	 padding: 2em;
}
 .main__text-wrapper:before, .main__text-wrapper:after {
	 content: "";
	 display: block;
	 position: absolute;
}
 .main__text-wrapper:before {
	 z-index: -1;
	 top: -3em;
	 right: -3em;
	 width: 13em;
	 height: 13em;
	 opacity: 0.7;
	 border-radius: 13em;
	 background: linear-gradient(#15e0ff, #8a15ff);
	 animation: rotation 7s linear infinite;
}
 .main__text-wrapper:after {
	 z-index: -1;
	 bottom: -20em;
	 width: 20em;
	 height: 20em;
	 border-radius: 20em;
	 background: linear-gradient(#d000c5, #8a15ff);
	 animation: rotation 7s linear infinite;
}
 .arrow {
	 z-index: 1000;
	 opacity: 0.5;
	 position: absolute;
}
 .arrow--top {
	 top: 0;
	 left: -5em;
}
 .arrow--bottom {
	 bottom: 0;
	 right: 3em;
}
 .circle {
	 transform: translate(50%, -50%) rotate(0deg);
	 transform-origin: center;
}
 .circle--ltblue {
	 height: 20em;
	 width: 20em;
	 border-radius: 20em;
	 background: linear-gradient(#15e0ff, #3800e7);
}
 .backdrop {
	 position: absolute;
	 width: 100vw;
	 height: 100vh;
	 display: block;
	 background-color: pink;
}
 .dotted-circle {
	 position: absolute;
	 top: 0;
	 right: 0;
	 opacity: 0.3;
	 animation: rotation 38s linear infinite;
}
 .draw-in {
	 stroke-dasharray: 1000;
	 stroke-dashoffset: 1000;
	 animation: draw 15s ease-in-out alternate infinite;
}
 @keyframes draw {
	 from {
		 stroke-dashoffset: 1000;
	}
	 to {
		 stroke-dashoffset: 0;
	}
}
 .item-to {
	 animation-duration: 10s;
	 animation-iteration-count: infinite;
	 transform-origin: bottom;
}
 .bounce-1 {
	 animation-name: bounce-1;
	 animation-timing-function: ease;
}
 .bounce-2 {
	 animation-name: bounce-2;
	 animation-timing-function: ease;
}
 .bounce-3 {
	 animation-name: bounce-3;
	 animation-timing-function: ease;
}
 @keyframes bounce-1 {
	 0% {
		 transform: translateY(0);
	}
	 50% {
		 transform: translateY(50px);
	}
	 100% {
		 transform: translateY(0);
	}
}
 @keyframes bounce-2 {
	 0% {
		 transform: translateY(0);
	}
	 50% {
		 transform: translateY(-30px);
	}
	 100% {
		 transform: translateY(0);
	}
}
 @keyframes bounce-3 {
	 0% {
		 transform: translateY(0);
	}
	 50% {
		 transform: translateY(30px);
	}
	 100% {
		 transform: translateY(0);
	}
}
 @keyframes rotation {
	 from {
		 transform: rotate(0deg);
	}
	 to {
		 transform: rotate(360deg);
	}
}
 @keyframes gradient-fade {
	 from {
		 transform: translate(10%, -10%) rotate(0deg);
	}
	 to {
		 transform: translate(50%, -50%) rotate(360deg);
	}
}
 @keyframes gradient-fade-alt {
	 from {
		 transform: translate(-20%, 20%) rotate(0deg);
	}
	 to {
		 transform: translate(-60%, 60%) rotate(360deg);
	}
}
 

                                    
Animation 3d social icones avec css3

Animation 3d social icones avec css3

Asidebar Menu Style01

Asidebar Menu Style01

Bootstrap modal avec un formulaire newsletter

Bootstrap modal avec un formulaire newsletter

Cards box with title

Cards box with title

Changer le style du scroll bar in html

Changer le style du scroll bar in html

ChartJS style01

ChartJS style01

Header Aside Footer Admin

Header Aside Footer Admin

Header with background animate 01

Header with background animate 01

Image hover 03

Image hover 03

Table bootstrap with Datatable

Table bootstrap with Datatable

Timeline style03

Timeline style03

Triangle Background css 01

Triangle Background css 01