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

11.11.2011 12:34

Вы этом уроке мы рассмотрим, как создать три варианта 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;}

}