В этом уроке мы рассмотрим, как создать анимацию изображений с помощью таких свойств, как transform CSS и transition-duration CSS.
С помощью свойства transform CSS изображение можно масштабировать, приближать, удалять, поворачивать, передвигать и искажать.
Свойство transition-duration CSS позволяет задать время анимации в секундах, т.е. сделать трансформацию плавной.
Рассмотрим на примере.
Увеличение масштаба изображения.
Наведите курсор мыши на изображение, чтобы посмотреть эффект.
index.html
<div id="ex1">
<img src="images/img1.jpg" />
</div>
<img src="images/img1.jpg" />
</div>
style.css
#ex1 {
margin: 50px;
}
#ex1 img {
transform:scale(0.5);
-webkit-transform:scale(0.5);
-moz-transform:scale(0.5);
-o-transform:scale(0.5);
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
}
#ex1 img:hover {
transform:scale(1);
-webkit-transform:scale(1);
-moz-transform:scale(1);
-o-transform:scale(1);
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
}
margin: 50px;
}
#ex1 img {
transform:scale(0.5);
-webkit-transform:scale(0.5);
-moz-transform:scale(0.5);
-o-transform:scale(0.5);
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
}
#ex1 img:hover {
transform:scale(1);
-webkit-transform:scale(1);
-moz-transform:scale(1);
-o-transform:scale(1);
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
}
Приближение элемента изображения.
index.html
<div id="ex2">
<img src="images/img1.jpg" />
</div>
<img src="images/img1.jpg" />
</div>
style.css
#ex2 {
margin: 50px;
width: 300px;
overflow:hidden;
}
#ex2 img {
transform:scale(1);
-webkit-transform:scale(1);
-moz-transform:scale(1);
-o-transform:scale(1);
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
}
#ex2 img:hover {
transform:scale(1.5);
-webkit-transform:scale(1.5);
-moz-transform:scale(1.5);
-o-transform:scale(1.5);
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
}
margin: 50px;
width: 300px;
overflow:hidden;
}
#ex2 img {
transform:scale(1);
-webkit-transform:scale(1);
-moz-transform:scale(1);
-o-transform:scale(1);
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
}
#ex2 img:hover {
transform:scale(1.5);
-webkit-transform:scale(1.5);
-moz-transform:scale(1.5);
-o-transform:scale(1.5);
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
}
Поворот изображения.
index.html
<div id="ex3">
<img src="images/img1.jpg" />
</div>
<img src="images/img1.jpg" />
</div>
style.css
#ex3 {
margin: 50px;
}
#ex3 img {
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
}
#ex3 img:hover {
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
}
margin: 50px;
}
#ex3 img {
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
}
#ex3 img:hover {
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
}
Искажение изображения.
index.html
<div id="ex4">
<img src="images/img1.jpg" />
</div>
<img src="images/img1.jpg" />
</div>
style.css
#ex4 {
margin: 50px;
}
#ex4 img {
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
}
#ex4 img:hover {
transform: skewX(30grad);
-webkit-transform: skewX(30grad);
-moz-transform: skewX(30grad);
-o-transform: skewX(30grad);
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
}
margin: 50px;
}
#ex4 img {
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
}
#ex4 img:hover {
transform: skewX(30grad);
-webkit-transform: skewX(30grad);
-moz-transform: skewX(30grad);
-o-transform: skewX(30grad);
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
}
Перемещение изображения.
index.html
<div id="ex5">
<img src="images/img1.jpg" />
</div>
<img src="images/img1.jpg" />
</div>
style.css
#ex5 {
margin: 50px;
}
#ex5 img {
transition-duration: 1s;
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
}
#ex5 img:hover {
transform: translate(240px, 0);
-webkit-transform: translate(240px, 0);
-moz-transform: translate(240px, 0);
-o-transform: translate(240px, 0);
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
}
margin: 50px;
}
#ex5 img {
transition-duration: 1s;
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
}
#ex5 img:hover {
transform: translate(240px, 0);
-webkit-transform: translate(240px, 0);
-moz-transform: translate(240px, 0);
-o-transform: translate(240px, 0);
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
}