ITMO University logo animation
HTML
<div class="content">
<div class="logo">
<!-- Row 1 -->
<div class="circle circle_small"></div>
<div class="circle circle_small"></div>
<!-- Row 2 -->
<div class="circle circle_small"></div>
<div class="circle circle_big"></div>
<div class="circle circle_medium"></div>
<!-- Row 3 -->
<div class="circle circle_small"></div>
<div class="circle circle_big"></div>
<div class="circle circle_big"></div>
<div class="circle circle_small"></div>
<!-- Row 4 -->
<div class="circle circle_small"></div>
<div class="circle circle_big"></div>
<div class="circle circle_big"></div>
<div class="circle circle_medium"></div>
<!-- Row 5 -->
<div class="circle circle_medium"></div>
<div class="circle circle_big"></div>
<div class="circle circle_medium"></div>
<div class="circle circle_small"></div>
<!-- Row 6 -->
<div class="circle circle_small"></div>
<div class="circle circle_big"></div>
<div class="circle circle_big"></div>
<div class="circle circle_medium"></div>
<!-- Row 7 -->
<div class="circle circle_big"></div>
<div class="circle circle_big"></div>
<div class="circle circle_medium"></div>
<!-- Row 8 -->
<div class="circle circle_medium"></div>
<div class="circle circle_big"></div>
<div class="circle circle_medium"></div>
<div class="circle circle_small"></div>
<!-- Row 9 -->
<div class="circle circle_small"></div>
<div class="circle circle_big"></div>
<div class="circle circle_medium"></div>
<div class="circle circle_small"></div>
<!-- Row 10 -->
<div class="circle circle_small"></div>
<div class="circle circle_small"></div>
<div class="text">ITMO University</div>
<div class="underline"></div>
</div>
</div>
CSS
@font-face {
font-family: ALSSchlangesansBold;
src: url(http://www.age21.ro/vendor/site/_template/profructta/css/fonts/ALSSchlangesans-Bold.otf);
}
body {
margin: 0; padding: 0;
background: rgba(29,60,185,0.1);
font-family: ALSSchlangesansBold, arial;
}
.content {
padding: 150px 0 0 0;
border-top: 10px solid #1d3cb9;
}
.logo {
width: 400px;
height: 240px;
margin: 0 auto;
position: relative;
}
.logo .text {
position: absolute;
bottom: 0;
left: 31px;
width: 400px;
font-size: 37px;
cursor: pointer;
color: transparent;
-webkit-animation: text_color 1s;
-moz-animation: text_color 1s;
-o-animation: text_color 1s;
animation: text_color 1s;
-webkit-animation-delay: 6.0s;
-moz-animation-delay: 6.0s;
-o-animation-delay: 6.0s;
animation-delay: 6.0s;
-webkit-animation-duration: 6.0s;
-moz-animation-duration: 6.0s;
-o-animation-duration: 6.0s;
animation-duration: 6.0s;
-webkit-animation-iteration-count: 1;
-moz-animation-iteration-count: 1;
-o-animation-iteration-count: 1;
animation-iteration-count: 1;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.logo .underline {
position: absolute;
bottom: 2px;
left: 34px;
width: 0px;
height: 3px;
cursor: pointer;
-webkit-animation: text_border 1s;
-moz-animation: text_border 1s;
-o-animation: text_border 1s;
animation: text_border 1s;
-webkit-animation-delay: 6.0s;
-moz-animation-delay: 6.0s;
-o-animation-delay: 6.0s;
animation-delay: 6.0s;
-webkit-animation-duration: 6.0s;
-moz-animation-duration: 6.0s;
-o-animation-duration: 6.0s;
animation-duration: 6.0s;
-webkit-animation-iteration-count: 1;
-moz-animation-iteration-count: 1;
-o-animation-iteration-count: 1;
animation-iteration-count: 1;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.circle {
margin: 10px auto;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
position: absolute;
background: transparent;
-webkit-animation: main_color 1s infinite ease;
-moz-animation: main_color 1s infinite ease;
-o-animation: main_color 1s infinite ease;
animation: main_color 1s infinite ease;
cursor: pointer;
}
.circle_small {
width: 10px;
height: 10px;
}
.circle_medium {
width: 15px;
height: 15px;
}
.circle_big {
width: 23px;
height: 23px;
}
.circle:nth-child(1) {
top:65px;
-webkit-animation-delay: 0.2s;
-moz-animation-delay: 0.2s;
-o-animation-delay: 0.2s;
animation-delay: 0.2s;
-webkit-animation-duration: 1.2s;
-moz-animation-duration: 1.2s;
-o-animation-duration: 1.2s;
animation-duration: 1.2s;
}
.circle:nth-child(2) {
top: 97px;
-webkit-animation-delay: 2.2s;
-moz-animation-delay: 2.2s;
-o-animation-delay: 2.2s;
animation-delay: 2.2s;
-webkit-animation-duration: 2.2s;
-moz-animation-duration: 2.2s;
-o-animation-duration: 2.2s;
animation-duration: 2.2s;
}
/* 2 */
.circle:nth-child(3) {
top: 16px;
left: 33px;
-webkit-animation-delay: 0.4s;
-moz-animation-delay: 0.4s;
-o-animation-delay: 0.4s;
animation-delay: 0.4s;
-webkit-animation-duration: 0.4s;
-moz-animation-duration: 0.4s;
-o-animation-duration: 0.4s;
animation-duration: 0.4s;
}
.circle:nth-child(4) {
top: 42px;
left: 26px;
-webkit-animation: one_color 1s infinite ease;
-moz-animation: one_color 1s infinite ease;
-o-animation: one_color 1s infinite ease;
animation: one_color 1s infinite ease;
-webkit-animation-delay: 1.5s;
-moz-animation-delay: 1.5s;
-o-animation-delay: 1.5s;
animation-delay: 1.5s;
-webkit-animation-duration: 2.5s;
-moz-animation-duration: 2.5s;
-o-animation-duration: 2.5s;
animation-duration: 2.5s;
}
.circle:nth-child(5) {
top: 79px;
left: 30px;
-webkit-animation-delay: 2.4s;
-moz-animation-delay: 2.4s;
-o-animation-delay: 2.4s;
animation-delay: 2.4s;
-webkit-animation-duration: 2.4s;
-moz-animation-duration: 2.4s;
-o-animation-duration: 2.4s;
animation-duration: 2.4s;
}
/* 3 */
.circle:nth-child(6) {
top: 0;
left: 66px;
-webkit-animation-delay: 0.6s;
-moz-animation-delay: 0.6s;
-o-animation-delay: 0.6s;
animation-delay: 0.6s;
-webkit-animation-duration: 0.6s;
-moz-animation-duration: 0.6s;
-o-animation-duration: 0.6s;
animation-duration: 0.6s;
}
.circle:nth-child(7) {
top: 25px;
left: 59px;
-webkit-animation-delay: 1.4s;
-moz-animation-delay: 1.4s;
-o-animation-delay: 1.4s;
animation-delay: 1.4s;
-webkit-animation-duration: 1.4s;
-moz-animation-duration: 1.4s;
-o-animation-duration: 1.4s;
animation-duration: 1.4s;
}
.circle:nth-child(8) {
top: 58px;
left: 59px;
-webkit-animation-delay: 1.6s;
-moz-animation-delay: 1.6s;
-o-animation-delay: 1.6s;
animation-delay: 1.6s;
-webkit-animation-duration: 1.6s;
-moz-animation-duration: 1.6s;
-o-animation-duration: 1.6s;
animation-duration: 1.6s;
}
.circle:nth-child(9) {
top: 98px;
left: 66px;
-webkit-animation-delay: 2.6s;
-moz-animation-delay: 2.6s;
-o-animation-delay: 2.6s;
animation-delay: 2.6s;
-webkit-animation-duration: 2.6s;
-moz-animation-duration: 2.6s;
-o-animation-duration: 2.6s;
animation-duration: 2.6s;
}
/* 4 */
.circle:nth-child(10) {
top: 15px;
left: 100px;
-webkit-animation-delay: 0.8s;
-moz-animation-delay: 0.8s;
-o-animation-delay: 0.8s;
animation-delay: 0.8s;
-webkit-animation-duration: 0.8s;
-moz-animation-duration: 0.8s;
-o-animation-duration: 0.8s;
animation-duration: 0.8s;
}
.circle:nth-child(11) {
top: 42px;
left: 92px;
-webkit-animation-delay: 2.2s;
-moz-animation-delay: 2.2s;
-o-animation-delay: 2.2s;
animation-delay: 2.2s;
-webkit-animation-duration: 2.2s;
-moz-animation-duration: 2.2s;
-o-animation-duration: 2.2s;
animation-duration: 2.2s;
}
.circle:nth-child(12) {
top: 75px;
left: 92px;
-webkit-animation-delay: 2.4s;
-moz-animation-delay: 2.4s;
-o-animation-delay: 2.4s;
animation-delay: 2.4s;
-webkit-animation-duration: 2.4s;
-moz-animation-duration: 2.4s;
-o-animation-duration: 2.4s;
animation-duration: 2.4s;
}
.circle:nth-child(13) {
top: 112px;
left: 97px;
-webkit-animation-delay: 2.8s;
-moz-animation-delay: 2.8s;
-o-animation-delay: 2.8s;
animation-delay: 2.8s;
-webkit-animation-duration: 2.8s;
-moz-animation-duration: 2.8s;
-o-animation-duration: 2.8s;
animation-duration: 2.8s;
}
/* 5 */
.circle:nth-child(14) {
top: 29px;
left: 130px;
-webkit-animation-delay: 1.0s;
-moz-animation-delay: 1.0s;
-o-animation-delay: 1.0s;
animation-delay: 1.0s;
-webkit-animation-duration: 1.0s;
-moz-animation-duration: 1.0s;
-o-animation-duration: 1.0s;
animation-duration: 1.0s;
}
.circle:nth-child(15) {
top: 58px;
left: 126px;
-webkit-animation-delay: 3.0s;
-moz-animation-delay: 3.0s;
-o-animation-delay: 3.0s;
animation-delay: 3.0s;
-webkit-animation-duration: 3.0s;
-moz-animation-duration: 3.0s;
-o-animation-duration: 3.0s;
animation-duration: 3.0s;
}
.circle:nth-child(16) {
top: 95px;
left: 130px;
-webkit-animation-delay: 3.2s;
-moz-animation-delay: 3.2s;
-o-animation-delay: 3.2s;
animation-delay: 3.2s;
-webkit-animation-duration: 3.2s;
-moz-animation-duration: 3.2s;
-o-animation-duration: 3.2s;
animation-duration: 3.2s;
}
.circle:nth-child(17) {
top: 131px;
left: 132px;
-webkit-animation-delay: 3.0s;
-moz-animation-delay: 3.0s;
-o-animation-delay: 3.0s;
animation-delay: 3.0s;
-webkit-animation-duration: 3.0s;
-moz-animation-duration: 3.0s;
-o-animation-duration: 3.0s;
animation-duration: 3.0s;
}
/* 6 */
.circle:nth-child(18) {
top: 15px;
left: 167px;
-webkit-animation-delay: 1.2s;
-moz-animation-delay: 1.2s;
-o-animation-delay: 1.2s;
animation-delay: 1.2s;
-webkit-animation-duration: 1.2s;
-moz-animation-duration: 1.2s;
-o-animation-duration: 1.2s;
animation-duration: 1.2s;
}
.circle:nth-child(19) {
top: 42px;
left: 159px;
-webkit-animation-delay: 3.8s;
-moz-animation-delay: 3.8s;
-o-animation-delay: 3.8s;
animation-delay: 3.8s;
-webkit-animation-duration: 3.8s;
-moz-animation-duration: 3.8s;
-o-animation-duration: 3.8s;
animation-duration: 3.8s;
}
.circle:nth-child(20) {
top: 75px;
left: 159px;
-webkit-animation-delay: 4.0s;
-moz-animation-delay: 4.0s;
-o-animation-delay: 4.0s;
animation-delay: 4.0s;
-webkit-animation-duration: 4.0s;
-moz-animation-duration: 4.0s;
-o-animation-duration: 4.0s;
animation-duration: 4.0s;
}
.circle:nth-child(21) {
top: 112px;
left: 162px;
-webkit-animation-delay: 3.2s;
-moz-animation-delay: 3.2s;
-o-animation-delay: 3.2s;
animation-delay: 3.2s;
-webkit-animation-duration: 3.2s;
-moz-animation-duration: 3.2s;
-o-animation-duration: 3.2s;
animation-duration: 3.2s;
}
/* 7 */
.circle:nth-child(22) {
top: 25px;
left: 192px;
-webkit-animation-delay: 1.4s;
-moz-animation-delay: 1.4s;
-o-animation-delay: 1.4s;
animation-delay: 1.4s;
-webkit-animation-duration: 1.4s;
-moz-animation-duration: 1.4s;
-o-animation-duration: 1.4s;
animation-duration: 1.4s;
}
.circle:nth-child(23) {
top: 58px;
left: 192px;
-webkit-animation-delay: 4.6s;
-moz-animation-delay: 4.6s;
-o-animation-delay: 4.6s;
animation-delay: 4.6s;
-webkit-animation-duration: 4.6s;
-moz-animation-duration: 4.6s;
-o-animation-duration: 4.6s;
animation-duration: 4.6s;
}
.circle:nth-child(24) {
top: 96px;
left: 197px;
-webkit-animation-delay: 3.4s;
-moz-animation-delay: 3.4s;
-o-animation-delay: 3.4s;
animation-delay: 3.4s;
-webkit-animation-duration: 3.4s;
-moz-animation-duration: 3.4s;
-o-animation-duration: 3.4s;
animation-duration: 3.4s;
}
/* 8 */
.circle:nth-child(25) {
top: 13px;
left: 230px;
-webkit-animation-delay: 1.6s;
-moz-animation-delay: 1.6s;
-o-animation-delay: 1.6s;
animation-delay: 1.6s;
-webkit-animation-duration: 1.6s;
-moz-animation-duration: 1.6s;
-o-animation-duration: 1.6s;
animation-duration: 1.6s;
}
.circle:nth-child(26) {
top: 42px;
left: 225px;
-webkit-animation-delay: 5.2s;
-moz-animation-delay: 5.2s;
-o-animation-delay: 5.2s;
animation-delay: 5.2s;
-webkit-animation-duration: 5.2s;
-moz-animation-duration: 5.2s;
-o-animation-duration: 5.2s;
animation-duration: 5.2s;
}
.circle:nth-child(27) {
top: 79px;
left: 230px;
-webkit-animation-delay: 5.4s;
-moz-animation-delay: 5.4s;
-o-animation-delay: 5.4s;
animation-delay: 5.4s;
-webkit-animation-duration: 5.4s;
-moz-animation-duration: 5.4s;
-o-animation-duration: 5.4s;
animation-duration: 5.4s;
}
.circle:nth-child(28) {
top: 115px;
left: 232px;
-webkit-animation-delay: 3.6s;
-moz-animation-delay: 3.6s;
-o-animation-delay: 3.6s;
animation-delay: 3.6s;
-webkit-animation-duration: 3.6s;
-moz-animation-duration: 3.6s;
-o-animation-duration: 3.6s;
animation-duration: 3.6s;
}
/* 9 */
.circle:nth-child(29) {
top: 0;
left: 266px;
-webkit-animation-delay: 1.8s;
-moz-animation-delay: 1.8s;
-o-animation-delay: 1.8s;
animation-delay: 1.8s;
-webkit-animation-duration: 1.8s;
-moz-animation-duration: 1.8s;
-o-animation-duration: 1.8s;
animation-duration: 1.8s;
}
.circle:nth-child(30) {
top: 26px;
left: 259px;
-webkit-animation-delay: 6.0s;
-moz-animation-delay: 6.0s;
-o-animation-delay: 6.0s;
animation-delay: 6.0s;
-webkit-animation-duration: 6.0s;
-moz-animation-duration: 6.0s;
-o-animation-duration: 6.0s;
animation-duration: 6.0s;
}
.circle:nth-child(31) {
top: 62px;
left: 263px;
-webkit-animation-delay: 6.2s;
-moz-animation-delay: 6.2s;
-o-animation-delay: 6.2s;
animation-delay: 6.2s;
-webkit-animation-duration: 6.2s;
-moz-animation-duration: 6.2s;
-o-animation-duration: 6.2s;
animation-duration: 6.2s;
}
.circle:nth-child(32) {
top: 99px;
left: 266px;
-webkit-animation-delay: 3.8s;
-moz-animation-delay: 3.8s;
-o-animation-delay: 3.8s;
animation-delay: 3.8s;
-webkit-animation-duration: 3.8s;
-moz-animation-duration: 3.8s;
-o-animation-duration: 3.8s;
animation-duration: 3.8s;
}
/* 10 */
.circle:nth-child(33) {
top: 15px;
left: 299px;
-webkit-animation-delay: 2.0s;
-moz-animation-delay: 2.0s;
-o-animation-delay: 2.0s;
animation-delay: 2.0s;
-webkit-animation-duration: 2.0s;
-moz-animation-duration: 2.0s;
-o-animation-duration: 2.0s;
animation-duration: 2.0s;
}
.circle:nth-child(34) {
top: 48px;
left: 299px;
-webkit-animation-delay: 4.0s;
-moz-animation-delay: 4.0s;
-o-animation-delay: 4.0s;
animation-delay: 4.0s;
-webkit-animation-duration: 4.0s;
-moz-animation-duration: 4.0s;
-o-animation-duration: 4.0s;
animation-duration: 4.0s;
}
@-webkit-keyframes main_color {
0% {
background: transparent;
}
50% {
background: #1d3cb9;
}
100% {
background: transparent;
}
}
@-moz-keyframes main_color {
0% {
background: transparent;
}
50% {
background: #1d3cb9;
}
100% {
background: transparent;
}
}
@-o-keyframes main_color {
0% {
background: transparent;
}
50% {
background: #1d3cb9;
}
100% {
background: transparent;
}
}
@keyframes main_color {
0% {
background: transparent;
}
50% {
background: #1d3cb9;
}
100% {
background: transparent;
}
}
@-webkit-keyframes one_color {
0% {
background: transparent;
}
50% {
background: #f80444;
}
100% {
background: transparent;
}
}
@-moz-keyframes one_color {
0% {
background: transparent;
}
50% {
background: #f80444;
}
100% {
background: transparent;
}
}
@-o-keyframes one_color {
0% {
background: transparent;
}
50% {
background: #f80444;
}
100% {
background: transparent;
}
}
@keyframes one_color {
0% {
background: transparent;
}
50% {
background: #f80444;
}
100% {
background: transparent;
}
}
@-webkit-keyframes text_color {
0% {
color: transparent;
}
100% {
color: #1d3cb9;
}
}
@-moz-keyframes text_color {
0% {
color: transparent;
}
100% {
color: #1d3cb9;
}
}
@-o-keyframes text_color {
0% {
color: transparent;
}
100% {
color: #1d3cb9;
}
}
@keyframes text_color {
0% {
color: transparent;
}
100% {
color: #1d3cb9;
}
}
@-webkit-keyframes text_border {
0% {
width: 0px;
background: transparent;
}
100% {
width: 233px;
background: #1d3cb9;
}
}
@-moz-keyframes text_border {
0% {
width: 0px;
background: transparent;
}
100% {
width: 233px;
background: #1d3cb9;
}
}
@-o-keyframes text_border {
0% {
width: 0px;
background: transparent;
}
100% {
width: 233px;
background: #1d3cb9;
}
}
@keyframes text_border {
0% {
width: 0px;
background: transparent;
}
100% {
width: 233px;
background: #1d3cb9;
}
}
