В CSS3 появилось свойство animation, с помощью которого можно задать элементу скорость и параметры изменения других свойств, например transform. Параметры начала и окончания анимации указываются в правиле @keyframes.
Пример использования:
<div class="block">
<div class="block-image">
<img src="https://snipp.ru/demo/223/image.jpg">
</div>
<div class="block-text">
Lorem Ipsum is simply dummy text of the printing and typesetting industry
</div>
</div>.block {
height: 500px;
overflow: hidden;
position: relative;
}
.block-text {
position: absolute;
right: 0;
left: 0;
z-index: 50;
padding: 20px;
font-size: 49px;
font-weight: 900;
color: #fff700;
line-height: 1.4;
text-shadow: 3px 3px 20px #000;
}
.block-image {
position: absolute;
bottom: 0;
left: 0;
z-index: 1;
}
.block-image img {
width: 100%;
margin-top: -25%;
transform-origin: bottom right;
animation: grow 150000ms ease;
}
@keyframes grow {
0% {
transform: scale(1);
}
100% {
transform: scale(2);
}
}
