Красивая анимация картинок на чистом CSS

Многие из Вас, не зная возможностей CSS3, используют JQuery для действий над изображениями.
Сегодня с познакомлю Вас с возможностями CSS3.

Простейший пример. Грубая смена изображений.



Для смены мы будем использовать фоновое изображение.
<style>
span.example1 {
  background: url(/files/articles/img/smile_1.png) no-repeat 50% 50%;
  width: 220px;
  height: 220px;
  display: block;
}
span.example1:hover{
  background: url(/files/articles/img/smile_2.png) no-repeat 50% 50%;
}
</style>
<div>
<span class="example1"></span>
</div>




Плавная смена изображений



Рассмотрим более интересный вариант, плавную смену изображений, за счет абсолютного позиционирования элементов (position:absolute).
<style>
div.example2 {
  width: 220px;
  height: 220px;
  margin: 0 auto;
}
div.example2 img {
  position:absolute; 
  /*За счет transition, добиваемся плавности эффекта*/
  -moz-transition: all 1s ease-in-out;
  -webkit-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}
.example2 img.smile1 {
  opacity:0;
  filter:alpha(opacity=0);
}
.example2:hover img.smile1 {
  opacity:1;
  filter:alpha(opacity=100);
}
.example2:hover img.smile2, .example2 img.smile2:hover {
  opacity:0;
  filter:alpha(opacity=0);
}
</style>
<div class="example2">
<img src="/files/articles/img/smile_1.png" class="smile1" /img>
<img src="/files/articles/img/smile_2.png" class="smile2" /img>
</div>


Смайл Смайл в очках


Меняя время "1s", в свойстве transition, можно управлять скоростью смены изображений.
transition: all 1s ease-in-out;


Свойство Transform



Добавим к предыдущему варианту свойство transform. Как уже понятно из имени свойства, будет происходить трансформация изображения.
<style>
.example2 img.smile1 {
  -moz-transform:scale(0);
  -webkit-transform:scale(0);
  -o-transform:scale(0);
  -ms-transform:scale(0);
}
.example2:hover img.smile1 {
  -moz-transform:scale(1);
  -webkit-transform:scale(1);
  -o-transform:scale(1);
  -ms-transform:scale(1);
}
.example2:hover img.smile2 {
  -moz-transform:scale(0);
  -webkit-transform:scale(0);
  -o-transform:scale(0);
  -ms-transform:scale(0);
}
</style>


Смайл Смайл в очках


Ротация изображений



А теперь поиграем с ротацией изображения. Изменим css-код из 2 примера на:
<style>
.example2 img.smile1 {
  -moz-transform:scale(1,0);
  -webkit-transform:scale(1,0);
  -o-transform:scale(1,0);
  -ms-transform:scale(1,0);
}
.example2:hover img.smile1 {
  -moz-transform:scale(1);
  -webkit-transform:scale(1);
  -o-transform:scale(1);
  -ms-transform:scale(1);
}
.example2:hover img.smile2 {
  -moz-transform:rotate(180deg) scale(0);
  -webkit-transform:rotate(180deg) scale(0);
  -o-transform:rotate(180deg) scale(0);
  -ms-transform:rotate(180deg) scale(0);
}
</style>


Смайл Смайл в очках


Слайдер изображений



Попробуем сделать простейший слайдер. Он будет основан на смене свойства margin
<style>
div.example5 {
  width: 220px;
  height: 220px;
  margin: 0 auto;
  /*Убираем полосу прокрутки*/
  overflow:hidden;
}
div.example5 img {
  position: absolute;
  -moz-transition: all 1s ease-in-out;
  -webkit-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}
.example5 img.smile1 {
  opacity:0;
  filter:alpha(opacity=0);
}
.example5:hover img.smile1 {
  opacity:1;
  filter:alpha(opacity=100);
}
.example5:hover img.smile2, .example5 img.smile2:hover {
  opacity:0;
  filter:alpha(opacity=0);
}
.example5 img.smile1, .example5:hover img.smile1 {
  margin-left: 0px;
}
.example5:hover img.smile2 {
  margin-left: 220px;
}
.example5 img.smile1 {
  margin-left: -220px;
}
</style>


Смайл Смайл в очках


Принцип я думаю вам понятен. Если с фантазией все хорошо, поигравшись этими свойствами можно получить очень интересные результаты ;)