После того как некоторые умники полностью скопировали мой сайт (дизайн) и выставили его на продажу я решил немного улучшить его и сделать из статических картинок полную анимацию! Теперь практически на всём сайте присудствует движение и на мой взгляд сайт и особенно главная страница стали более интересным для воспиятия!
Все современные браузеры, кроме IE9- поддерживают CSS transitions и CSS animations, которые позволяют реализовать анимацию средствами CSS, без привлечения JavaScript.
Пример анимации можно посмотреть на этой странице
Как это реализовать рассмотрим ниже:
HTML
Ну тут всё просто и понятно:
<div class="progress"></div>
CSS
Сложные анимации делаются объединением простых при помощи CSS-правила @keyframes
.
В нём задаётся «имя» анимации и правила: что, откуда и куда анимировать. Затем при помощи свойства animation: имя параметры
эта анимация подключается к элементу, задаётся время анимации и дополнительные параметры, как её применять.
/* Современные браузеры, кроме Chrome, Opera, Safari */
@keyframes go-left-right { /* назовём анимацию: "go-left-right" */
from {
left: 0px; /* от: left: 0px */
}
to {
left: calc(100% - 50px); /* до: left: 100%-50px */
}
}
/* Префикс для Chrome, Opera, Safari */
@-webkit-keyframes go-left-right {
from {
left: 0px;
}
to {
left: calc(100% - 50px);
}
}
.progress {
/* применить анимацию go-left-right */
/* продолжительность 3s */
/* количество раз: бесконечное (infinite) */
/* менять направление анимации каждый раз (alternate) */
animation: go-left-right 3s infinite alternate;
-webkit-animation: go-left-right 3s infinite alternate;
position: relative;
border: 2px solid green;
width: 50px;
height: 20px;
background: lime;
}
Этот стандарт пока в черновике, поэтому в Chrome, Safari, Opera нужен префикс -webkit
.
CSS-анимации позволяют плавно или не очень менять одно или несколько свойств.
Вот и всё!
Статьи по теме
Отзывы и комментарии

Огромное спасибо Сергею за консультацию, которая прошла по скайпу по созданию анимации стилями нужного мне эффекта опираясь на статью «CSS-анимация движения». По полочкам разложил код, на примере показал работу анимашки на моем сайте. Хочу обратить внимание на его блог , где можно почерпнуть много информации по аннимации объектов. Это целый кладезь полезного кода с живыми примерами. Так держать.
Поповнина Наталья О статье