Happy Circles

Memasang Kode Happy Circles 
Login ke akun blog klik tombol blog baru, buat satubuah link baru   
kemudian beri nama sesuai fungsi,  klik Edit HTML pada link baru tersebut, 
hapus semua kode template ganti dengan kode blank template, yang tersedia pada sumber  berikut :  Get Blank Template.   edit background warna sesuai keinginan klik simpan selesai.

Kemudian klik entri halaman baru HTML pada link tersebut.
copy kode dibawah ini, pastekan kedalam halaman baru tersebut dan klik simpan selesai

<style class="Mys2010-styles">
body {);color:red;height:100%;overflow:hidden;}
body {
  margin: 0;
  width: 100vw;
  height: 100vh;
  background: radial-gradient(circle at 50% 50%, #B20000 0%, #333 100%);
}
header {
  -o-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  padding:  0px 0;
  position: fixed;
  top:-8px;
  width: 100%;
text-align: center;
font-size:  6px;
background: -moz-linear-gradient(top, #B20000 0%, rgba(53,02,01,1) 100%);
  border-bottom: 3px solid #dad;  
}
.ap {
position: fixed;
right: 0;
bottom:-12px;
left: 0;
height: 70px;
margin: auto;
font-family: Arial, sans-serif;
font-size: 10px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-align: center;
font-size:  11px;
background:  #111;
border-top: 2px solid #f0f;
z-index: 9999;
} 
h2 {
padding:15px; 
background: -webkit-linear-gradient(transparent 10%, goldenrod 50%, transparent 90%); 
background: linear-gradient(transparent 10%, #B20000 50%, transparent 90%); 
} 
#M-2010, #teks, #posisi, #dibawah  {
    position: absolute;
    font-size: 11px;
    margin: 2px
}
#M-2010, #teks div {
    text-decoration: underline;
    cursor: pointer
}
#teks, #posisi {
    text-align: right;
    right:  50px;
}
#teks, #dibawah {
    text-align: left;
    left:  50px;
}
 #dibawah, #posisi {
    bottom:24px;
} 

#Mys2010 a:hover { background-color: transparent;opacity:0.7; } #Mys2010 img { -moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; } #Mys2010 img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); }
body::before {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
   background: #24006B;
  -webkit-animation: overlay infinite 12s;
          animation: overlay infinite 12s;
  content: '';
}
@-webkit-keyframes transform {
  0%, 16% {
    opacity: 0;
    -webkit-transform: translateY(-50%) rotateX(-90deg);
            transform: translateY(-50%) rotateX(-90deg);
  }
  18% {
    opacity: 1;
  }
  40% {
    opacity: 1;
    -webkit-transform: translateY(-50%) rotateX(0deg);
            transform: translateY(-50%) rotateX(0deg);
  }
}
@keyframes transform {
  0%, 16% {
    opacity: 0;
    -webkit-transform: translateY(-50%) rotateX(-90deg);
            transform: translateY(-50%) rotateX(-90deg);
  }
  18% {
    opacity: 1;
  }
  40% {
    opacity: 1;
    -webkit-transform: translateY(-50%) rotateX(0deg);
            transform: translateY(-50%) rotateX(0deg);
  }
}
@-webkit-keyframes overlay {
  0% {
    opacity: .5;
  }
  18%, 81% {
    opacity: 0;
  }
  92%, 100% {
    opacity: .5;
  }
}
@keyframes overlay {
  0% {
    opacity: .5;
  }
  18%, 81% {
    opacity: 0;
  }
  92%, 100% {
    opacity: .5;
  }
}
@-webkit-keyframes opacity {
  0%, 4% {
    opacity: 0;
  }
  18%, 81% {
    opacity: 1;
  }
  92%, 100% {
    opacity: 0;
  }
}
@keyframes opacity {
  0%, 4% {
    opacity: 0;
  }
  18%, 81% {
    opacity: 1;
  }
  92%, 100% {
    opacity: 0;
  }
}

main {
 margin-top:65px;
  padding: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  height: 100%;
}
main svg {
  width: 20em;
  height: 20em;
}
.circle-0 {
  stroke: #e27dae;
  stroke-dasharray: 283, 300;
  stroke-dashoffset: 0;
  stroke-linecap: round;
  -webkit-animation: circleInMotion-0 4s 4s linear infinite alternate;
          animation: circleInMotion-0 4s 4s linear infinite alternate;
}
@-webkit-keyframes circleInMotion-0 {
  0%, 40% {
    stroke-dasharray: 283, 300;
    stroke-dashoffset: 0;
    stroke-linecap: round;
  }
  60%, 100% {
    stroke-dasharray: 0, 300;
    stroke-dashoffset: -140;
    stroke-linecap: butt;
  }
}
@keyframes circleInMotion-0 {
  0%, 40% {
    stroke-dasharray: 283, 300;
    stroke-dashoffset: 0;
    stroke-linecap: round;
  }
  60%, 100% {
    stroke-dasharray: 0, 300;
    stroke-dashoffset: -140;
    stroke-linecap: butt;
  }
}
.circle-1 {
  stroke: #e283a8;
  stroke-dasharray: 258, 300;
  stroke-dashoffset: 0;
  stroke-linecap: round;
  -webkit-animation: circleInMotion-1 4s 1s linear infinite alternate;
          animation: circleInMotion-1 4s 1s linear infinite alternate;
}
@-webkit-keyframes circleInMotion-1 {
  0%, 40% {
    stroke-dasharray: 258, 300;
    stroke-dashoffset: 0;
    stroke-linecap: round;
  }
  60%, 100% {
    stroke-dasharray: 0, 300;
    stroke-dashoffset: -120;
    stroke-linecap: butt;
  }
}
@keyframes circleInMotion-1 {
  0%, 40% {
    stroke-dasharray: 258, 300;
    stroke-dashoffset: 0;
    stroke-linecap: round;
  }
  60%, 100% {
    stroke-dasharray: 0, 300;
    stroke-dashoffset: -120;
    stroke-linecap: butt;
  }
}
.circle-2 {
  stroke: #e289a2;
  stroke-dasharray: 233, 300;
  stroke-dashoffset: 0;
  stroke-linecap: round;
  -webkit-animation: circleInMotion-2 4s 9s linear infinite alternate;
          animation: circleInMotion-2 4s 9s linear infinite alternate;
}
@-webkit-keyframes circleInMotion-2 {
  0%, 40% {
    stroke-dasharray: 233, 300;
    stroke-dashoffset: 0;
    stroke-linecap: round;
  }
  60%, 100% {
    stroke-dasharray: 0, 300;
    stroke-dashoffset: -100;
    stroke-linecap: butt;
  }
}
@keyframes circleInMotion-2 {
  0%, 40% {
    stroke-dasharray: 233, 300;
    stroke-dashoffset: 0;
    stroke-linecap: round;
  }
  60%, 100% {
    stroke-dasharray: 0, 300;
    stroke-dashoffset: -100;
    stroke-linecap: butt;
  }
}
.circle-3 {
  stroke: #e2909c;
  stroke-dasharray: 208, 300;
  stroke-dashoffset: 0;
  stroke-linecap: round;
  -webkit-animation: circleInMotion-3 4s 1s linear infinite alternate;
          animation: circleInMotion-3 4s 1s linear infinite alternate;
}
@-webkit-keyframes circleInMotion-3 {
  0%, 40% {
    stroke-dasharray: 208, 300;
    stroke-dashoffset: 0;
    stroke-linecap: round;
  }
  60%, 100% {
    stroke-dasharray: 0, 300;
    stroke-dashoffset: -80;
    stroke-linecap: butt;
  }
}
@keyframes circleInMotion-3 {
  0%, 40% {
    stroke-dasharray: 208, 300;
    stroke-dashoffset: 0;
    stroke-linecap: round;
  }
  60%, 100% {
    stroke-dasharray: 0, 300;
    stroke-dashoffset: -80;
    stroke-linecap: butt;
  }
}
.circle-4 {
  stroke: #e29696;
  stroke-dasharray: 183, 300;
  stroke-dashoffset: 0;
  stroke-linecap: round;
  -webkit-animation: circleInMotion-4 4s 2s linear infinite alternate;
          animation: circleInMotion-4 4s 2s linear infinite alternate;
}
@-webkit-keyframes circleInMotion-4 {
  0%, 40% {
    stroke-dasharray: 183, 300;
    stroke-dashoffset: 0;
    stroke-linecap: round;
  }
  60%, 100% {
    stroke-dasharray: 0, 300;
    stroke-dashoffset: -60;
    stroke-linecap: butt;
  }
}
@keyframes circleInMotion-4 {
  0%, 40% {
    stroke-dasharray: 183, 300;
    stroke-dashoffset: 0;
    stroke-linecap: round;
  }
  60%, 100% {
    stroke-dasharray: 0, 300;
    stroke-dashoffset: -60;
    stroke-linecap: butt;
  }
}
.circle-5 {
  stroke: #e29c90;
  stroke-dasharray: 158, 300;
  stroke-dashoffset: 0;
  stroke-linecap: round;
  -webkit-animation: circleInMotion-5 4s 6s linear infinite alternate;
          animation: circleInMotion-5 4s 6s linear infinite alternate;
}

@-webkit-keyframes circleInMotion-5 {
  0%, 40% {
    stroke-dasharray: 158, 300;
    stroke-dashoffset: 0;
    stroke-linecap: round;
  }
  60%, 100% {
    stroke-dasharray: 0, 300;
    stroke-dashoffset: -40;
    stroke-linecap: butt;
  }
}
@keyframes circleInMotion-5 {
  0%, 40% {
    stroke-dasharray: 158, 300;
    stroke-dashoffset: 0;
    stroke-linecap: round;
  }
  60%, 100% {
    stroke-dasharray: 0, 300;
    stroke-dashoffset: -40;
    stroke-linecap: butt;
  }
}
.circle-6 {
  stroke: #e3a289;
  stroke-dasharray: 133, 300;
  stroke-dashoffset: 0;
  stroke-linecap: round;
  -webkit-animation: circleInMotion-6 4s 9s linear infinite alternate;
          animation: circleInMotion-6 4s 9s linear infinite alternate;
}

@-webkit-keyframes circleInMotion-6 {
  0%, 40% {
    stroke-dasharray: 133, 300;
    stroke-dashoffset: 0;
    stroke-linecap: round;
  }
  60%, 100% {
    stroke-dasharray: 0, 300;
    stroke-dashoffset: -20;
    stroke-linecap: butt;
  }
}

@keyframes circleInMotion-6 {
  0%, 40% {
    stroke-dasharray: 133, 300;
    stroke-dashoffset: 0;
    stroke-linecap: round;
  }
  60%, 100% {
    stroke-dasharray: 0, 300;
    stroke-dashoffset: -20;
    stroke-linecap: butt;
  }
}
.circle-7 {
  stroke: #e3a883;
  stroke-dasharray: 108, 300;
  stroke-dashoffset: 0;
  stroke-linecap: round;
  -webkit-animation: circleInMotion-7 4s 7s linear infinite alternate;
          animation: circleInMotion-7 4s 7s linear infinite alternate;
}
@-webkit-keyframes circleInMotion-7 {
  0%, 40% {
    stroke-dasharray: 108, 300;
    stroke-dashoffset: 0;
    stroke-linecap: round;
  }
  60%, 100% {
    stroke-dasharray: 0, 300;
    stroke-dashoffset: 0;
    stroke-linecap: butt;
  }
}
@keyframes circleInMotion-7 {
  0%, 40% {
    stroke-dasharray: 108, 300;
    stroke-dashoffset: 0;
    stroke-linecap: round;
  }
  60%, 100% {
    stroke-dasharray: 0, 300;
    stroke-dashoffset: 0;
    stroke-linecap: butt;
  }
}
.circle-8 {
  stroke: #e3ae7d;
  stroke-dasharray: 83, 300;
  stroke-dashoffset: 0;
  stroke-linecap: round;
  -webkit-animation: circleInMotion-8 4s 8s linear infinite alternate;
          animation: circleInMotion-8 4s 8s linear infinite alternate;
}
@-webkit-keyframes circleInMotion-8 {
  0%, 40% {
    stroke-dasharray: 83, 300;
    stroke-dashoffset: 0;
    stroke-linecap: round;
  }
  60%, 100% {
    stroke-dasharray: 0, 300;
    stroke-dashoffset: 20;
    stroke-linecap: butt;
  }
}
@keyframes circleInMotion-8 {
  0%, 40% {
    stroke-dasharray: 83, 300;
    stroke-dashoffset: 0;
    stroke-linecap: round;
  }
  60%, 100% {
    stroke-dasharray: 0, 300;
    stroke-dashoffset: 20;
    stroke-linecap: butt;
  }
}
.circle-9 {
  stroke: #e3b577;
  stroke-dasharray: 58, 300;
  stroke-dashoffset: 0;
  stroke-linecap: round;
  -webkit-animation: circleInMotion-9 4s 3s linear infinite alternate;
          animation: circleInMotion-9 4s 3s linear infinite alternate;
}
@-webkit-keyframes circleInMotion-9 {
  0%, 40% {
    stroke-dasharray: 58, 300;
    stroke-dashoffset: 0;
    stroke-linecap: round;
  }
  60%, 100% {
    stroke-dasharray: 0, 300;
    stroke-dashoffset: 40;
    stroke-linecap: butt;
  }
}
@keyframes circleInMotion-9 {
  0%, 40% {
    stroke-dasharray: 58, 300;
    stroke-dashoffset: 0;
    stroke-linecap: round;
  }
  60%, 100% {
    stroke-dasharray: 0, 300;
    stroke-dashoffset: 40;
    stroke-linecap: butt;
  }
}
.circle-10 {
  stroke: #e3bb71;
  stroke-dasharray: 33, 300;
  stroke-dashoffset: 0;
  stroke-linecap: round;
  -webkit-animation: circleInMotion-10 4s 5s linear infinite alternate;
          animation: circleInMotion-10 4s 5s linear infinite alternate;
}
@-webkit-keyframes circleInMotion-10 {
  0%, 40% {
    stroke-dasharray: 33, 300;
    stroke-dashoffset: 0;
    stroke-linecap: round;
  }
  60%, 100% {
    stroke-dasharray: 0, 300;
    stroke-dashoffset: 60;
    stroke-linecap: butt;
  }
}
@keyframes circleInMotion-10 {
  0%, 40% {
    stroke-dasharray: 33, 300;
    stroke-dashoffset: 0;
    stroke-linecap: round;
  }
  60%, 100% {
    stroke-dasharray: 0, 300;
    stroke-dashoffset: 60;
    stroke-linecap: butt;
  }
}
.circle-11 {
  stroke: #e3c16b;
  stroke-dasharray: 8, 300;
  stroke-dashoffset: 0;
  stroke-linecap: round;
  -webkit-animation: circleInMotion-11 4s 4s linear infinite alternate;
          animation: circleInMotion-11 4s 4s linear infinite alternate;
}
@-webkit-keyframes circleInMotion-11 {
  0%, 40% {
    stroke-dasharray: 8, 300;
    stroke-dashoffset: 0;
    stroke-linecap: round;
  }
  60%, 100% {
    stroke-dasharray: 0, 300;
    stroke-dashoffset: 80;
    stroke-linecap: butt;
  }
}
@keyframes circleInMotion-11 {
  0%, 40% {
    stroke-dasharray: 8, 300;
    stroke-dashoffset: 0;
    stroke-linecap: round;
  }
  60%, 100% {
    stroke-dasharray: 0, 300;
    stroke-dashoffset: 80;
    stroke-linecap: butt;
  }
}

.circle {
  margin-left: -33px;
    margin-top:48px;
    border-radius: 200px;
  width: 300px;
  height: 300px;
  border: 20px solid #B20000;
  border-radius: 50%;
  position: absolute;
  top: 5%;
  left: 40%;
}
@keyframes circle {
 from {
  transform: scale(0)
 }
 to {
  transform: scale(6)
 }
}
.one {
  animation: circle 4s infinite linear;
}
.two {
  animation: circle 3s infinite linear;
}
.three {
  animation: circle 2s infinite linear;
}
img {
  position: absolute;
  top: 139px;
  left: 575px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid #ff0;
  width: 211px;
  height: 212px;
  z-index: 3;
  opacity: 1;
  animation: photo-ani 25s forwards;
}
/* Keyframes */
@keyframes line-ani {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes photo-ani {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
</style> 

<main rel="main">
  <svg viewBox="0 0 100 100">
    <circle class="circle-0" cx="50" cy="50" r="45" fill="none" stroke-width="3" />
    <circle class="circle-1" cx="50" cy="50" r="41" fill="none" stroke-width="3" />
    <circle class="circle-2" cx="50" cy="50" r="37" fill="none" stroke-width="3" />
    <circle class="circle-3" cx="50" cy="50" r="33" fill="none" stroke-width="3" />
    <circle class="circle-4" cx="50" cy="50" r="29" fill="none" stroke-width="3" />
    <circle class="circle-5" cx="50" cy="50" r="25" fill="none" stroke-width="3" />
    <circle class="circle-6" cx="50" cy="50" r="21" fill="none" stroke-width="3" />
    <circle class="circle-7" cx="50" cy="50" r="17" fill="none" stroke-width="3" />
    <circle class="circle-8" cx="50" cy="50" r="13" fill="none" stroke-width="3" />
    <circle class="circle-9" cx="50" cy="50" r="9" fill="none" stroke-width="3" />
    <circle class="circle-10" cx="50" cy="50" r="5" fill="none" stroke-width="3" />
    <circle class="circle-11" cx="50" cy="50" r="1" fill="none" stroke-width="3" /> 
<div class="circle one"></div>
<div class="circle two"></div>
<div class="circle three"></div>
  </svg>
</main>

<div id="image">
<div id="Mys2010">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcKKeko5hNyHpTLfZmUphk35IxjIZBUCCF3aM8Vm3b7xFt6mXadJATtOqj4eJ-g1DqRiYE3pZdNGjYfWzvMiwWrzBY49tyz-sawDkWpTXw3xr8MahxWx-_jkYXBQXaICWDjPrSs-jXvmrX/s1600-r/Jannine-Mys2010.png"  />
</div>
<div class="loader-2">
<div class="loader-text">
<div class="loader">
</div>
<div id='gif'>
</div>
<div class="ap" id="ap">
<div align="center">
<div id="dibawah">
<span style="font-family: arial ; font-size: 12px; color:#80C8FE;"> EDITED BY. <a href="https://Link Download"target="_blank" title="Mari Belajar"><span style="color: #FFFF00; font-size: 14px;">&nbsp; M - 2010 </a>&nbsp; DOWNLOAD </a> 
</div>
<div id="posisi">
<span style="font-family: arial ; font-size: 12px; color:#80C8FE;"> COPYRIGHT <a href="http://codepen.io/Myscript2010" target="_blank" title="Mari Belajar"><span style="color: #FFFF00; font-size: 14px;">&nbsp; &copy; - 2016 </a>&nbsp; CODEPEN </a> 
</div>
<h2>
<body translate="no" ><div align="center" style="margin-top:5px">
<audio id="mys2010" src="https://sites.google.com/site/gg1cover/music/Jannine-Weigel-Mys2010s.mp3"controls="controls"></audio></h2>
</a></div>
</div>
</div>
<header>
<a href="http://sample-mys2010.blogspot.co.id/2016/07/happy-circles.html" target="_blank" title="Mari Belajar">
<h2>
<span style="color:#f00; font-size: 10pt">LET'S STUDY</a>  </h2>
</a>  
</div>
</header>

<ul class="mys2010-list">
<script src='//assets.codepen.io/assets/common/stopExecutionOnTimeout.js?t=1'>
</script>     
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'>
</script>    
<link rel='stylesheet prefetch' href='http://cdn.jsdelivr.net/mediaelement/2.13.1/mediaelementplayer.min.css'>     
<script src='http://cdn.jsdelivr.net/mediaelement/2.13.1/mediaelement-and-player.min.js'>
</script>  
<script src="//assets.codepen.io/assets/common/stopExecutionOnTimeout-f961f59a28ef4fd551736b43f94620b5.js">
</script>

<script>
      $(function () {
$('video,audio').mediaelementplayer({
success: function (mediaElement, domObject) {
var audio_src = $('li.current').attr('data-url');
mediaElement.setSrc(audio_src);
mediaElement.addEventListener('ended', function (e) {
mys2010PlayNext(e.target);
}, false);
},
keyActions: []
});
$('.mys2010-list li').click(function () {
$(this).addClass('current').siblings().removeClass('current');
var audio_src = $(this).attr('data-url');
$('audio#mys2010:first').each(function () {
this.player.pause();
this.player.setSrc(audio_src);
this.player.play();
});
});
});
function mys2010PlayNext(currentPlayer) {
if ($('.mys2010-list li.current').length > 0) {
var current_item = $('.mys2010-list li.current:first');
var audio_src = $(current_item).next().text();
$(current_item).next().addClass('current').siblings().removeClass('current');
console.log('if ' + audio_src);
} else {
var current_item = $('.mys2010-list li:first');
var audio_src = $(current_item).next().text();
$(current_item).next().addClass('current').siblings().removeClass('current');
console.log('elseif ' + audio_src);
}
if ($(current_item).is(':last-child')) {
$(current_item).removeClass('current');
} else {
currentPlayer.setSrc(audio_src);
currentPlayer.play();
}}    
</script> 

Audio Code by. Jereme Causing
Happy Circles Code by. Jan Reimers

Circles ○ Code by. Radimir Bitsov
Design Code is Edited by. Mys2010 on Codepen

DEMOSHOW

If you want to directly copy  and  paste you canDownload Here Happy Circles   

Category: Happy Circles

Lines Animation

Memasang Kode Lines Animation
Login ke akun blog klik tombol blog baru, buat satubuah link baru   
kemudian beri nama sesuai fungsi,  klik Edit HTML pada link baru tersebut, 
hapus semua kode template ganti dengan kode blank template, yang tersedia pada sumber  berikut :  Get Blank Template.   edit background warna sesuai keinginan klik simpan selesai.

Kemudian klik entri halaman baru HTML pada link tersebut.
copy kode dibawah ini, pastekan kedalam halaman baru tersebut dan klik simpan selesai

<style class="Mys2010-styles">
body {);color:red;height:100%;overflow:hidden;}
body {
  margin: 0;
  width: 100vw;
  height: 100vh;
  background: radial-gradient(circle at 50% 50%, #B20000 0%, #333 100%);
}
header {
  -o-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  padding:  0px 0;
  position: fixed;
  top:-8px;
  width: 100%;
text-align: center;
font-size:  6px;
background: -moz-linear-gradient(top, #B20000 0%, rgba(53,02,01,1) 100%);
  border-bottom: 3px solid #dad;  
}
.ap {
position: fixed;
right: 0;
bottom:-19px;
left: 0;
height: 70px;
margin: auto;
font-family: Arial, sans-serif;
font-size: 10px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-align: center;
font-size:  11px;
background:  #111;
border-top: 2px solid #f0f;
z-index: 9999;
} 
h2 {
padding:15px; 
background: -webkit-linear-gradient(transparent 10%, goldenrod 50%, transparent 90%); 
background: linear-gradient(transparent 10%, #B20000 50%, transparent 90%); 
}

#M-2010, #teks, #posisi, #dibawah  {
    position: absolute;
    font-size: 11px;
    margin: 2px
}
#M-2010, #teks div {
    text-decoration: underline;
    cursor: pointer
}
#teks, #posisi {
    text-align: right;
    right:  50px;
}
#teks, #dibawah {
    text-align: left;
    left:  50px;
}
 #dibawah, #posisi {
    bottom:28px;
} 
#Mys2010 a:hover { background-color: transparent;opacity:0.7; } #Mys2010 img { -moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; } #Mys2010 img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); }

.center {
  position: absolute;
  width: 40px;
  height: 40px;
  margin-top:220px;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.line {
  box-sizing: border-box;
  position: absolute;
  width: 40px;
  height: 40px;
  top: 0;
  left: 0;
  background:radial-gradient(circle at 50% 50%, #B20000 0%, blue 100%);
}
.line-1 {
  -webkit-animation: line-1 10s ease-in-out infinite;
          animation: line-1 10s ease-in-out infinite;
}
@-webkit-keyframes line-1 {
  0% {
    -webkit-transform: rotate(0) translate(0, 0) scale(0.01);
            transform: rotate(0) translate(0, 0) scale(0.01);
  }
  5% {
    -webkit-transform: rotate(0) translate(0, 0) scale(1);
            transform: rotate(0) translate(0, 0) scale(1);
  }
  15% {
    -webkit-transform: rotate(0deg) translate(0, 0) scale(1);
            transform: rotate(0deg) translate(0, 0) scale(1);
  }
  20% {
    -webkit-transform: rotate(0deg) translate(0, -100px) scale(0.25, 1);
            transform: rotate(0deg) translate(0, -100px) scale(0.25, 1);
  }
  25% {
    -webkit-transform: rotate(0deg) translate(0, -100px) scale(0.25, 0.25) rotate(179deg);
            transform: rotate(0deg) translate(0, -100px) scale(0.25, 0.25) rotate(179deg);
  }
  30% {
    -webkit-transform: rotate(0deg) translate(0, -100px) scale(1, 0.25) rotate(179deg);
            transform: rotate(0deg) translate(0, -100px) scale(1, 0.25) rotate(179deg);
  }
  35% {
    -webkit-transform: rotate(0deg) translate(0, -60px) scale(1, 0.1);
            transform: rotate(0deg) translate(0, -60px) scale(1, 0.1);
  }
  40% {
    -webkit-transform: rotate(0deg) translate(0, -60px) scale(1, 0.1) translate(-30px, 0);
            transform: rotate(0deg) translate(0, -60px) scale(1, 0.1) translate(-30px, 0);
  }
  45% {
    -webkit-transform: rotate(0deg) translate(0, -60px) scale(1, 0.1) translate(30px, 0);
            transform: rotate(0deg) translate(0, -60px) scale(1, 0.1) translate(30px, 0);
  }
  50% {
    -webkit-transform: rotate(0deg) translate(0, -60px) scale(0.1, 1);
            transform: rotate(0deg) translate(0, -60px) scale(0.1, 1);
  }
  55% {
    -webkit-transform: rotate(0deg) translate(0, -60px) scale(0.5, 0.1);
            transform: rotate(0deg) translate(0, -60px) scale(0.5, 0.1);
    border-radius: 0;
  }
  60% {
    -webkit-transform: rotate(0deg) translate(0, -80px) scale(0.5, 0.5) rotate(179deg);
            transform: rotate(0deg) translate(0, -80px) scale(0.5, 0.5) rotate(179deg);
    border-radius: 50%;
  }
  65% {
    -webkit-transform: rotate(0deg) translate(0, 0) scale(0.2, 0.2);
            transform: rotate(0deg) translate(0, 0) scale(0.2, 0.2);
    border-radius: 50%;
  }
  70% {
    -webkit-transform: rotate(0deg) translate(0, -100px) scale(0.25, 1);
            transform: rotate(0deg) translate(0, -100px) scale(0.25, 1);
    border-radius: 0;
  }
  75% {
    -webkit-transform: rotate(0deg) translate(0, -100px) scale(0.25, 0.25);
            transform: rotate(0deg) translate(0, -100px) scale(0.25, 0.25);
  }
  80% {
    -webkit-transform: rotate(0deg) translate(0, -50px) scale(0.5, 0.5);
            transform: rotate(0deg) translate(0, -50px) scale(0.5, 0.5);
  }
  85% {
    -webkit-transform: rotate(0deg) translate(0, -50px) scale(0.5, 0.5) rotate(179deg) translate(-50px, 50px);
            transform: rotate(0deg) translate(0, -50px) scale(0.5, 0.5) rotate(179deg) translate(-50px, 50px);
  }
  90% {
    -webkit-transform: rotate(0deg) translate(0, -30px) scale(0.5, 0.1);
            transform: rotate(0deg) translate(0, -30px) scale(0.5, 0.1);
  }
  95% {
    -webkit-transform: rotate(0deg) translate(0, -10px) scale(0.1, 0.5);
            transform: rotate(0deg) translate(0, -10px) scale(0.1, 0.5);
  }
  100% {
    -webkit-transform: rotate(0deg) translate(0, -300px) scale(0.1, 0.5);
            transform: rotate(0deg) translate(0, -300px) scale(0.1, 0.5);
  }
}
@keyframes line-1 {
  0% {
    -webkit-transform: rotate(0) translate(0, 0) scale(0.01);
            transform: rotate(0) translate(0, 0) scale(0.01);
  }
  5% {
    -webkit-transform: rotate(0) translate(0, 0) scale(1);
            transform: rotate(0) translate(0, 0) scale(1);
  }
  15% {
    -webkit-transform: rotate(0deg) translate(0, 0) scale(1);
            transform: rotate(0deg) translate(0, 0) scale(1);
  }
  20% {
    -webkit-transform: rotate(0deg) translate(0, -100px) scale(0.25, 1);
            transform: rotate(0deg) translate(0, -100px) scale(0.25, 1);
  }
  25% {
    -webkit-transform: rotate(0deg) translate(0, -100px) scale(0.25, 0.25) rotate(179deg);
            transform: rotate(0deg) translate(0, -100px) scale(0.25, 0.25) rotate(179deg);
  }
  30% {
    -webkit-transform: rotate(0deg) translate(0, -100px) scale(1, 0.25) rotate(179deg);
            transform: rotate(0deg) translate(0, -100px) scale(1, 0.25) rotate(179deg);
  }
  35% {
    -webkit-transform: rotate(0deg) translate(0, -60px) scale(1, 0.1);
            transform: rotate(0deg) translate(0, -60px) scale(1, 0.1);
  }
  40% {
    -webkit-transform: rotate(0deg) translate(0, -60px) scale(1, 0.1) translate(-30px, 0);
            transform: rotate(0deg) translate(0, -60px) scale(1, 0.1) translate(-30px, 0);
  }
  45% {
    -webkit-transform: rotate(0deg) translate(0, -60px) scale(1, 0.1) translate(30px, 0);
            transform: rotate(0deg) translate(0, -60px) scale(1, 0.1) translate(30px, 0);
  }
  50% {
    -webkit-transform: rotate(0deg) translate(0, -60px) scale(0.1, 1);
            transform: rotate(0deg) translate(0, -60px) scale(0.1, 1);
  }
  55% {
    -webkit-transform: rotate(0deg) translate(0, -60px) scale(0.5, 0.1);
            transform: rotate(0deg) translate(0, -60px) scale(0.5, 0.1);
    border-radius: 0;
  }
  60% {
    -webkit-transform: rotate(0deg) translate(0, -80px) scale(0.5, 0.5) rotate(179deg);
            transform: rotate(0deg) translate(0, -80px) scale(0.5, 0.5) rotate(179deg);
    border-radius: 50%;
  }
  65% {
    -webkit-transform: rotate(0deg) translate(0, 0) scale(0.2, 0.2);
            transform: rotate(0deg) translate(0, 0) scale(0.2, 0.2);
    border-radius: 50%;
  }
  70% {
    -webkit-transform: rotate(0deg) translate(0, -100px) scale(0.25, 1);
            transform: rotate(0deg) translate(0, -100px) scale(0.25, 1);
    border-radius: 0;
  }
  75% {
    -webkit-transform: rotate(0deg) translate(0, -100px) scale(0.25, 0.25);
            transform: rotate(0deg) translate(0, -100px) scale(0.25, 0.25);
  }
  80% {
    -webkit-transform: rotate(0deg) translate(0, -50px) scale(0.5, 0.5);
            transform: rotate(0deg) translate(0, -50px) scale(0.5, 0.5);
  }
  85% {
    -webkit-transform: rotate(0deg) translate(0, -50px) scale(0.5, 0.5) rotate(179deg) translate(-50px, 50px);
            transform: rotate(0deg) translate(0, -50px) scale(0.5, 0.5) rotate(179deg) translate(-50px, 50px);
  }
  90% {
    -webkit-transform: rotate(0deg) translate(0, -30px) scale(0.5, 0.1);
            transform: rotate(0deg) translate(0, -30px) scale(0.5, 0.1);
  }
  95% {
    -webkit-transform: rotate(0deg) translate(0, -10px) scale(0.1, 0.5);
            transform: rotate(0deg) translate(0, -10px) scale(0.1, 0.5);
  }
  100% {
    -webkit-transform: rotate(0deg) translate(0, -300px) scale(0.1, 0.5);
            transform: rotate(0deg) translate(0, -300px) scale(0.1, 0.5);
  }
}
.line-2 {
  -webkit-animation: line-2 10s ease-in-out infinite;
          animation: line-2 10s ease-in-out infinite;
}

@-webkit-keyframes line-2 {
  0% {
    -webkit-transform: rotate(0) translate(0, 0) scale(0.01);
            transform: rotate(0) translate(0, 0) scale(0.01);
  }
  5% {
    -webkit-transform: rotate(0) translate(0, 0) scale(1);
            transform: rotate(0) translate(0, 0) scale(1);
  }
  15% {
    -webkit-transform: rotate(36deg) translate(0, 0) scale(1);
            transform: rotate(36deg) translate(0, 0) scale(1);
  }
  20% {
    -webkit-transform: rotate(36deg) translate(0, -100px) scale(0.25, 1);
            transform: rotate(36deg) translate(0, -100px) scale(0.25, 1);
  }
  25% {
    -webkit-transform: rotate(36deg) translate(0, -100px) scale(0.25, 0.25) rotate(179deg);
            transform: rotate(36deg) translate(0, -100px) scale(0.25, 0.25) rotate(179deg);
  }
  30% {
    -webkit-transform: rotate(36deg) translate(0, -100px) scale(1, 0.25) rotate(179deg);
            transform: rotate(36deg) translate(0, -100px) scale(1, 0.25) rotate(179deg);
  }
  35% {
    -webkit-transform: rotate(36deg) translate(0, -60px) scale(1, 0.1);
            transform: rotate(36deg) translate(0, -60px) scale(1, 0.1);
  }
  40% {
    -webkit-transform: rotate(36deg) translate(0, -60px) scale(1, 0.1) translate(-30px, 0);
            transform: rotate(36deg) translate(0, -60px) scale(1, 0.1) translate(-30px, 0);
  }
  45% {
    -webkit-transform: rotate(36deg) translate(0, -60px) scale(1, 0.1) translate(30px, 0);
            transform: rotate(36deg) translate(0, -60px) scale(1, 0.1) translate(30px, 0);
  }
  50% {
    -webkit-transform: rotate(36deg) translate(0, -60px) scale(0.1, 1);
            transform: rotate(36deg) translate(0, -60px) scale(0.1, 1);
  }
  55% {
    -webkit-transform: rotate(36deg) translate(0, -60px) scale(0.5, 0.1);
            transform: rotate(36deg) translate(0, -60px) scale(0.5, 0.1);
    border-radius: 0;
  }
  60% {
    -webkit-transform: rotate(36deg) translate(0, -80px) scale(0.5, 0.5) rotate(179deg);
            transform: rotate(36deg) translate(0, -80px) scale(0.5, 0.5) rotate(179deg);
    border-radius: 50%;
  }
  65% {
    -webkit-transform: rotate(36deg) translate(0, 0) scale(0.2, 0.2);
            transform: rotate(36deg) translate(0, 0) scale(0.2, 0.2);
    border-radius: 50%;
  }
  70% {
    -webkit-transform: rotate(36deg) translate(0, -100px) scale(0.25, 1);
            transform: rotate(36deg) translate(0, -100px) scale(0.25, 1);
    border-radius: 0;
  }
  75% {
    -webkit-transform: rotate(36deg) translate(0, -100px) scale(0.25, 0.25);
            transform: rotate(36deg) translate(0, -100px) scale(0.25, 0.25);
  }
  80% {
    -webkit-transform: rotate(36deg) translate(0, -50px) scale(0.5, 0.5);
            transform: rotate(36deg) translate(0, -50px) scale(0.5, 0.5);
  }
  85% {
    -webkit-transform: rotate(36deg) translate(0, -50px) scale(0.5, 0.5) rotate(179deg) translate(-50px, 50px);
            transform: rotate(36deg) translate(0, -50px) scale(0.5, 0.5) rotate(179deg) translate(-50px, 50px);
  }
  90% {
    -webkit-transform: rotate(36deg) translate(0, -30px) scale(0.5, 0.1);
            transform: rotate(36deg) translate(0, -30px) scale(0.5, 0.1);
  }
  95% {
    -webkit-transform: rotate(36deg) translate(0, -10px) scale(0.1, 0.5);
            transform: rotate(36deg) translate(0, -10px) scale(0.1, 0.5);
  }
  100% {
    -webkit-transform: rotate(36deg) translate(0, -300px) scale(0.1, 0.5);
            transform: rotate(36deg) translate(0, -300px) scale(0.1, 0.5);
  }
}
@keyframes line-2 {
  0% {
    -webkit-transform: rotate(0) translate(0, 0) scale(0.01);
            transform: rotate(0) translate(0, 0) scale(0.01);
  }
  5% {
    -webkit-transform: rotate(0) translate(0, 0) scale(1);
            transform: rotate(0) translate(0, 0) scale(1);
  }
  15% {
    -webkit-transform: rotate(36deg) translate(0, 0) scale(1);
            transform: rotate(36deg) translate(0, 0) scale(1);
  }
  20% {
    -webkit-transform: rotate(36deg) translate(0, -100px) scale(0.25, 1);
            transform: rotate(36deg) translate(0, -100px) scale(0.25, 1);
  }
  25% {
    -webkit-transform: rotate(36deg) translate(0, -100px) scale(0.25, 0.25) rotate(179deg);
            transform: rotate(36deg) translate(0, -100px) scale(0.25, 0.25) rotate(179deg);
  }
  30% {
    -webkit-transform: rotate(36deg) translate(0, -100px) scale(1, 0.25) rotate(179deg);
            transform: rotate(36deg) translate(0, -100px) scale(1, 0.25) rotate(179deg);
  }
  35% {
    -webkit-transform: rotate(36deg) translate(0, -60px) scale(1, 0.1);
            transform: rotate(36deg) translate(0, -60px) scale(1, 0.1);
  }
  40% {
    -webkit-transform: rotate(36deg) translate(0, -60px) scale(1, 0.1) translate(-30px, 0);
            transform: rotate(36deg) translate(0, -60px) scale(1, 0.1) translate(-30px, 0);
  }
  45% {
    -webkit-transform: rotate(36deg) translate(0, -60px) scale(1, 0.1) translate(30px, 0);
            transform: rotate(36deg) translate(0, -60px) scale(1, 0.1) translate(30px, 0);
  }
  50% {
    -webkit-transform: rotate(36deg) translate(0, -60px) scale(0.1, 1);
            transform: rotate(36deg) translate(0, -60px) scale(0.1, 1);
  }
  55% {
    -webkit-transform: rotate(36deg) translate(0, -60px) scale(0.5, 0.1);
            transform: rotate(36deg) translate(0, -60px) scale(0.5, 0.1);
    border-radius: 0;
  }
  60% {
    -webkit-transform: rotate(36deg) translate(0, -80px) scale(0.5, 0.5) rotate(179deg);
            transform: rotate(36deg) translate(0, -80px) scale(0.5, 0.5) rotate(179deg);
    border-radius: 50%;
  }
  65% {
    -webkit-transform: rotate(36deg) translate(0, 0) scale(0.2, 0.2);
            transform: rotate(36deg) translate(0, 0) scale(0.2, 0.2);
    border-radius: 50%;
  }
  70% {
    -webkit-transform: rotate(36deg) translate(0, -100px) scale(0.25, 1);
            transform: rotate(36deg) translate(0, -100px) scale(0.25, 1);
    border-radius: 0;
  }
  75% {
    -webkit-transform: rotate(36deg) translate(0, -100px) scale(0.25, 0.25);
            transform: rotate(36deg) translate(0, -100px) scale(0.25, 0.25);
  }
  80% {
    -webkit-transform: rotate(36deg) translate(0, -50px) scale(0.5, 0.5);
            transform: rotate(36deg) translate(0, -50px) scale(0.5, 0.5);
  }
  85% {
    -webkit-transform: rotate(36deg) translate(0, -50px) scale(0.5, 0.5) rotate(179deg) translate(-50px, 50px);
            transform: rotate(36deg) translate(0, -50px) scale(0.5, 0.5) rotate(179deg) translate(-50px, 50px);
  }
  90% {
    -webkit-transform: rotate(36deg) translate(0, -30px) scale(0.5, 0.1);
            transform: rotate(36deg) translate(0, -30px) scale(0.5, 0.1);
  }
  95% {
    -webkit-transform: rotate(36deg) translate(0, -10px) scale(0.1, 0.5);
            transform: rotate(36deg) translate(0, -10px) scale(0.1, 0.5);
  }
  100% {
    -webkit-transform: rotate(36deg) translate(0, -300px) scale(0.1, 0.5);
            transform: rotate(36deg) translate(0, -300px) scale(0.1, 0.5);
  }
}
.line-3 {
  -webkit-animation: line-3 10s ease-in-out infinite;
          animation: line-3 10s ease-in-out infinite;
}

@-webkit-keyframes line-3 {
  0% {
    -webkit-transform: rotate(0) translate(0, 0) scale(0.01);
            transform: rotate(0) translate(0, 0) scale(0.01);
  }
  5% {
    -webkit-transform: rotate(0) translate(0, 0) scale(1);
            transform: rotate(0) translate(0, 0) scale(1);
  }
  15% {
    -webkit-transform: rotate(72deg) translate(0, 0) scale(1);
            transform: rotate(72deg) translate(0, 0) scale(1);
  }
  20% {
    -webkit-transform: rotate(72deg) translate(0, -100px) scale(0.25, 1);
            transform: rotate(72deg) translate(0, -100px) scale(0.25, 1);
  }
  25% {
    -webkit-transform: rotate(72deg) translate(0, -100px) scale(0.25, 0.25) rotate(179deg);
            transform: rotate(72deg) translate(0, -100px) scale(0.25, 0.25) rotate(179deg);
  }
  30% {
    -webkit-transform: rotate(72deg) translate(0, -100px) scale(1, 0.25) rotate(179deg);
            transform: rotate(72deg) translate(0, -100px) scale(1, 0.25) rotate(179deg);
  }
  35% {
    -webkit-transform: rotate(72deg) translate(0, -60px) scale(1, 0.1);
            transform: rotate(72deg) translate(0, -60px) scale(1, 0.1);
  }
  40% {
    -webkit-transform: rotate(72deg) translate(0, -60px) scale(1, 0.1) translate(-30px, 0);
            transform: rotate(72deg) translate(0, -60px) scale(1, 0.1) translate(-30px, 0);
  }
  45% {
    -webkit-transform: rotate(72deg) translate(0, -60px) scale(1, 0.1) translate(30px, 0);
            transform: rotate(72deg) translate(0, -60px) scale(1, 0.1) translate(30px, 0);
  }
  50% {
    -webkit-transform: rotate(72deg) translate(0, -60px) scale(0.1, 1);
            transform: rotate(72deg) translate(0, -60px) scale(0.1, 1);
  }
  55% {
    -webkit-transform: rotate(72deg) translate(0, -60px) scale(0.5, 0.1);
            transform: rotate(72deg) translate(0, -60px) scale(0.5, 0.1);
    border-radius: 0;
  }
  60% {
    -webkit-transform: rotate(72deg) translate(0, -80px) scale(0.5, 0.5) rotate(179deg);
            transform: rotate(72deg) translate(0, -80px) scale(0.5, 0.5) rotate(179deg);
    border-radius: 50%;
  }
  65% {
    -webkit-transform: rotate(72deg) translate(0, 0) scale(0.2, 0.2);
            transform: rotate(72deg) translate(0, 0) scale(0.2, 0.2);
    border-radius: 50%;
  }
  70% {
    -webkit-transform: rotate(72deg) translate(0, -100px) scale(0.25, 1);
            transform: rotate(72deg) translate(0, -100px) scale(0.25, 1);
    border-radius: 0;
  }
  75% {
    -webkit-transform: rotate(72deg) translate(0, -100px) scale(0.25, 0.25);
            transform: rotate(72deg) translate(0, -100px) scale(0.25, 0.25);
  }
  80% {
    -webkit-transform: rotate(72deg) translate(0, -50px) scale(0.5, 0.5);
            transform: rotate(72deg) translate(0, -50px) scale(0.5, 0.5);
  }
  85% {
    -webkit-transform: rotate(72deg) translate(0, -50px) scale(0.5, 0.5) rotate(179deg) translate(-50px, 50px);
            transform: rotate(72deg) translate(0, -50px) scale(0.5, 0.5) rotate(179deg) translate(-50px, 50px);
  }
  90% {
    -webkit-transform: rotate(72deg) translate(0, -30px) scale(0.5, 0.1);
            transform: rotate(72deg) translate(0, -30px) scale(0.5, 0.1);
  }
  95% {
    -webkit-transform: rotate(72deg) translate(0, -10px) scale(0.1, 0.5);
            transform: rotate(72deg) translate(0, -10px) scale(0.1, 0.5);
  }
  100% {
    -webkit-transform: rotate(72deg) translate(0, -300px) scale(0.1, 0.5);
            transform: rotate(72deg) translate(0, -300px) scale(0.1, 0.5);
  }
}

@keyframes line-3 {
  0% {
    -webkit-transform: rotate(0) translate(0, 0) scale(0.01);
            transform: rotate(0) translate(0, 0) scale(0.01);
  }
  5% {
    -webkit-transform: rotate(0) translate(0, 0) scale(1);
            transform: rotate(0) translate(0, 0) scale(1);
  }
  15% {
    -webkit-transform: rotate(72deg) translate(0, 0) scale(1);
            transform: rotate(72deg) translate(0, 0) scale(1);
  }
  20% {
    -webkit-transform: rotate(72deg) translate(0, -100px) scale(0.25, 1);
            transform: rotate(72deg) translate(0, -100px) scale(0.25, 1);
  }
  25% {
    -webkit-transform: rotate(72deg) translate(0, -100px) scale(0.25, 0.25) rotate(179deg);
            transform: rotate(72deg) translate(0, -100px) scale(0.25, 0.25) rotate(179deg);
  }
  30% {
    -webkit-transform: rotate(72deg) translate(0, -100px) scale(1, 0.25) rotate(179deg);
            transform: rotate(72deg) translate(0, -100px) scale(1, 0.25) rotate(179deg);
  }
  35% {
    -webkit-transform: rotate(72deg) translate(0, -60px) scale(1, 0.1);
            transform: rotate(72deg) translate(0, -60px) scale(1, 0.1);
  }
  40% {
    -webkit-transform: rotate(72deg) translate(0, -60px) scale(1, 0.1) translate(-30px, 0);
            transform: rotate(72deg) translate(0, -60px) scale(1, 0.1) translate(-30px, 0);
  }
  45% {
    -webkit-transform: rotate(72deg) translate(0, -60px) scale(1, 0.1) translate(30px, 0);
            transform: rotate(72deg) translate(0, -60px) scale(1, 0.1) translate(30px, 0);
  }
  50% {
    -webkit-transform: rotate(72deg) translate(0, -60px) scale(0.1, 1);
            transform: rotate(72deg) translate(0, -60px) scale(0.1, 1);
  }
  55% {
    -webkit-transform: rotate(72deg) translate(0, -60px) scale(0.5, 0.1);
            transform: rotate(72deg) translate(0, -60px) scale(0.5, 0.1);
    border-radius: 0;
  }
  60% {
    -webkit-transform: rotate(72deg) translate(0, -80px) scale(0.5, 0.5) rotate(179deg);
            transform: rotate(72deg) translate(0, -80px) scale(0.5, 0.5) rotate(179deg);
    border-radius: 50%;
  }
  65% {
    -webkit-transform: rotate(72deg) translate(0, 0) scale(0.2, 0.2);
            transform: rotate(72deg) translate(0, 0) scale(0.2, 0.2);
    border-radius: 50%;
  }
  70% {
    -webkit-transform: rotate(72deg) translate(0, -100px) scale(0.25, 1);
            transform: rotate(72deg) translate(0, -100px) scale(0.25, 1);
    border-radius: 0;
  }
  75% {
    -webkit-transform: rotate(72deg) translate(0, -100px) scale(0.25, 0.25);
            transform: rotate(72deg) translate(0, -100px) scale(0.25, 0.25);
  }
  80% {
    -webkit-transform: rotate(72deg) translate(0, -50px) scale(0.5, 0.5);
            transform: rotate(72deg) translate(0, -50px) scale(0.5, 0.5);
  }
  85% {
    -webkit-transform: rotate(72deg) translate(0, -50px) scale(0.5, 0.5) rotate(179deg) translate(-50px, 50px);
            transform: rotate(72deg) translate(0, -50px) scale(0.5, 0.5) rotate(179deg) translate(-50px, 50px);
  }
  90% {
    -webkit-transform: rotate(72deg) translate(0, -30px) scale(0.5, 0.1);
            transform: rotate(72deg) translate(0, -30px) scale(0.5, 0.1);
  }
  95% {
    -webkit-transform: rotate(72deg) translate(0, -10px) scale(0.1, 0.5);
            transform: rotate(72deg) translate(0, -10px) scale(0.1, 0.5);
  }
  100% {
    -webkit-transform: rotate(72deg) translate(0, -300px) scale(0.1, 0.5);
            transform: rotate(72deg) translate(0, -300px) scale(0.1, 0.5);
  }
}
.line-4 {
  -webkit-animation: line-4 10s ease-in-out infinite;
          animation: line-4 10s ease-in-out infinite;
}

@-webkit-keyframes line-4 {
  0% {
    -webkit-transform: rotate(0) translate(0, 0) scale(0.01);
            transform: rotate(0) translate(0, 0) scale(0.01);
  }
  5% {
    -webkit-transform: rotate(0) translate(0, 0) scale(1);
            transform: rotate(0) translate(0, 0) scale(1);
  }
  15% {
    -webkit-transform: rotate(108deg) translate(0, 0) scale(1);
            transform: rotate(108deg) translate(0, 0) scale(1);
  }
  20% {
    -webkit-transform: rotate(108deg) translate(0, -100px) scale(0.25, 1);
            transform: rotate(108deg) translate(0, -100px) scale(0.25, 1);
  }
  25% {
    -webkit-transform: rotate(108deg) translate(0, -100px) scale(0.25, 0.25) rotate(179deg);
            transform: rotate(108deg) translate(0, -100px) scale(0.25, 0.25) rotate(179deg);
  }
  30% {
    -webkit-transform: rotate(108deg) translate(0, -100px) scale(1, 0.25) rotate(179deg);
            transform: rotate(108deg) translate(0, -100px) scale(1, 0.25) rotate(179deg);
  }
  35% {
    -webkit-transform: rotate(108deg) translate(0, -60px) scale(1, 0.1);
            transform: rotate(108deg) translate(0, -60px) scale(1, 0.1);
  }
  40% {
    -webkit-transform: rotate(108deg) translate(0, -60px) scale(1, 0.1) translate(-30px, 0);
            transform: rotate(108deg) translate(0, -60px) scale(1, 0.1) translate(-30px, 0);
  }
  45% {
    -webkit-transform: rotate(108deg) translate(0, -60px) scale(1, 0.1) translate(30px, 0);
            transform: rotate(108deg) translate(0, -60px) scale(1, 0.1) translate(30px, 0);
  }
  50% {
    -webkit-transform: rotate(108deg) translate(0, -60px) scale(0.1, 1);
            transform: rotate(108deg) translate(0, -60px) scale(0.1, 1);
  }
  55% {
    -webkit-transform: rotate(108deg) translate(0, -60px) scale(0.5, 0.1);
            transform: rotate(108deg) translate(0, -60px) scale(0.5, 0.1);
    border-radius: 0;
  }
  60% {
    -webkit-transform: rotate(108deg) translate(0, -80px) scale(0.5, 0.5) rotate(179deg);
            transform: rotate(108deg) translate(0, -80px) scale(0.5, 0.5) rotate(179deg);
    border-radius: 50%;
  }
  65% {
    -webkit-transform: rotate(108deg) translate(0, 0) scale(0.2, 0.2);
            transform: rotate(108deg) translate(0, 0) scale(0.2, 0.2);
    border-radius: 50%;
  }
  70% {
    -webkit-transform: rotate(108deg) translate(0, -100px) scale(0.25, 1);
            transform: rotate(108deg) translate(0, -100px) scale(0.25, 1);
    border-radius: 0;
  }
  75% {
    -webkit-transform: rotate(108deg) translate(0, -100px) scale(0.25, 0.25);
            transform: rotate(108deg) translate(0, -100px) scale(0.25, 0.25);
  }
  80% {
    -webkit-transform: rotate(108deg) translate(0, -50px) scale(0.5, 0.5);
            transform: rotate(108deg) translate(0, -50px) scale(0.5, 0.5);
  }
  85% {
    -webkit-transform: rotate(108deg) translate(0, -50px) scale(0.5, 0.5) rotate(179deg) translate(-50px, 50px);
            transform: rotate(108deg) translate(0, -50px) scale(0.5, 0.5) rotate(179deg) translate(-50px, 50px);
  }
  90% {
    -webkit-transform: rotate(108deg) translate(0, -30px) scale(0.5, 0.1);
            transform: rotate(108deg) translate(0, -30px) scale(0.5, 0.1);
  }
  95% {
    -webkit-transform: rotate(108deg) translate(0, -10px) scale(0.1, 0.5);
            transform: rotate(108deg) translate(0, -10px) scale(0.1, 0.5);
  }
  100% {
    -webkit-transform: rotate(108deg) translate(0, -300px) scale(0.1, 0.5);
            transform: rotate(108deg) translate(0, -300px) scale(0.1, 0.5);
  }
}

@keyframes line-4 {
  0% {
    -webkit-transform: rotate(0) translate(0, 0) scale(0.01);
            transform: rotate(0) translate(0, 0) scale(0.01);
  }
  5% {
    -webkit-transform: rotate(0) translate(0, 0) scale(1);
            transform: rotate(0) translate(0, 0) scale(1);
  }
  15% {
    -webkit-transform: rotate(108deg) translate(0, 0) scale(1);
            transform: rotate(108deg) translate(0, 0) scale(1);
  }
  20% {
    -webkit-transform: rotate(108deg) translate(0, -100px) scale(0.25, 1);
            transform: rotate(108deg) translate(0, -100px) scale(0.25, 1);
  }
  25% {
    -webkit-transform: rotate(108deg) translate(0, -100px) scale(0.25, 0.25) rotate(179deg);
            transform: rotate(108deg) translate(0, -100px) scale(0.25, 0.25) rotate(179deg);
  }
  30% {
    -webkit-transform: rotate(108deg) translate(0, -100px) scale(1, 0.25) rotate(179deg);
            transform: rotate(108deg) translate(0, -100px) scale(1, 0.25) rotate(179deg);
  }
  35% {
    -webkit-transform: rotate(108deg) translate(0, -60px) scale(1, 0.1);
            transform: rotate(108deg) translate(0, -60px) scale(1, 0.1);
  }
  40% {
    -webkit-transform: rotate(108deg) translate(0, -60px) scale(1, 0.1) translate(-30px, 0);
            transform: rotate(108deg) translate(0, -60px) scale(1, 0.1) translate(-30px, 0);
  }
  45% {
    -webkit-transform: rotate(108deg) translate(0, -60px) scale(1, 0.1) translate(30px, 0);
            transform: rotate(108deg) translate(0, -60px) scale(1, 0.1) translate(30px, 0);
  }
  50% {
    -webkit-transform: rotate(108deg) translate(0, -60px) scale(0.1, 1);
            transform: rotate(108deg) translate(0, -60px) scale(0.1, 1);
  }
  55% {
    -webkit-transform: rotate(108deg) translate(0, -60px) scale(0.5, 0.1);
            transform: rotate(108deg) translate(0, -60px) scale(0.5, 0.1);
    border-radius: 0;
  }
  60% {
    -webkit-transform: rotate(108deg) translate(0, -80px) scale(0.5, 0.5) rotate(179deg);
            transform: rotate(108deg) translate(0, -80px) scale(0.5, 0.5) rotate(179deg);
    border-radius: 50%;
  }
  65% {
    -webkit-transform: rotate(108deg) translate(0, 0) scale(0.2, 0.2);
            transform: rotate(108deg) translate(0, 0) scale(0.2, 0.2);
    border-radius: 50%;
  }
  70% {
    -webkit-transform: rotate(108deg) translate(0, -100px) scale(0.25, 1);
            transform: rotate(108deg) translate(0, -100px) scale(0.25, 1);
    border-radius: 0;
  }
  75% {
    -webkit-transform: rotate(108deg) translate(0, -100px) scale(0.25, 0.25);
            transform: rotate(108deg) translate(0, -100px) scale(0.25, 0.25);
  }
  80% {
    -webkit-transform: rotate(108deg) translate(0, -50px) scale(0.5, 0.5);
            transform: rotate(108deg) translate(0, -50px) scale(0.5, 0.5);
  }
  85% {
    -webkit-transform: rotate(108deg) translate(0, -50px) scale(0.5, 0.5) rotate(179deg) translate(-50px, 50px);
            transform: rotate(108deg) translate(0, -50px) scale(0.5, 0.5) rotate(179deg) translate(-50px, 50px);
  }
  90% {
    -webkit-transform: rotate(108deg) translate(0, -30px) scale(0.5, 0.1);
            transform: rotate(108deg) translate(0, -30px) scale(0.5, 0.1);
  }
  95% {
    -webkit-transform: rotate(108deg) translate(0, -10px) scale(0.1, 0.5);
            transform: rotate(108deg) translate(0, -10px) scale(0.1, 0.5);
  }
  100% {
    -webkit-transform: rotate(108deg) translate(0, -300px) scale(0.1, 0.5);
            transform: rotate(108deg) translate(0, -300px) scale(0.1, 0.5);
  }
}
.line-5 {
  -webkit-animation: line-5 10s ease-in-out infinite;
          animation: line-5 10s ease-in-out infinite;
}

@-webkit-keyframes line-5 {
  0% {
    -webkit-transform: rotate(0) translate(0, 0) scale(0.01);
            transform: rotate(0) translate(0, 0) scale(0.01);
  }
  5% {
    -webkit-transform: rotate(0) translate(0, 0) scale(1);
            transform: rotate(0) translate(0, 0) scale(1);
  }
  15% {
    -webkit-transform: rotate(144deg) translate(0, 0) scale(1);
            transform: rotate(144deg) translate(0, 0) scale(1);
  }
  20% {
    -webkit-transform: rotate(144deg) translate(0, -100px) scale(0.25, 1);
            transform: rotate(144deg) translate(0, -100px) scale(0.25, 1);
  }
  25% {
    -webkit-transform: rotate(144deg) translate(0, -100px) scale(0.25, 0.25) rotate(179deg);
            transform: rotate(144deg) translate(0, -100px) scale(0.25, 0.25) rotate(179deg);
  }
  30% {
    -webkit-transform: rotate(144deg) translate(0, -100px) scale(1, 0.25) rotate(179deg);
            transform: rotate(144deg) translate(0, -100px) scale(1, 0.25) rotate(179deg);
  }
  35% {
    -webkit-transform: rotate(144deg) translate(0, -60px) scale(1, 0.1);
            transform: rotate(144deg) translate(0, -60px) scale(1, 0.1);
  }
  40% {
    -webkit-transform: rotate(144deg) translate(0, -60px) scale(1, 0.1) translate(-30px, 0);
            transform: rotate(144deg) translate(0, -60px) scale(1, 0.1) translate(-30px, 0);
  }
  45% {
    -webkit-transform: rotate(144deg) translate(0, -60px) scale(1, 0.1) translate(30px, 0);
            transform: rotate(144deg) translate(0, -60px) scale(1, 0.1) translate(30px, 0);
  }
  50% {
    -webkit-transform: rotate(144deg) translate(0, -60px) scale(0.1, 1);
            transform: rotate(144deg) translate(0, -60px) scale(0.1, 1);
  }
  55% {
    -webkit-transform: rotate(144deg) translate(0, -60px) scale(0.5, 0.1);
            transform: rotate(144deg) translate(0, -60px) scale(0.5, 0.1);
    border-radius: 0;
  }
  60% {
    -webkit-transform: rotate(144deg) translate(0, -80px) scale(0.5, 0.5) rotate(179deg);
            transform: rotate(144deg) translate(0, -80px) scale(0.5, 0.5) rotate(179deg);
    border-radius: 50%;
  }
  65% {
    -webkit-transform: rotate(144deg) translate(0, 0) scale(0.2, 0.2);
            transform: rotate(144deg) translate(0, 0) scale(0.2, 0.2);
    border-radius: 50%;
  }
  70% {
    -webkit-transform: rotate(144deg) translate(0, -100px) scale(0.25, 1);
            transform: rotate(144deg) translate(0, -100px) scale(0.25, 1);
    border-radius: 0;
  }
  75% {
    -webkit-transform: rotate(144deg) translate(0, -100px) scale(0.25, 0.25);
            transform: rotate(144deg) translate(0, -100px) scale(0.25, 0.25);
  }
  80% {
    -webkit-transform: rotate(144deg) translate(0, -50px) scale(0.5, 0.5);
            transform: rotate(144deg) translate(0, -50px) scale(0.5, 0.5);
  }
  85% {
    -webkit-transform: rotate(144deg) translate(0, -50px) scale(0.5, 0.5) rotate(179deg) translate(-50px, 50px);
            transform: rotate(144deg) translate(0, -50px) scale(0.5, 0.5) rotate(179deg) translate(-50px, 50px);
  }
  90% {
    -webkit-transform: rotate(144deg) translate(0, -30px) scale(0.5, 0.1);
            transform: rotate(144deg) translate(0, -30px) scale(0.5, 0.1);
  }
  95% {
    -webkit-transform: rotate(144deg) translate(0, -10px) scale(0.1, 0.5);
            transform: rotate(144deg) translate(0, -10px) scale(0.1, 0.5);
  }
  100% {
    -webkit-transform: rotate(144deg) translate(0, -300px) scale(0.1, 0.5);
            transform: rotate(144deg) translate(0, -300px) scale(0.1, 0.5);
  }
}

@keyframes line-5 {
  0% {
    -webkit-transform: rotate(0) translate(0, 0) scale(0.01);
            transform: rotate(0) translate(0, 0) scale(0.01);
  }
  5% {
    -webkit-transform: rotate(0) translate(0, 0) scale(1);
            transform: rotate(0) translate(0, 0) scale(1);
  }
  15% {
    -webkit-transform: rotate(144deg) translate(0, 0) scale(1);
            transform: rotate(144deg) translate(0, 0) scale(1);
  }
  20% {
    -webkit-transform: rotate(144deg) translate(0, -100px) scale(0.25, 1);
            transform: rotate(144deg) translate(0, -100px) scale(0.25, 1);
  }
  25% {
    -webkit-transform: rotate(144deg) translate(0, -100px) scale(0.25, 0.25) rotate(179deg);
            transform: rotate(144deg) translate(0, -100px) scale(0.25, 0.25) rotate(179deg);
  }
  30% {
    -webkit-transform: rotate(144deg) translate(0, -100px) scale(1, 0.25) rotate(179deg);
            transform: rotate(144deg) translate(0, -100px) scale(1, 0.25) rotate(179deg);
  }
  35% {
    -webkit-transform: rotate(144deg) translate(0, -60px) scale(1, 0.1);
            transform: rotate(144deg) translate(0, -60px) scale(1, 0.1);
  }
  40% {
    -webkit-transform: rotate(144deg) translate(0, -60px) scale(1, 0.1) translate(-30px, 0);
            transform: rotate(144deg) translate(0, -60px) scale(1, 0.1) translate(-30px, 0);
  }
  45% {
    -webkit-transform: rotate(144deg) translate(0, -60px) scale(1, 0.1) translate(30px, 0);
            transform: rotate(144deg) translate(0, -60px) scale(1, 0.1) translate(30px, 0);
  }
  50% {
    -webkit-transform: rotate(144deg) translate(0, -60px) scale(0.1, 1);
            transform: rotate(144deg) translate(0, -60px) scale(0.1, 1);
  }
  55% {
    -webkit-transform: rotate(144deg) translate(0, -60px) scale(0.5, 0.1);
            transform: rotate(144deg) translate(0, -60px) scale(0.5, 0.1);
    border-radius: 0;
  }
  60% {
    -webkit-transform: rotate(144deg) translate(0, -80px) scale(0.5, 0.5) rotate(179deg);
            transform: rotate(144deg) translate(0, -80px) scale(0.5, 0.5) rotate(179deg);
    border-radius: 50%;
  }
  65% {
    -webkit-transform: rotate(144deg) translate(0, 0) scale(0.2, 0.2);
            transform: rotate(144deg) translate(0, 0) scale(0.2, 0.2);
    border-radius: 50%;
  }
  70% {
    -webkit-transform: rotate(144deg) translate(0, -100px) scale(0.25, 1);
            transform: rotate(144deg) translate(0, -100px) scale(0.25, 1);
    border-radius: 0;
  }
  75% {
    -webkit-transform: rotate(144deg) translate(0, -100px) scale(0.25, 0.25);
            transform: rotate(144deg) translate(0, -100px) scale(0.25, 0.25);
  }
  80% {
    -webkit-transform: rotate(144deg) translate(0, -50px) scale(0.5, 0.5);
            transform: rotate(144deg) translate(0, -50px) scale(0.5, 0.5);
  }
  85% {
    -webkit-transform: rotate(144deg) translate(0, -50px) scale(0.5, 0.5) rotate(179deg) translate(-50px, 50px);
            transform: rotate(144deg) translate(0, -50px) scale(0.5, 0.5) rotate(179deg) translate(-50px, 50px);
  }
  90% {
    -webkit-transform: rotate(144deg) translate(0, -30px) scale(0.5, 0.1);
            transform: rotate(144deg) translate(0, -30px) scale(0.5, 0.1);
  }
  95% {
    -webkit-transform: rotate(144deg) translate(0, -10px) scale(0.1, 0.5);
            transform: rotate(144deg) translate(0, -10px) scale(0.1, 0.5);
  }
  100% {
    -webkit-transform: rotate(144deg) translate(0, -300px) scale(0.1, 0.5);
            transform: rotate(144deg) translate(0, -300px) scale(0.1, 0.5);
  }
}
.line-6 {
  -webkit-animation: line-6 10s ease-in-out infinite;
          animation: line-6 10s ease-in-out infinite;
}

@-webkit-keyframes line-6 {
  0% {
    -webkit-transform: rotate(0) translate(0, 0) scale(0.01);
            transform: rotate(0) translate(0, 0) scale(0.01);
  }
  5% {
    -webkit-transform: rotate(0) translate(0, 0) scale(1);
            transform: rotate(0) translate(0, 0) scale(1);
  }
  15% {
    -webkit-transform: rotate(180deg) translate(0, 0) scale(1);
            transform: rotate(180deg) translate(0, 0) scale(1);
  }
  20% {
    -webkit-transform: rotate(180deg) translate(0, -100px) scale(0.25, 1);
            transform: rotate(180deg) translate(0, -100px) scale(0.25, 1);
  }
  25% {
    -webkit-transform: rotate(180deg) translate(0, -100px) scale(0.25, 0.25) rotate(179deg);
            transform: rotate(180deg) translate(0, -100px) scale(0.25, 0.25) rotate(179deg);
  }
  30% {
    -webkit-transform: rotate(180deg) translate(0, -100px) scale(1, 0.25) rotate(179deg);
            transform: rotate(180deg) translate(0, -100px) scale(1, 0.25) rotate(179deg);
  }
  35% {
    -webkit-transform: rotate(180deg) translate(0, -60px) scale(1, 0.1);
            transform: rotate(180deg) translate(0, -60px) scale(1, 0.1);
  }
  40% {
    -webkit-transform: rotate(180deg) translate(0, -60px) scale(1, 0.1) translate(-30px, 0);
            transform: rotate(180deg) translate(0, -60px) scale(1, 0.1) translate(-30px, 0);
  }
  45% {
    -webkit-transform: rotate(180deg) translate(0, -60px) scale(1, 0.1) translate(30px, 0);
            transform: rotate(180deg) translate(0, -60px) scale(1, 0.1) translate(30px, 0);
  }
  50% {
    -webkit-transform: rotate(180deg) translate(0, -60px) scale(0.1, 1);
            transform: rotate(180deg) translate(0, -60px) scale(0.1, 1);
  }
  55% {
    -webkit-transform: rotate(180deg) translate(0, -60px) scale(0.5, 0.1);
            transform: rotate(180deg) translate(0, -60px) scale(0.5, 0.1);
    border-radius: 0;
  }
  60% {
    -webkit-transform: rotate(180deg) translate(0, -80px) scale(0.5, 0.5) rotate(179deg);
            transform: rotate(180deg) translate(0, -80px) scale(0.5, 0.5) rotate(179deg);
    border-radius: 50%;
  }
  65% {
    -webkit-transform: rotate(180deg) translate(0, 0) scale(0.2, 0.2);
            transform: rotate(180deg) translate(0, 0) scale(0.2, 0.2);
    border-radius: 50%;
  }
  70% {
    -webkit-transform: rotate(180deg) translate(0, -100px) scale(0.25, 1);
            transform: rotate(180deg) translate(0, -100px) scale(0.25, 1);
    border-radius: 0;
  }
  75% {
    -webkit-transform: rotate(180deg) translate(0, -100px) scale(0.25, 0.25);
            transform: rotate(180deg) translate(0, -100px) scale(0.25, 0.25);
  }
  80% {
    -webkit-transform: rotate(180deg) translate(0, -50px) scale(0.5, 0.5);
            transform: rotate(180deg) translate(0, -50px) scale(0.5, 0.5);
  }
  85% {
    -webkit-transform: rotate(180deg) translate(0, -50px) scale(0.5, 0.5) rotate(179deg) translate(-50px, 50px);
            transform: rotate(180deg) translate(0, -50px) scale(0.5, 0.5) rotate(179deg) translate(-50px, 50px);
  }
  90% {
    -webkit-transform: rotate(180deg) translate(0, -30px) scale(0.5, 0.1);
            transform: rotate(180deg) translate(0, -30px) scale(0.5, 0.1);
  }
  95% {
    -webkit-transform: rotate(180deg) translate(0, -10px) scale(0.1, 0.5);
            transform: rotate(180deg) translate(0, -10px) scale(0.1, 0.5);
  }
  100% {
    -webkit-transform: rotate(180deg) translate(0, -300px) scale(0.1, 0.5);
            transform: rotate(180deg) translate(0, -300px) scale(0.1, 0.5);
  }
}

@keyframes line-6 {
  0% {
    -webkit-transform: rotate(0) translate(0, 0) scale(0.01);
            transform: rotate(0) translate(0, 0) scale(0.01);
  }
  5% {
    -webkit-transform: rotate(0) translate(0, 0) scale(1);
            transform: rotate(0) translate(0, 0) scale(1);
  }
  15% {
    -webkit-transform: rotate(180deg) translate(0, 0) scale(1);
            transform: rotate(180deg) translate(0, 0) scale(1);
  }
  20% {
    -webkit-transform: rotate(180deg) translate(0, -100px) scale(0.25, 1);
            transform: rotate(180deg) translate(0, -100px) scale(0.25, 1);
  }
  25% {
    -webkit-transform: rotate(180deg) translate(0, -100px) scale(0.25, 0.25) rotate(179deg);
            transform: rotate(180deg) translate(0, -100px) scale(0.25, 0.25) rotate(179deg);
  }
  30% {
    -webkit-transform: rotate(180deg) translate(0, -100px) scale(1, 0.25) rotate(179deg);
            transform: rotate(180deg) translate(0, -100px) scale(1, 0.25) rotate(179deg);
  }
  35% {
    -webkit-transform: rotate(180deg) translate(0, -60px) scale(1, 0.1);
            transform: rotate(180deg) translate(0, -60px) scale(1, 0.1);
  }
  40% {
    -webkit-transform: rotate(180deg) translate(0, -60px) scale(1, 0.1) translate(-30px, 0);
            transform: rotate(180deg) translate(0, -60px) scale(1, 0.1) translate(-30px, 0);
  }
  45% {
    -webkit-transform: rotate(180deg) translate(0, -60px) scale(1, 0.1) translate(30px, 0);
            transform: rotate(180deg) translate(0, -60px) scale(1, 0.1) translate(30px, 0);
  }
  50% {
    -webkit-transform: rotate(180deg) translate(0, -60px) scale(0.1, 1);
            transform: rotate(180deg) translate(0, -60px) scale(0.1, 1);
  }
  55% {
    -webkit-transform: rotate(180deg) translate(0, -60px) scale(0.5, 0.1);
            transform: rotate(180deg) translate(0, -60px) scale(0.5, 0.1);
    border-radius: 0;
  }
  60% {
    -webkit-transform: rotate(180deg) translate(0, -80px) scale(0.5, 0.5) rotate(179deg);
            transform: rotate(180deg) translate(0, -80px) scale(0.5, 0.5) rotate(179deg);
    border-radius: 50%;
  }
  65% {
    -webkit-transform: rotate(180deg) translate(0, 0) scale(0.2, 0.2);
            transform: rotate(180deg) translate(0, 0) scale(0.2, 0.2);
    border-radius: 50%;
  }
  70% {
    -webkit-transform: rotate(180deg) translate(0, -100px) scale(0.25, 1);
            transform: rotate(180deg) translate(0, -100px) scale(0.25, 1);
    border-radius: 0;
  }
  75% {
    -webkit-transform: rotate(180deg) translate(0, -100px) scale(0.25, 0.25);
            transform: rotate(180deg) translate(0, -100px) scale(0.25, 0.25);
  }
  80% {
    -webkit-transform: rotate(180deg) translate(0, -50px) scale(0.5, 0.5);
            transform: rotate(180deg) translate(0, -50px) scale(0.5, 0.5);
  }
  85% {
    -webkit-transform: rotate(180deg) translate(0, -50px) scale(0.5, 0.5) rotate(179deg) translate(-50px, 50px);
            transform: rotate(180deg) translate(0, -50px) scale(0.5, 0.5) rotate(179deg) translate(-50px, 50px);
  }
  90% {
    -webkit-transform: rotate(180deg) translate(0, -30px) scale(0.5, 0.1);
            transform: rotate(180deg) translate(0, -30px) scale(0.5, 0.1);
  }
  95% {
    -webkit-transform: rotate(180deg) translate(0, -10px) scale(0.1, 0.5);
            transform: rotate(180deg) translate(0, -10px) scale(0.1, 0.5);
  }
  100% {
    -webkit-transform: rotate(180deg) translate(0, -300px) scale(0.1, 0.5);
            transform: rotate(180deg) translate(0, -300px) scale(0.1, 0.5);
  }
}
.line-7 {
  -webkit-animation: line-7 10s ease-in-out infinite;
          animation: line-7 10s ease-in-out infinite;
}

@-webkit-keyframes line-7 {
  0% {
    -webkit-transform: rotate(0) translate(0, 0) scale(0.01);
            transform: rotate(0) translate(0, 0) scale(0.01);
  }
  5% {
    -webkit-transform: rotate(0) translate(0, 0) scale(1);
            transform: rotate(0) translate(0, 0) scale(1);
  }
  15% {
    -webkit-transform: rotate(216deg) translate(0, 0) scale(1);
            transform: rotate(216deg) translate(0, 0) scale(1);
  }
  20% {
    -webkit-transform: rotate(216deg) translate(0, -100px) scale(0.25, 1);
            transform: rotate(216deg) translate(0, -100px) scale(0.25, 1);
  }
  25% {
    -webkit-transform: rotate(216deg) translate(0, -100px) scale(0.25, 0.25) rotate(179deg);
            transform: rotate(216deg) translate(0, -100px) scale(0.25, 0.25) rotate(179deg);
  }
  30% {
    -webkit-transform: rotate(216deg) translate(0, -100px) scale(1, 0.25) rotate(179deg);
            transform: rotate(216deg) translate(0, -100px) scale(1, 0.25) rotate(179deg);
  }
  35% {
    -webkit-transform: rotate(216deg) translate(0, -60px) scale(1, 0.1);
            transform: rotate(216deg) translate(0, -60px) scale(1, 0.1);
  }
  40% {
    -webkit-transform: rotate(216deg) translate(0, -60px) scale(1, 0.1) translate(-30px, 0);
            transform: rotate(216deg) translate(0, -60px) scale(1, 0.1) translate(-30px, 0);
  }
  45% {
    -webkit-transform: rotate(216deg) translate(0, -60px) scale(1, 0.1) translate(30px, 0);
            transform: rotate(216deg) translate(0, -60px) scale(1, 0.1) translate(30px, 0);
  }
  50% {
    -webkit-transform: rotate(216deg) translate(0, -60px) scale(0.1, 1);
            transform: rotate(216deg) translate(0, -60px) scale(0.1, 1);
  }
  55% {
    -webkit-transform: rotate(216deg) translate(0, -60px) scale(0.5, 0.1);
            transform: rotate(216deg) translate(0, -60px) scale(0.5, 0.1);
    border-radius: 0;
  }
  60% {
    -webkit-transform: rotate(216deg) translate(0, -80px) scale(0.5, 0.5) rotate(179deg);
            transform: rotate(216deg) translate(0, -80px) scale(0.5, 0.5) rotate(179deg);
    border-radius: 50%;
  }
  65% {
    -webkit-transform: rotate(216deg) translate(0, 0) scale(0.2, 0.2);
            transform: rotate(216deg) translate(0, 0) scale(0.2, 0.2);
    border-radius: 50%;
  }
  70% {
    -webkit-transform: rotate(216deg) translate(0, -100px) scale(0.25, 1);
            transform: rotate(216deg) translate(0, -100px) scale(0.25, 1);
    border-radius: 0;
  }
  75% {
    -webkit-transform: rotate(216deg) translate(0, -100px) scale(0.25, 0.25);
            transform: rotate(216deg) translate(0, -100px) scale(0.25, 0.25);
  }
  80% {
    -webkit-transform: rotate(216deg) translate(0, -50px) scale(0.5, 0.5);
            transform: rotate(216deg) translate(0, -50px) scale(0.5, 0.5);
  }
  85% {
    -webkit-transform: rotate(216deg) translate(0, -50px) scale(0.5, 0.5) rotate(179deg) translate(-50px, 50px);
            transform: rotate(216deg) translate(0, -50px) scale(0.5, 0.5) rotate(179deg) translate(-50px, 50px);
  }
  90% {
    -webkit-transform: rotate(216deg) translate(0, -30px) scale(0.5, 0.1);
            transform: rotate(216deg) translate(0, -30px) scale(0.5, 0.1);
  }
  95% {
    -webkit-transform: rotate(216deg) translate(0, -10px) scale(0.1, 0.5);
            transform: rotate(216deg) translate(0, -10px) scale(0.1, 0.5);
  }
  100% {
    -webkit-transform: rotate(216deg) translate(0, -300px) scale(0.1, 0.5);
            transform: rotate(216deg) translate(0, -300px) scale(0.1, 0.5);
  }
}

@keyframes line-7 {
  0% {
    -webkit-transform: rotate(0) translate(0, 0) scale(0.01);
            transform: rotate(0) translate(0, 0) scale(0.01);
  }
  5% {
    -webkit-transform: rotate(0) translate(0, 0) scale(1);
            transform: rotate(0) translate(0, 0) scale(1);
  }
  15% {
    -webkit-transform: rotate(216deg) translate(0, 0) scale(1);
            transform: rotate(216deg) translate(0, 0) scale(1);
  }
  20% {
    -webkit-transform: rotate(216deg) translate(0, -100px) scale(0.25, 1);
            transform: rotate(216deg) translate(0, -100px) scale(0.25, 1);
  }
  25% {
    -webkit-transform: rotate(216deg) translate(0, -100px) scale(0.25, 0.25) rotate(179deg);
            transform: rotate(216deg) translate(0, -100px) scale(0.25, 0.25) rotate(179deg);
  }
  30% {
    -webkit-transform: rotate(216deg) translate(0, -100px) scale(1, 0.25) rotate(179deg);
            transform: rotate(216deg) translate(0, -100px) scale(1, 0.25) rotate(179deg);
  }
  35% {
    -webkit-transform: rotate(216deg) translate(0, -60px) scale(1, 0.1);
            transform: rotate(216deg) translate(0, -60px) scale(1, 0.1);
  }
  40% {
    -webkit-transform: rotate(216deg) translate(0, -60px) scale(1, 0.1) translate(-30px, 0);
            transform: rotate(216deg) translate(0, -60px) scale(1, 0.1) translate(-30px, 0);
  }
  45% {
    -webkit-transform: rotate(216deg) translate(0, -60px) scale(1, 0.1) translate(30px, 0);
            transform: rotate(216deg) translate(0, -60px) scale(1, 0.1) translate(30px, 0);
  }
  50% {
    -webkit-transform: rotate(216deg) translate(0, -60px) scale(0.1, 1);
            transform: rotate(216deg) translate(0, -60px) scale(0.1, 1);
  }
  55% {
    -webkit-transform: rotate(216deg) translate(0, -60px) scale(0.5, 0.1);
            transform: rotate(216deg) translate(0, -60px) scale(0.5, 0.1);
    border-radius: 0;
  }
  60% {
    -webkit-transform: rotate(216deg) translate(0, -80px) scale(0.5, 0.5) rotate(179deg);
            transform: rotate(216deg) translate(0, -80px) scale(0.5, 0.5) rotate(179deg);
    border-radius: 50%;
  }
  65% {
    -webkit-transform: rotate(216deg) translate(0, 0) scale(0.2, 0.2);
            transform: rotate(216deg) translate(0, 0) scale(0.2, 0.2);
    border-radius: 50%;
  }
  70% {
    -webkit-transform: rotate(216deg) translate(0, -100px) scale(0.25, 1);
            transform: rotate(216deg) translate(0, -100px) scale(0.25, 1);
    border-radius: 0;
  }
  75% {
    -webkit-transform: rotate(216deg) translate(0, -100px) scale(0.25, 0.25);
            transform: rotate(216deg) translate(0, -100px) scale(0.25, 0.25);
  }
  80% {
    -webkit-transform: rotate(216deg) translate(0, -50px) scale(0.5, 0.5);
            transform: rotate(216deg) translate(0, -50px) scale(0.5, 0.5);
  }
  85% {
    -webkit-transform: rotate(216deg) translate(0, -50px) scale(0.5, 0.5) rotate(179deg) translate(-50px, 50px);
            transform: rotate(216deg) translate(0, -50px) scale(0.5, 0.5) rotate(179deg) translate(-50px, 50px);
  }
  90% {
    -webkit-transform: rotate(216deg) translate(0, -30px) scale(0.5, 0.1);
            transform: rotate(216deg) translate(0, -30px) scale(0.5, 0.1);
  }
  95% {
    -webkit-transform: rotate(216deg) translate(0, -10px) scale(0.1, 0.5);
            transform: rotate(216deg) translate(0, -10px) scale(0.1, 0.5);
  }
  100% {
    -webkit-transform: rotate(216deg) translate(0, -300px) scale(0.1, 0.5);
            transform: rotate(216deg) translate(0, -300px) scale(0.1, 0.5);
  }
}
.line-8 {
  -webkit-animation: line-8 10s ease-in-out infinite;
          animation: line-8 10s ease-in-out infinite;
}

@-webkit-keyframes line-8 {
  0% {
    -webkit-transform: rotate(0) translate(0, 0) scale(0.01);
            transform: rotate(0) translate(0, 0) scale(0.01);
  }
  5% {
    -webkit-transform: rotate(0) translate(0, 0) scale(1);
            transform: rotate(0) translate(0, 0) scale(1);
  }
  15% {
    -webkit-transform: rotate(252deg) translate(0, 0) scale(1);
            transform: rotate(252deg) translate(0, 0) scale(1);
  }
  20% {
    -webkit-transform: rotate(252deg) translate(0, -100px) scale(0.25, 1);
            transform: rotate(252deg) translate(0, -100px) scale(0.25, 1);
  }
  25% {
    -webkit-transform: rotate(252deg) translate(0, -100px) scale(0.25, 0.25) rotate(179deg);
            transform: rotate(252deg) translate(0, -100px) scale(0.25, 0.25) rotate(179deg);
  }
  30% {
    -webkit-transform: rotate(252deg) translate(0, -100px) scale(1, 0.25) rotate(179deg);
            transform: rotate(252deg) translate(0, -100px) scale(1, 0.25) rotate(179deg);
  }
  35% {
    -webkit-transform: rotate(252deg) translate(0, -60px) scale(1, 0.1);
            transform: rotate(252deg) translate(0, -60px) scale(1, 0.1);
  }
  40% {
    -webkit-transform: rotate(252deg) translate(0, -60px) scale(1, 0.1) translate(-30px, 0);
            transform: rotate(252deg) translate(0, -60px) scale(1, 0.1) translate(-30px, 0);
  }
  45% {
    -webkit-transform: rotate(252deg) translate(0, -60px) scale(1, 0.1) translate(30px, 0);
            transform: rotate(252deg) translate(0, -60px) scale(1, 0.1) translate(30px, 0);
  }
  50% {
    -webkit-transform: rotate(252deg) translate(0, -60px) scale(0.1, 1);
            transform: rotate(252deg) translate(0, -60px) scale(0.1, 1);
  }
  55% {
    -webkit-transform: rotate(252deg) translate(0, -60px) scale(0.5, 0.1);
            transform: rotate(252deg) translate(0, -60px) scale(0.5, 0.1);
    border-radius: 0;
  }
  60% {
    -webkit-transform: rotate(252deg) translate(0, -80px) scale(0.5, 0.5) rotate(179deg);
            transform: rotate(252deg) translate(0, -80px) scale(0.5, 0.5) rotate(179deg);
    border-radius: 50%;
  }
  65% {
    -webkit-transform: rotate(252deg) translate(0, 0) scale(0.2, 0.2);
            transform: rotate(252deg) translate(0, 0) scale(0.2, 0.2);
    border-radius: 50%;
  }
  70% {
    -webkit-transform: rotate(252deg) translate(0, -100px) scale(0.25, 1);
            transform: rotate(252deg) translate(0, -100px) scale(0.25, 1);
    border-radius: 0;
  }
  75% {
    -webkit-transform: rotate(252deg) translate(0, -100px) scale(0.25, 0.25);
            transform: rotate(252deg) translate(0, -100px) scale(0.25, 0.25);
  }
  80% {
    -webkit-transform: rotate(252deg) translate(0, -50px) scale(0.5, 0.5);
            transform: rotate(252deg) translate(0, -50px) scale(0.5, 0.5);
  }
  85% {
    -webkit-transform: rotate(252deg) translate(0, -50px) scale(0.5, 0.5) rotate(179deg) translate(-50px, 50px);
            transform: rotate(252deg) translate(0, -50px) scale(0.5, 0.5) rotate(179deg) translate(-50px, 50px);
  }
  90% {
    -webkit-transform: rotate(252deg) translate(0, -30px) scale(0.5, 0.1);
            transform: rotate(252deg) translate(0, -30px) scale(0.5, 0.1);
  }
  95% {
    -webkit-transform: rotate(252deg) translate(0, -10px) scale(0.1, 0.5);
            transform: rotate(252deg) translate(0, -10px) scale(0.1, 0.5);
  }
  100% {
    -webkit-transform: rotate(252deg) translate(0, -300px) scale(0.1, 0.5);
            transform: rotate(252deg) translate(0, -300px) scale(0.1, 0.5);
  }
}

@keyframes line-8 {
  0% {
    -webkit-transform: rotate(0) translate(0, 0) scale(0.01);
            transform: rotate(0) translate(0, 0) scale(0.01);
  }
  5% {
    -webkit-transform: rotate(0) translate(0, 0) scale(1);
            transform: rotate(0) translate(0, 0) scale(1);
  }
  15% {
    -webkit-transform: rotate(252deg) translate(0, 0) scale(1);
            transform: rotate(252deg) translate(0, 0) scale(1);
  }
  20% {
    -webkit-transform: rotate(252deg) translate(0, -100px) scale(0.25, 1);
            transform: rotate(252deg) translate(0, -100px) scale(0.25, 1);
  }
  25% {
    -webkit-transform: rotate(252deg) translate(0, -100px) scale(0.25, 0.25) rotate(179deg);
            transform: rotate(252deg) translate(0, -100px) scale(0.25, 0.25) rotate(179deg);
  }
  30% {
    -webkit-transform: rotate(252deg) translate(0, -100px) scale(1, 0.25) rotate(179deg);
            transform: rotate(252deg) translate(0, -100px) scale(1, 0.25) rotate(179deg);
  }
  35% {
    -webkit-transform: rotate(252deg) translate(0, -60px) scale(1, 0.1);
            transform: rotate(252deg) translate(0, -60px) scale(1, 0.1);
  }
  40% {
    -webkit-transform: rotate(252deg) translate(0, -60px) scale(1, 0.1) translate(-30px, 0);
            transform: rotate(252deg) translate(0, -60px) scale(1, 0.1) translate(-30px, 0);
  }
  45% {
    -webkit-transform: rotate(252deg) translate(0, -60px) scale(1, 0.1) translate(30px, 0);
            transform: rotate(252deg) translate(0, -60px) scale(1, 0.1) translate(30px, 0);
  }
  50% {
    -webkit-transform: rotate(252deg) translate(0, -60px) scale(0.1, 1);
            transform: rotate(252deg) translate(0, -60px) scale(0.1, 1);
  }
  55% {
    -webkit-transform: rotate(252deg) translate(0, -60px) scale(0.5, 0.1);
            transform: rotate(252deg) translate(0, -60px) scale(0.5, 0.1);
    border-radius: 0;
  }
  60% {
    -webkit-transform: rotate(252deg) translate(0, -80px) scale(0.5, 0.5) rotate(179deg);
            transform: rotate(252deg) translate(0, -80px) scale(0.5, 0.5) rotate(179deg);
    border-radius: 50%;
  }
  65% {
    -webkit-transform: rotate(252deg) translate(0, 0) scale(0.2, 0.2);
            transform: rotate(252deg) translate(0, 0) scale(0.2, 0.2);
    border-radius: 50%;
  }
  70% {
    -webkit-transform: rotate(252deg) translate(0, -100px) scale(0.25, 1);
            transform: rotate(252deg) translate(0, -100px) scale(0.25, 1);
    border-radius: 0;
  }
  75% {
    -webkit-transform: rotate(252deg) translate(0, -100px) scale(0.25, 0.25);
            transform: rotate(252deg) translate(0, -100px) scale(0.25, 0.25);
  }
  80% {
    -webkit-transform: rotate(252deg) translate(0, -50px) scale(0.5, 0.5);
            transform: rotate(252deg) translate(0, -50px) scale(0.5, 0.5);
  }
  85% {
    -webkit-transform: rotate(252deg) translate(0, -50px) scale(0.5, 0.5) rotate(179deg) translate(-50px, 50px);
            transform: rotate(252deg) translate(0, -50px) scale(0.5, 0.5) rotate(179deg) translate(-50px, 50px);
  }
  90% {
    -webkit-transform: rotate(252deg) translate(0, -30px) scale(0.5, 0.1);
            transform: rotate(252deg) translate(0, -30px) scale(0.5, 0.1);
  }
  95% {
    -webkit-transform: rotate(252deg) translate(0, -10px) scale(0.1, 0.5);
            transform: rotate(252deg) translate(0, -10px) scale(0.1, 0.5);
  }
  100% {
    -webkit-transform: rotate(252deg) translate(0, -300px) scale(0.1, 0.5);
            transform: rotate(252deg) translate(0, -300px) scale(0.1, 0.5);
  }
}
.line-9 {
  -webkit-animation: line-9 10s ease-in-out infinite;
          animation: line-9 10s ease-in-out infinite;
}

@-webkit-keyframes line-9 {
  0% {
    -webkit-transform: rotate(0) translate(0, 0) scale(0.01);
            transform: rotate(0) translate(0, 0) scale(0.01);
  }
  5% {
    -webkit-transform: rotate(0) translate(0, 0) scale(1);
            transform: rotate(0) translate(0, 0) scale(1);
  }
  15% {
    -webkit-transform: rotate(288deg) translate(0, 0) scale(1);
            transform: rotate(288deg) translate(0, 0) scale(1);
  }
  20% {
    -webkit-transform: rotate(288deg) translate(0, -100px) scale(0.25, 1);
            transform: rotate(288deg) translate(0, -100px) scale(0.25, 1);
  }
  25% {
    -webkit-transform: rotate(288deg) translate(0, -100px) scale(0.25, 0.25) rotate(179deg);
            transform: rotate(288deg) translate(0, -100px) scale(0.25, 0.25) rotate(179deg);
  }
  30% {
    -webkit-transform: rotate(288deg) translate(0, -100px) scale(1, 0.25) rotate(179deg);
            transform: rotate(288deg) translate(0, -100px) scale(1, 0.25) rotate(179deg);
  }
  35% {
    -webkit-transform: rotate(288deg) translate(0, -60px) scale(1, 0.1);
            transform: rotate(288deg) translate(0, -60px) scale(1, 0.1);
  }
  40% {
    -webkit-transform: rotate(288deg) translate(0, -60px) scale(1, 0.1) translate(-30px, 0);
            transform: rotate(288deg) translate(0, -60px) scale(1, 0.1) translate(-30px, 0);
  }
  45% {
    -webkit-transform: rotate(288deg) translate(0, -60px) scale(1, 0.1) translate(30px, 0);
            transform: rotate(288deg) translate(0, -60px) scale(1, 0.1) translate(30px, 0);
  }
  50% {
    -webkit-transform: rotate(288deg) translate(0, -60px) scale(0.1, 1);
            transform: rotate(288deg) translate(0, -60px) scale(0.1, 1);
  }
  55% {
    -webkit-transform: rotate(288deg) translate(0, -60px) scale(0.5, 0.1);
            transform: rotate(288deg) translate(0, -60px) scale(0.5, 0.1);
    border-radius: 0;
  }
  60% {
    -webkit-transform: rotate(288deg) translate(0, -80px) scale(0.5, 0.5) rotate(179deg);
            transform: rotate(288deg) translate(0, -80px) scale(0.5, 0.5) rotate(179deg);
    border-radius: 50%;
  }
  65% {
    -webkit-transform: rotate(288deg) translate(0, 0) scale(0.2, 0.2);
            transform: rotate(288deg) translate(0, 0) scale(0.2, 0.2);
    border-radius: 50%;
  }
  70% {
    -webkit-transform: rotate(288deg) translate(0, -100px) scale(0.25, 1);
            transform: rotate(288deg) translate(0, -100px) scale(0.25, 1);
    border-radius: 0;
  }
  75% {
    -webkit-transform: rotate(288deg) translate(0, -100px) scale(0.25, 0.25);
            transform: rotate(288deg) translate(0, -100px) scale(0.25, 0.25);
  }
  80% {
    -webkit-transform: rotate(288deg) translate(0, -50px) scale(0.5, 0.5);
            transform: rotate(288deg) translate(0, -50px) scale(0.5, 0.5);
  }
  85% {
    -webkit-transform: rotate(288deg) translate(0, -50px) scale(0.5, 0.5) rotate(179deg) translate(-50px, 50px);
            transform: rotate(288deg) translate(0, -50px) scale(0.5, 0.5) rotate(179deg) translate(-50px, 50px);
  }
  90% {
    -webkit-transform: rotate(288deg) translate(0, -30px) scale(0.5, 0.1);
            transform: rotate(288deg) translate(0, -30px) scale(0.5, 0.1);
  }
  95% {
    -webkit-transform: rotate(288deg) translate(0, -10px) scale(0.1, 0.5);
            transform: rotate(288deg) translate(0, -10px) scale(0.1, 0.5);
  }
  100% {
    -webkit-transform: rotate(288deg) translate(0, -300px) scale(0.1, 0.5);
            transform: rotate(288deg) translate(0, -300px) scale(0.1, 0.5);
  }
}

@keyframes line-9 {
  0% {
    -webkit-transform: rotate(0) translate(0, 0) scale(0.01);
            transform: rotate(0) translate(0, 0) scale(0.01);
  }
  5% {
    -webkit-transform: rotate(0) translate(0, 0) scale(1);
            transform: rotate(0) translate(0, 0) scale(1);
  }
  15% {
    -webkit-transform: rotate(288deg) translate(0, 0) scale(1);
            transform: rotate(288deg) translate(0, 0) scale(1);
  }
  20% {
    -webkit-transform: rotate(288deg) translate(0, -100px) scale(0.25, 1);
            transform: rotate(288deg) translate(0, -100px) scale(0.25, 1);
  }
  25% {
    -webkit-transform: rotate(288deg) translate(0, -100px) scale(0.25, 0.25) rotate(179deg);
            transform: rotate(288deg) translate(0, -100px) scale(0.25, 0.25) rotate(179deg);
  }
  30% {
    -webkit-transform: rotate(288deg) translate(0, -100px) scale(1, 0.25) rotate(179deg);
            transform: rotate(288deg) translate(0, -100px) scale(1, 0.25) rotate(179deg);
  }
  35% {
    -webkit-transform: rotate(288deg) translate(0, -60px) scale(1, 0.1);
            transform: rotate(288deg) translate(0, -60px) scale(1, 0.1);
  }
  40% {
    -webkit-transform: rotate(288deg) translate(0, -60px) scale(1, 0.1) translate(-30px, 0);
            transform: rotate(288deg) translate(0, -60px) scale(1, 0.1) translate(-30px, 0);
  }
  45% {
    -webkit-transform: rotate(288deg) translate(0, -60px) scale(1, 0.1) translate(30px, 0);
            transform: rotate(288deg) translate(0, -60px) scale(1, 0.1) translate(30px, 0);
  }
  50% {
    -webkit-transform: rotate(288deg) translate(0, -60px) scale(0.1, 1);
            transform: rotate(288deg) translate(0, -60px) scale(0.1, 1);
  }
  55% {
    -webkit-transform: rotate(288deg) translate(0, -60px) scale(0.5, 0.1);
            transform: rotate(288deg) translate(0, -60px) scale(0.5, 0.1);
    border-radius: 0;
  }
  60% {
    -webkit-transform: rotate(288deg) translate(0, -80px) scale(0.5, 0.5) rotate(179deg);
            transform: rotate(288deg) translate(0, -80px) scale(0.5, 0.5) rotate(179deg);
    border-radius: 50%;
  }
  65% {
    -webkit-transform: rotate(288deg) translate(0, 0) scale(0.2, 0.2);
            transform: rotate(288deg) translate(0, 0) scale(0.2, 0.2);
    border-radius: 50%;
  }
  70% {
    -webkit-transform: rotate(288deg) translate(0, -100px) scale(0.25, 1);
            transform: rotate(288deg) translate(0, -100px) scale(0.25, 1);
    border-radius: 0;
  }
  75% {
    -webkit-transform: rotate(288deg) translate(0, -100px) scale(0.25, 0.25);
            transform: rotate(288deg) translate(0, -100px) scale(0.25, 0.25);
  }
  80% {
    -webkit-transform: rotate(288deg) translate(0, -50px) scale(0.5, 0.5);
            transform: rotate(288deg) translate(0, -50px) scale(0.5, 0.5);
  }
  85% {
    -webkit-transform: rotate(288deg) translate(0, -50px) scale(0.5, 0.5) rotate(179deg) translate(-50px, 50px);
            transform: rotate(288deg) translate(0, -50px) scale(0.5, 0.5) rotate(179deg) translate(-50px, 50px);
  }
  90% {
    -webkit-transform: rotate(288deg) translate(0, -30px) scale(0.5, 0.1);
            transform: rotate(288deg) translate(0, -30px) scale(0.5, 0.1);
  }
  95% {
    -webkit-transform: rotate(288deg) translate(0, -10px) scale(0.1, 0.5);
            transform: rotate(288deg) translate(0, -10px) scale(0.1, 0.5);
  }
  100% {
    -webkit-transform: rotate(288deg) translate(0, -300px) scale(0.1, 0.5);
            transform: rotate(288deg) translate(0, -300px) scale(0.1, 0.5);
  }
}
.line-10 {
  -webkit-animation: line-10 10s ease-in-out infinite;
          animation: line-10 10s ease-in-out infinite;
}

@-webkit-keyframes line-10 {
  0% {
    -webkit-transform: rotate(0) translate(0, 0) scale(0.01);
            transform: rotate(0) translate(0, 0) scale(0.01);
  }
  5% {
    -webkit-transform: rotate(0) translate(0, 0) scale(1);
            transform: rotate(0) translate(0, 0) scale(1);
  }
  15% {
    -webkit-transform: rotate(324deg) translate(0, 0) scale(1);
            transform: rotate(324deg) translate(0, 0) scale(1);
  }
  20% {
    -webkit-transform: rotate(324deg) translate(0, -100px) scale(0.25, 1);
            transform: rotate(324deg) translate(0, -100px) scale(0.25, 1);
  }
  25% {
    -webkit-transform: rotate(324deg) translate(0, -100px) scale(0.25, 0.25) rotate(179deg);
            transform: rotate(324deg) translate(0, -100px) scale(0.25, 0.25) rotate(179deg);
  }
  30% {
    -webkit-transform: rotate(324deg) translate(0, -100px) scale(1, 0.25) rotate(179deg);
            transform: rotate(324deg) translate(0, -100px) scale(1, 0.25) rotate(179deg);
  }
  35% {
    -webkit-transform: rotate(324deg) translate(0, -60px) scale(1, 0.1);
            transform: rotate(324deg) translate(0, -60px) scale(1, 0.1);
  }
  40% {
    -webkit-transform: rotate(324deg) translate(0, -60px) scale(1, 0.1) translate(-30px, 0);
            transform: rotate(324deg) translate(0, -60px) scale(1, 0.1) translate(-30px, 0);
  }
  45% {
    -webkit-transform: rotate(324deg) translate(0, -60px) scale(1, 0.1) translate(30px, 0);
            transform: rotate(324deg) translate(0, -60px) scale(1, 0.1) translate(30px, 0);
  }
  50% {
    -webkit-transform: rotate(324deg) translate(0, -60px) scale(0.1, 1);
            transform: rotate(324deg) translate(0, -60px) scale(0.1, 1);
  }
  55% {
    -webkit-transform: rotate(324deg) translate(0, -60px) scale(0.5, 0.1);
            transform: rotate(324deg) translate(0, -60px) scale(0.5, 0.1);
    border-radius: 0;
  }
  60% {
    -webkit-transform: rotate(324deg) translate(0, -80px) scale(0.5, 0.5) rotate(179deg);
            transform: rotate(324deg) translate(0, -80px) scale(0.5, 0.5) rotate(179deg);
    border-radius: 50%;
  }
  65% {
    -webkit-transform: rotate(324deg) translate(0, 0) scale(0.2, 0.2);
            transform: rotate(324deg) translate(0, 0) scale(0.2, 0.2);
    border-radius: 50%;
  }
  70% {
    -webkit-transform: rotate(324deg) translate(0, -100px) scale(0.25, 1);
            transform: rotate(324deg) translate(0, -100px) scale(0.25, 1);
    border-radius: 0;
  }
  75% {
    -webkit-transform: rotate(324deg) translate(0, -100px) scale(0.25, 0.25);
            transform: rotate(324deg) translate(0, -100px) scale(0.25, 0.25);
  }
  80% {
    -webkit-transform: rotate(324deg) translate(0, -50px) scale(0.5, 0.5);
            transform: rotate(324deg) translate(0, -50px) scale(0.5, 0.5);
  }
  85% {
    -webkit-transform: rotate(324deg) translate(0, -50px) scale(0.5, 0.5) rotate(179deg) translate(-50px, 50px);
            transform: rotate(324deg) translate(0, -50px) scale(0.5, 0.5) rotate(179deg) translate(-50px, 50px);
  }
  90% {
    -webkit-transform: rotate(324deg) translate(0, -30px) scale(0.5, 0.1);
            transform: rotate(324deg) translate(0, -30px) scale(0.5, 0.1);
  }
  95% {
    -webkit-transform: rotate(324deg) translate(0, -10px) scale(0.1, 0.5);
            transform: rotate(324deg) translate(0, -10px) scale(0.1, 0.5);
  }
  100% {
    -webkit-transform: rotate(324deg) translate(0, -300px) scale(0.1, 0.5);
            transform: rotate(324deg) translate(0, -300px) scale(0.1, 0.5);
  }
}

@keyframes line-10 {
  0% {
    -webkit-transform: rotate(0) translate(0, 0) scale(0.01);
            transform: rotate(0) translate(0, 0) scale(0.01);
  }
  5% {
    -webkit-transform: rotate(0) translate(0, 0) scale(1);
            transform: rotate(0) translate(0, 0) scale(1);
  }
  15% {
    -webkit-transform: rotate(324deg) translate(0, 0) scale(1);
            transform: rotate(324deg) translate(0, 0) scale(1);
  }
  20% {
    -webkit-transform: rotate(324deg) translate(0, -100px) scale(0.25, 1);
            transform: rotate(324deg) translate(0, -100px) scale(0.25, 1);
  }
  25% {
    -webkit-transform: rotate(324deg) translate(0, -100px) scale(0.25, 0.25) rotate(179deg);
            transform: rotate(324deg) translate(0, -100px) scale(0.25, 0.25) rotate(179deg);
  }
  30% {
    -webkit-transform: rotate(324deg) translate(0, -100px) scale(1, 0.25) rotate(179deg);
            transform: rotate(324deg) translate(0, -100px) scale(1, 0.25) rotate(179deg);
  }
  35% {
    -webkit-transform: rotate(324deg) translate(0, -60px) scale(1, 0.1);
            transform: rotate(324deg) translate(0, -60px) scale(1, 0.1);
  }
  40% {
    -webkit-transform: rotate(324deg) translate(0, -60px) scale(1, 0.1) translate(-30px, 0);
            transform: rotate(324deg) translate(0, -60px) scale(1, 0.1) translate(-30px, 0);
  }
  45% {
    -webkit-transform: rotate(324deg) translate(0, -60px) scale(1, 0.1) translate(30px, 0);
            transform: rotate(324deg) translate(0, -60px) scale(1, 0.1) translate(30px, 0);
  }
  50% {
    -webkit-transform: rotate(324deg) translate(0, -60px) scale(0.1, 1);
            transform: rotate(324deg) translate(0, -60px) scale(0.1, 1);
  }
  55% {
    -webkit-transform: rotate(324deg) translate(0, -60px) scale(0.5, 0.1);
            transform: rotate(324deg) translate(0, -60px) scale(0.5, 0.1);
    border-radius: 0;
  }
  60% {
    -webkit-transform: rotate(324deg) translate(0, -80px) scale(0.5, 0.5) rotate(179deg);
            transform: rotate(324deg) translate(0, -80px) scale(0.5, 0.5) rotate(179deg);
    border-radius: 50%;
  }
  65% {
    -webkit-transform: rotate(324deg) translate(0, 0) scale(0.2, 0.2);
            transform: rotate(324deg) translate(0, 0) scale(0.2, 0.2);
    border-radius: 50%;
  }
  70% {
    -webkit-transform: rotate(324deg) translate(0, -100px) scale(0.25, 1);
            transform: rotate(324deg) translate(0, -100px) scale(0.25, 1);
    border-radius: 0;
  }
  75% {
    -webkit-transform: rotate(324deg) translate(0, -100px) scale(0.25, 0.25);
            transform: rotate(324deg) translate(0, -100px) scale(0.25, 0.25);
  }
  80% {
    -webkit-transform: rotate(324deg) translate(0, -350px) scale(0.5, 0.5);
            transform: rotate(324deg) translate(0, -350px) scale(0.5, 0.5);
  }
  85% {
    -webkit-transform: rotate(344deg) translate(0, -150px) scale(0.5, 0.5) rotate(179deg) translate(-150px, 150px);
            transform: rotate(344deg) translate(0, -150px) scale(0.5, 0.5) rotate(179deg) translate(-150px, 150px);
  }
  90% {
    -webkit-transform: rotate(324deg) translate(0, -30px) scale(0.5, 0.1);
            transform: rotate(324deg) translate(0, -30px) scale(0.5, 0.1);
  }
  95% {
    -webkit-transform: rotate(324deg) translate(0, -10px) scale(0.1, 0.5);
            transform: rotate(324deg) translate(0, -10px) scale(0.1, 0.5);
  }
  100% {
    -webkit-transform: rotate(324deg) translate(0, -300px) scale(0.1, 0.5);
            transform: rotate(324deg) translate(0, -300px) scale(0.1, 0.5);
  }
}

body::before {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
   background: #24006B;
  -webkit-animation: overlay infinite 12s;
          animation: overlay infinite 12s;
  content: '';
}
@-webkit-keyframes transform {
  0%, 16% {
    opacity: 0;
    -webkit-transform: translateY(-50%) rotateX(-90deg);
            transform: translateY(-50%) rotateX(-90deg);
  }
  18% {
    opacity: 1;
  }
  40% {
    opacity: 1;
    -webkit-transform: translateY(-50%) rotateX(0deg);
            transform: translateY(-50%) rotateX(0deg);
  }
}
@keyframes transform {
  0%, 16% {
    opacity: 0;
    -webkit-transform: translateY(-50%) rotateX(-90deg);
            transform: translateY(-50%) rotateX(-90deg);
  }
  18% {
    opacity: 1;
  }
  40% {
    opacity: 1;
    -webkit-transform: translateY(-50%) rotateX(0deg);
            transform: translateY(-50%) rotateX(0deg);
  }
}
@-webkit-keyframes overlay {
  0% {
    opacity: .5;
  }
  18%, 81% {
    opacity: 0;
  }
  92%, 100% {
    opacity: .5;
  }
}
@keyframes overlay {
  0% {
    opacity: .5;
  }
  18%, 81% {
    opacity: 0;
  }
  92%, 100% {
    opacity: .5;
  }
}
@-webkit-keyframes opacity {
  0%, 4% {
    opacity: 0;
  }
  18%, 81% {
    opacity: 1;
  }
  92%, 100% {
    opacity: 0;
  }
}
@keyframes opacity {
  0%, 4% {
    opacity: 0;
  }
  18%, 81% {
    opacity: 1;
  }
  92%, 100% {
    opacity: 0;
  }
}/*end*/
img {
  position: absolute;
  top:137px;
  left: 575px;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid #24006B;
  width: 211px;
  height: 212px;
  z-index: 3;
  opacity: 1;
  animation: photo-ani 20s forwards;
}
/* Keyframes */
@keyframes line-ani {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes photo-ani {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/*end*/
.loader-text,
.loader-text::before,
.loader {
  position: absolute;
  top: 0;
  bottom:59px;
  left:-5px;
  right:-5px;
  margin: auto;
  width: 230px;
  height:230px;
}
.loader {
  border-color: #bd313b transparent;
  border-style: solid;
  border-width: 4px;
  border-radius: 50%;
  transform: rotate(0deg);
  animation: spin 2000ms linear infinite, color 2000ms linear infinite;
}
.loader-text::before {
  text-align: center;
  line-height: 200px;
  content: 'Cibeber Cimahi';
  display: block;
  position: absolute;
  color: #1919B3;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes color {
  0% {
    border-color: #bd313b transparent;
  }
  25% {
    border-color: #6d31bd transparent;
  }
  50% {
    border-color: #31bdb3 transparent;
  }
  75% {
    border-color: #81bd31 transparent;
  }
  100% {
    border-color: #bd313b transparent;
  }
}

#gif:before {
  content: " ";
  position: absolute;
  height:10px;
  width:10px;
  border-radius:50%;
  top: -155px;
  left: 420px;
  background:green;
  border: 5px solid yellow;
  box-shadow:
    0 355px 0 -5px black,
    0 355px 0 0px orange;
  -webkit-animation: reverseRotate 13s linear infinite;
  animation: reverseRotate 18s linear infinite;
}
#gif:after {
  content: " ";
  position: absolute;
  height:10px;
  width:10px;
  border-radius:50%;
  top: -655px;
  left:920px;
  background:red;
  border:5px solid #555;
  box-shadow:
    0 355px 0 -5px green,
    0 355px 0 0px yellow;
  -webkit-animation: reverseRotate 23s linear infinite;
  animation: reverseRotate 66s linear infinite;
}

@keyframes rotate {
  0%   { transform: rotate(  0deg); }  
  10%, 15%, 35%, 40%, 60%, 65%, 85%, 90%  { 
    background: black; 
    box-shadow:
      178px 0 0 -25px black,
      178px 0 0 -20px blue,
      -178px 0 0 -25px red,
      -178px 0 0 -20px yellow, 
      0 0 0 20px pink,
      0 0 0 30px white,
      0 0 0 130px black,
      0 0 0 135px green;
  }
  12.5%, 37.5%, 62.5%, 87.5% { 
    background: #f00; 
    box-shadow:
      178px 0 0 -25px blue,
      178px 0 0 -20px green,
      -178px 0 0 -25px blue,
      -178px 0 0 -20px yellow, 
      0 0 0 20px black,
      0 0 0 30px orange,
      0 0 0 130px black,
      0 0 0 135px orange;
  }    
  100% { transform: rotate(360deg); }
}
@keyframes reverseRotate {
  0%   { transform: translateY(378px) rotate(0deg) translateY(-1120px) rotate(0deg); }  
  10%, 15%, 35%, 40%, 60%, 65%, 85%, 90%  { 
    background: black; box-shadow: 0 355px 0 -5px black, 0 355px 0 0px white; 
  }
  12.5%, 37.5%, 62.5%, 87.5% { 
    background: white; box-shadow: 0 355px 0 -5px white, 0 355px 0 0px white; 
  }    
  100% { transform: translateY(378px) rotate(-720deg) translateY(-178px) rotate(0deg); }
}
@keyframes segmentRotate {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(33000deg); }
}


@-webkit-keyframes rotate {
  0%   { -webkit-transform: rotate(  0deg); }  
  10%, 15%, 35%, 40%, 60%, 65%, 85%, 90%  { 
    background: black; 
    box-shadow:
      178px 0 0 -25px yellow,
      178px 0 0 -20px #f00,
      -178px 0 0 -25px green,
      -178px 0 0 -20px #ff0, 
      0 0 0 20px black,
      0 0 0 30px #f00,
      0 0 0 130px black,
      0 0 0 135px orange;
  }
  12.5%, 37.5%, 62.5%, 87.5% { 
    background: blue; 
    box-shadow:
      178px 0 0 -25px green,
      178px 0 0 -20px blue,
      -178px 0 0 -25px orange,
      -178px 0 0 -20px blue, 
      0 0 0 20px black,
      0 0 0 30px yellow,
      0 0 0 130px black,
      0 0 0 135px yellow,
  }    
  100% { -webkit-transform: rotate(360deg); }
}
@-webkit-keyframes reverseRotate {
  0%   { -webkit-transform: translateY(178px) rotate(0deg) translateY(-178px) rotate(0deg); }  
  10%, 15%, 35%, 40%, 60%, 65%, 85%, 90%  { 
    background: black; box-shadow: 0 355px 0 -5px black, 0 355px 0 0px white; 
  }
  12.5%, 37.5%, 62.5%, 87.5% { 
    background: white; box-shadow: 0 355px 0 -5px white, 0 355px 0 0px white; 
  }    
  100% { -webkit-transform: translateY(178px) rotate(-720deg) translateY(-178px) rotate(0deg); }
}
@-webkit-keyframes segmentRotate {
  0%   { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(-32000deg); }
}
</style> 

<div id='gif'>
</div>
  <div class="center">
    <div class="line line-1"></div>
    <div class="line line-2"></div>
    <div class="line line-3"></div>
    <div class="line line-4"></div>
    <div class="line line-5"></div>
    <div class="line line-6"></div>
    <div class="line line-7"></div>
    <div class="line line-8"></div>
    <div class="line line-9"></div>
    <div class="line line-10"></div>
  </div>

<header>
<a href="http://sample-mys2010.blogspot.co.id/2016/07/lines-animation.html" target="_blank" title="Mari Belajar">
<h2>
<span style="color:orange; font-size: 10pt">LET'S STUDY</a>  </h2>
</a>  
</div>
</header>
<div id="Mys2010">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBS0CarXAaHLTorhnE9BNjfjZeF8zXIICpk6wG7R-WfpXubwQqpAiJ28TrjzFYkDiZRAUcdS3jit1lJg2JQ-wq9fGfMsuPAAFVComGf71cUiQVnc4bBy6zu2R2vY8pNUabaOiUrH4M3Ar_/s1600-r/Samantha-mys2010.jpg"  />
</div>
<div class="loader-2">
<div class="loader-text">
<div class="loader">
</div>

<div class="ap" id="ap">
<div align="center">
<div id="dibawah">
<span style="font-family: arial ; font-size: 12px; color:cyan;"> EDITED BY. <a href="https://Link Download"target="_blank" title="Mari Belajar"><span style="color: #FFFF00; font-size: 14px;">&nbsp; M - 2010 </a>&nbsp; DOWNLOAD </a> 
</div>
<div id="posisi">
<span style="font-family: arial ; font-size: 12px; color:cyan;"> COPYRIGHT <a href="http://codepen.io/Myscript2010" target="_blank" title="Mari Belajar"><span style="color: #FFFF00; font-size: 14px;">&nbsp; &copy; - 2016 </a>&nbsp; CODEPEN </a> 
</div>
<h2>
<audio id="mys2010" src="https://sites.google.com/site/gg1cover/music/Samantha-Mys2010s.mp3"controls="controls"></audio></h2>
</a></div>
</div>

<ul class="mys2010-list">
<script src='//assets.codepen.io/assets/common/stopExecutionOnTimeout.js?t=1'>
</script>   
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'>
</script>  
<link rel='stylesheet prefetch' href='http://cdn.jsdelivr.net/mediaelement/2.13.1/mediaelementplayer.min.css'>   
<script src='http://cdn.jsdelivr.net/mediaelement/2.13.1/mediaelement-and-player.min.js'>
</script> 
<script src="//assets.codepen.io/assets/common/stopExecutionOnTimeout-f961f59a28ef4fd551736b43f94620b5.js"></script>      

<script>
      $(function () {
$('video,audio').mediaelementplayer({
success: function (mediaElement, domObject) {
var audio_src = $('li.current').attr('data-url');
mediaElement.setSrc(audio_src);
mediaElement.addEventListener('ended', function (e) {
mys2010PlayNext(e.target);
}, false);
},
keyActions: []
});
$('.mys2010-list li').click(function () {
$(this).addClass('current').siblings().removeClass('current');
var audio_src = $(this).attr('data-url');
$('audio#mys2010:first').each(function () {
this.player.pause();
this.player.setSrc(audio_src);
this.player.play();
});
});
});
function mys2010PlayNext(currentPlayer) {
if ($('.mys2010-list li.current').length > 0) {
var current_item = $('.mys2010-list li.current:first');
var audio_src = $(current_item).next().text();
$(current_item).next().addClass('current').siblings().removeClass('current');
console.log('if ' + audio_src);
} else {
var current_item = $('.mys2010-list li:first');
var audio_src = $(current_item).next().text();
$(current_item).next().addClass('current').siblings().removeClass('current');
console.log('elseif ' + audio_src);
}
if ($(current_item).is(':last-child')) {
$(current_item).removeClass('current');
} else {
currentPlayer.setSrc(audio_src);
currentPlayer.play();
}}    
</script>

Audio Code by. Jereme Causing
Lines Animation Code by. Matthias Martin

Design Code is Edited by. Mys2010 on Codepen

DEMOSHOW

If you want to directly copy  and  paste you canDownload Here Lines Animation  

Category: Lines Animation