CSS3 АНИМАЦИЯ ЗАГРУЗКИ


CSS3 АНИМАЦИЯ ЗАГРУЗКИ


Прелоадер на CSS3 в котором используется два вида анимации: выцветание теругольников и анимация поворота всего элемента. Все вместе эти анимации позволяют создать довольно неплохой эффект.

Разметка HTML
<div class="loading-wrap">
  <div class="triangle1"></div>
  <div class="triangle2"></div>
  <div class="triangle3"></div>
</div>


CSS
Поскольку выцветание всех трех треугольников происходит постепенно, то мы должны установить задержку анимации.
Обратите внимание на промежуток между 20% и 100% для вращения keyframes, это позволяет достичь эффекта остановки анимации.
        .loading-wrap{
          width: 60px; height: 60px;
          position: absolute;
          top: 50%; left: 50%;
          margin: -30px 0 0 -30px;
          background: #777;      
          -moz-animation: rotation ease-in-out 2s infinite;
          -webkit-animation: rotation ease-in-out 2s infinite;
          -ms-animation: rotation ease-in-out 2s infinite;
          animation: rotation ease-in-out 2s infinite;
          -webkit-border-radius: 30px;
          -moz-border-radius: 30px;
          border-radius: 30px;      
        }

        .triangle1, .triangle2, .triangle3{
          border-width: 0 20px 30px 20px;
          border-style: solid;
          border-color: transparent;
          border-bottom-color: #67cbf0;
          height: 0; width: 0;
          position: absolute;
          left: 10px; top: -10px;
          -moz-animation: fadecolor 2s 1s infinite;
          -webkit-animation: fadecolor 2s 1s infinite;
          -ms-animation: fadecolor 2s 1s infinite;
          animation: fadecolor 2s 1s infinite;
        }

        .triangle2, .triangle3{
          content: '';
          top: 20px; left: 30px;
          -moz-animation-delay: 1.1s;
          -webkit-animation-delay: 1.1s;
          -ms-animation-delay: 1.1s;
          animation-delay: 1.1s;
        }

        .triangle3{
          left: -10px;
          -moz-animation-delay: 1.2s;
          -webkit-animation-delay: 1.2s;
          -ms-animation-delay: 1.2s;
          animation-delay: 1.2s;
        }

        @-moz-keyframes rotation
        {
            0% {-moz-transform: rotate(0deg);}
            20% {-moz-transform: rotate(360deg);}
            100% {-moz-transform: rotate(360deg);}
        }

        @-webkit-keyframes rotation
        {
            0% {-webkit-transform: rotate(0deg);}
            20% {-webkit-transform: rotate(360deg);}
            100% {-webkit-transform: rotate(360deg);}
        }
        
        @-ms-keyframes rotation
        {
            0% {-webkit-transform: rotate(0deg);}
            20% {-webkit-transform: rotate(360deg);}
            100% {-webkit-transform: rotate(360deg);}
        }        

        @keyframes rotation
        {
            0% {transform: rotate(0deg);}
            20% {transform: rotate(360deg);}
            100% {transform: rotate(360deg);}
        }          

        @-moz-keyframes fadecolor
        {
            0% {border-bottom-color: #eee;}
            100%{border-bottom-color: #67cbf0;}
        }

        @-webkit-keyframes fadecolor
        {
            0% {border-bottom-color: #eee;}
            100%{border-bottom-color: #67cbf0;}
        }
        
        @-ms-keyframes fadecolor
        {
            0% {border-bottom-color: #eee;}
            100%{border-bottom-color: #67cbf0;}
        }        

        @keyframes fadecolor
        {
            0% {border-bottom-color: #eee;}
            100%{border-bottom-color: #67cbf0;}
        }


Скачать исходник:
css3_load_anim.rar


скрипт CSS3 АНИМАЦИЯ ЗАГРУЗКИ скрипт
Статистика
0  
Всего статей 1025
0  
Всего комментариев 57
0  
Пользователей 3333
Обновления new
  • XenForo Resource Manager 1.1.4
  • Что такое Менеджер ресурсов (Resource Manager)? Менеджер ресурсов является официальным дополнением для XenForo, которое позволяет управлять
  • Boss Electronues - Шаблон для OpenCart
  • И так, данный шаблон заточен под OpenCart. В данном шаблоне есть не свойственная для магазинов возможность писать блоги. В шаблон встроен блог от
  • R.Gen - Шаблон на OpenCart
  • R.Gen - это отличный премиум шаблон на OpenCart. Отличный дизайн, полностью настраиваемый и в тоже время простой в шаблон для создания серьезного
  • 30 psd логотипов на разные тематики
  • Эта сборка из 30 psd логотипов на разную тематику. Логотипы схематичные, яркие, детализированные, в отличном качестве и в формате PSD. Логотипы не
  • Xenu Программа для проверки битых ссылок
  • Xenu старенькая но очень полезная программа для поиска битых ссылок на сайте. Описание: Проверка ссылок делается на: ссылки, изображения, рамок,
Информация