Анимация загрузки при помощи CSS3

К сожалению, пока эту анимацию можно увидеть только в Firefox, Safari и Chrome. Итак, давайте посмотрим, как же её создать.

Первый пример CSS3-анимации

HTML

В первом примере, мы создадим только два DIV-а и, с помощью свойства border-radius, придадим им форму круга.

<div class="ball"></div>
<div class="ball1"></div>

CSS

Стили CSS очень простые, просто поиграем немного с параметрами для графики, а что касается анимации, то мы используем свойство transform:rotate.

.ball {
    background-color: rgba(0,0,0,0);
    border:5px solid rgba(0,183,229,0.9);
    opacity:.9;
    border-top:5px solid rgba(0,0,0,0);
    border-left:5px solid rgba(0,0,0,0);
    border-radius:50px;
    box-shadow: 0 0 35px #2187e7;
    width:50px;
    height:50px;
    margin:0 auto;
    -moz-animation:spin .5s infinite linear;
    -webkit-animation:spin .5s infinite linear;
}
.ball1 {
    background-color: rgba(0,0,0,0);
    border:5px solid rgba(0,183,229,0.9);
    opacity:.9;
    border-top:5px solid rgba(0,0,0,0);
    border-left:5px solid rgba(0,0,0,0);
    border-radius:50px;
    box-shadow: 0 0 15px #2187e7;
    width:30px;
    height:30px;
    margin:0 auto;
    position:relative;
    top:-50px;
    -moz-animation:spinoff .5s infinite linear;
    -webkit-animation:spinoff .5s infinite linear;
}
@-moz-keyframes spin {
    0% { -moz-transform:rotate(0deg); }
    100% { -moz-transform:rotate(360deg); }
}
@-moz-keyframes spinoff {
    0% { -moz-transform:rotate(0deg); }
    100% { -moz-transform:rotate(-360deg); }
}
@-webkit-keyframes spin {
    0% { -webkit-transform:rotate(0deg); }
    100% { -webkit-transform:rotate(360deg); }
}
@-webkit-keyframes spinoff {
    0% { -webkit-transform:rotate(0deg); }
    100% { -webkit-transform:rotate(-360deg); }
}

Второй пример CSS3-анимации

HTML

Во втором примере html-разметка будет такой же, как и в первом, главное отличие будет в CSS.

<div class="circle"></div>
<div class="circle1"></div>

CSS

В этом примере мы будем использовать вращение, а также добавим больше анимации, которая позволит нам создать эффект импульса. Этот эффект будет применен только для первого круга.

.circle {
    background-color: rgba(0,0,0,0);
    border:5px solid rgba(0,183,229,0.9);
    opacity:.9;
    border-right:5px solid rgba(0,0,0,0);
    border-left:5px solid rgba(0,0,0,0);
    border-radius:50px;
    box-shadow: 0 0 35px #2187e7;
    width:50px;
    height:50px;
    margin:0 auto;
    -moz-animation:spinPulse 1s infinite ease-in-out;
    -webkit-animation:spinPulse 1s infinite linear;
}
.circle1 {
    background-color: rgba(0,0,0,0);
    border:5px solid rgba(0,183,229,0.9);
    opacity:.9;
    border-left:5px solid rgba(0,0,0,0);
    border-right:5px solid rgba(0,0,0,0);
    border-radius:50px;
    box-shadow: 0 0 15px #2187e7;
    width:30px;
    height:30px;
    margin:0 auto;
    position:relative;
    top:-50px;
    -moz-animation:spinoffPulse 1s infinite linear;
    -webkit-animation:spinoffPulse 1s infinite linear;
}
@-moz-keyframes spinPulse {
    0% { -moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #2187e7;}
    50% { -moz-transform:rotate(145deg); opacity:1; }
    100% { -moz-transform:rotate(-320deg); opacity:0; }
}
@-moz-keyframes spinoffPulse {
    0% { -moz-transform:rotate(0deg); }
    100% { -moz-transform:rotate(360deg);  }
}
@-webkit-keyframes spinPulse {
    0% { -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #2187e7; }
    50% { -webkit-transform:rotate(145deg); opacity:1;}
    100% { -webkit-transform:rotate(-320deg); opacity:0; }
}
@-webkit-keyframes spinoffPulse {
    0% { -webkit-transform:rotate(0deg); }
    100% { -webkit-transform:rotate(360deg); }
}

Третий пример CSS3-анимации

HTML

В последнем примере мы создадим простой цикл, который будет анимирован благодаря свойству transform:scale. HTML-кода больше, чем в предыдущих примерах, но он может изменяться в зависимости от размеров анимации, которую требуется вставить.

<div id="block_1" class="barlittle"></div>
<div id="block_2" class="barlittle"></div>
<div id="block_3" class="barlittle"></div>
<div id="block_4" class="barlittle"></div>
<div id="block_5" class="barlittle"></div>

CSS

И здесь стили очень простые, мы собираемся применить эффект задержки анимации (animation:delay), для каждого блока.

.barlittle {
    background-color:#2187e7;
    background-image: -moz-linear-gradient(45deg, #2187e7 25%, #a0eaff);
    background-image: -webkit-linear-gradient(45deg, #2187e7 25%, #a0eaff);
    border-left:1px solid #111;
    border-top:1px solid #111; 
    border-right:1px solid #333; 
    border-bottom:1px solid #333;
    width:10px;
    height:10px;
    float:left;
    margin-left:5px;
    opacity:0.1;
    -moz-transform:scale(0.7);
    -webkit-transform:scale(0.7);
    -moz-animation:move 1s infinite linear;
    -webkit-animation:move 1s infinite linear;
}
#block_1 {
    -moz-animation-delay: .4s;
    -webkit-animation-delay: .4s;
}
#block_2 {
    -moz-animation-delay: .3s;
    -webkit-animation-delay: .3s;
}
#block_3 {
    -moz-animation-delay: .2s;
    -webkit-animation-delay: .2s;
}
#block_4 {
    -moz-animation-delay: .3s;
    -webkit-animation-delay: .3s;
}
#block_5 {
    -moz-animation-delay: .4s;
    -webkit-animation-delay: .4s;
}
@-moz-keyframes move {
    0%{-moz-transform: scale(1.2);opacity:1;}
    100%{-moz-transform: scale(0.7);opacity:0.1;}
}
@-webkit-keyframes move {
    0%{-webkit-transform: scale(1.2);opacity:1;}
    100%{-webkit-transform: scale(0.7);opacity:0.1;}
}