5.02.15, 13:41
1 комментарий
  Уроки

Бесконечное вращение изображения с помощью CSS3

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

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

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

Бесконечное вращение изображения с помощью CSS3


После этого создадим HTML-файл со следующим содержимым:

<!DOCTYPE html>
<html>
<head>
    <title>Вращение</title>
    <meta charset="utf-8">
 
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
 
<div class="car">
 
    <img class="wheel" id="wheel1" src="wheel.png" />
    <img class="wheel" id="wheel2" src="wheel.png" />
</div>
 
</body>
</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 у каждого из колес нужен для правильного позиционирования этих изображений на машине.

В итоге, на фоновое изображение автомобиля у нас «встали» два колеса — на картинке ниже я выделил их мышкой.

Бесконечное вращение изображения с помощью CSS3


Теперь начинается магия :)

К нашему классу 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)

Комментарии

  1. anyone 16 марта 2015 15:31                    

    Можно цсс собрать в одну строчку для сокращения строк и размера самого ЦСС !

    Кому интерестно развитие дальше !
    css3maker.com/css3-animation.html
    coveloping.com/tools/css-animation-generator

Напишите своё мнение