Бесконечное вращение изображения с помощью CSS3 » Techno-Co — Всё для вебмастера, для создание сайтов с нуля. {title}

17.03.2015
Без рубрики

В этой статье я хотел бы рассказать о том, какая замечательная штука есть у нас — CSS версии 3. И, с помощью CSS3, функций animation и transform, сегодня мы заставим бесконечно долго вращаться колеса автомобиля.

Итак, приступим:

Для урока, я взял фотографию своего любимого автомобиля Subaru Outback (для удовольствия над работой 🙂 ). Далее, в фотошопе вырезаем по контуру одно из колес (по факту — только литье). После этого создадим HTML-файл со следующим содержимым:




    Вращение

В подключенном нами CSS файле мы пишем:

.car
{
    background-image: url("back.jpg");
    display: block;
    width: 710px;
    height: 576px;
}

#wheel1
{
    position: relative;
    top: 403px;
    left: 152px;
}

#wheel2
{
    position: relative;
    top: 404px;
    left: 450px;
}

Таким образом, мы создали, во-первых: слой, фоном которого является автомобиль, а так же два слоя-колеса. У колес класс один и тот же, так как мы их будем вращать по одному алгоритму, а ID у каждого из колес нужен для правильного позиционирования этих изображений на машине.В итоге, на фоновое изображение автомобиля у нас «встали» два колеса — на картинке ниже я выделил их мышкой. Теперь начинается магия :)К нашему классу wheel пропишем:

.wheel {
    animation-name: spin;
    animation-duration: 600ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;

    z-index: 100;
}

@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}

И подробнее рассмотрим каждую строчку:

@keyframes spin — в этой строчке мы ставим «ключевые кадры» для нашей анимации — т.е. описываем, что анимация будет делать. spin — это название нашей анимации.

В блоке from мы прописываем, с чего начинается анимация, а в блоке to, прописываем чем заканчивается. В нашем случае, мы крутим изображения от нуля градусов до 360.

animation-name: имя нашей анимации, описанной выше.

animation-duration: продолжительность анимации, в миллисекундах.

animation-iteration-count: количество повторений анимации. В нашем случае, мы делаем ее бесконечной, хотя можно явно указать количество повторений.

animation-timing-function: функция, отвечающая за «смягчение» анимации. Например, можно установить медленную скорость в начале анимации, а далее — быструю (ease-in). В нашем случае, ставим linear — то есть, последовательная скорость на всем протяжении анимации.

z-index поставил на всякий случай — для того, чтобы колеса всегда были «над» другими слоями.

Вот и все 🙂 Основной алгоритм анимации мы рассмотрели. Для корректной работы в разных браузерах, я модифицирую css-файл, добавив к каждому из методов префиксы:

.wheel {
    z-index: 100;

    -webkit-animation-name: spin;
    -webkit-animation-duration: 600ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: spin;
    -moz-animation-duration: 600ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: spin;
    -ms-animation-duration: 600ms;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;

    animation-name: spin;
    animation-duration: 600ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@-ms-keyframes spin {
    from { -ms-transform: rotate(0deg); }
    to { -ms-transform: rotate(360deg); }
}
@-moz-keyframes spin {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}

Теперь наша машинка поехала :)Приятной работы с CSS3 🙂

Урок подготовил: Арсений Дугин (SKLAZER)