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.
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
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;"> M - 2010 </a> 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;"> © - 2016 </a> 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>
Design Code is Edited by.
Mys2010 on Codepen
If you want to directly copy and paste you canDownload Here Lines Animation
