Среда, 17 Октября 2012 11:55

WebKit CSS Animation

Written by 
Оцени эту запись
(3 Голоса)

В данной статье рассмотрим анимацию при помощи CSS свойства -webkit-animation для WebKit-браузеров.

 

В демо ниже вы можете видеть результат такой анимации. Все использованные свойства работают только Chrome и Safari. Подробное описание использованных свойств будет в одной из следующих статей! :-)

 

 

 
 
 
 
 
 
 
 
 
 

 

 

HTML код протой:

 

 

<div id="wrapper_slider">
        <div class="inner_slider">
            <div class="item" style="background-image: url('/images/img1.jpg');"></div>
            <div class="item" style="background-image: url('/images/img2.jpg');"></div>
            <div class="item" style="background-image: url('/images/img3.jpg');"></div>
            <div class="item" style="background-image: url('/images/img4.jpg');"></div>
            <div class="item" style="background-image: url('/images/img5.jpg');"></div>
            <div class="item" style="background-image: url('/images/img6.jpg');"></div>
            <div class="item" style="background-image: url('/images/img7.jpg');"></div>
            <div class="item" style="background-image: url('/images/img8.jpg');"></div>
            <div class="item" style="background-image: url('/images/img9.jpg');"></div>
            <div class="item" style="background-image: url('/images/img10.jpg');"></div>
        </div>
    </div>
 
 
 

В стилях используется стандартный прием для слайдеров, скроллеров - внутренний контейнер inner имеет свойства position: absolute, top: 0, left: 0. Анимация реализована при помощи изменения свойства left.

 

Стили для элементов страницы:

 

 

.wrapper_slider  {
            display: -webkit-box;
            -webkit-box-orient: horizontal;
            -webkit-box-align: center;
            -webkit-user-select: none;
            width: 600px;
            height: 500px;
            margin: 20px auto;
            position: relative;
            overflow: hidden;
            -webkit-border-radius: 10px;
            border: 10px solid #736AFF;
            -webkit-box-sizing: content-box;
 }
.inner_slider {
            display: -webkit-box;
            -webkit-box-orient: horizontal;
            -webkit-box-align: center;
            -webkit-user-select: none;
            height: 500px;
            position: absolute;
            top: 0;
            left: 0;
            -webkit-animation-name: 'scroll';
            -webkit-animation-delay: 1s;
            -webkit-animation-direction: alternate;
            -webkit-animation-duration: 20s;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-timing-function: ease-in-out;
}
 .item {
            display: -webkit-box;
            -webkit-box-orient: horizontal;
            -webkit-box-align: center;
            -webkit-user-select: none;
            width: 600px;
            height: 500px;
            background-size: 100% 100%;
            background-repeat: no-repeat;
            -webkit-box-shadow: inset 10px 5px 25px #736AFF;
 }

 

Как вы видите, у внутреннего контейнера есть свойство  -webkit-animation-name: 'scroll', где scroll - это название самой анимации. Она в нашем случае выглядит так:

 

@-webkit-keyframes 'scroll' {
            from {
            left: 0;
            }
            5% {
            left: -600px;
            }
            11% {
            left: -600px;
            }
            16% {
            left: -1200px;
            }
            22% {
            left: -1200px;
            }
            27% {
            left: -1800px;
            }
            33% {
            left: -1800px;
            }
            38% {
            left: -2400px;
            }
            44% {
            left: -2400px;
            }
            49% {
            left: -3000px;
            }
            55% {
            left: -3000px;
            }
            60% {
            left: -3600px;
            }
            66% {
            left: -3600px;
            }
            71% {
            left: -4200px;
            }
            77% {
            left: -4200px;
            }
            82% {
            left: -4800px;
            }
            88% {
            left: -4800px;
            }
            93% {
            left: -5400px;
            }
            to {
            left: -5400px;
            }
        }
 
 
Вот, собственно, и все.
 
В описании анимации указывается значение left для разных процентов процесса анимации.
 
По поводу остальных стилей скажу кратко.
 
 
display: -webkit-box; - осоьый спосов отображения для WebKit, который имеет много преимуществ.
 
-webkit-box-orient: horizontal; - дочерние элементы в блоке должны размещаться горизонтально.
 
-webkit-box-align: center; - выравнивание дочерних элементов по направлению ориентации блока

 

-webkit-animation-name: 'scroll'; - название анимации, которая должна быть самостоятельно описана
 
-webkit-animation-delay: 1s; - задержка анимации
 
-webkit-animation-direction: alternate; - направление туда и обратно
 
 -webkit-animation-duration: 20s; - продолжение анимации
 
-webkit-animation-iteration-count: infinite; - количество повторов анимации - бесконечно
 
 -webkit-animation-timing-function: ease-in-out; - тип анимации
 

 

 

 

 

 

 

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов