Простая и эффективная анимация, где при наведение клика, элемент медленно начинает движение. Это поля из предыдущего раздела, в их состояниях по умолчанию. Однако, когда вы наведете курсор на любое из полей, преобразование CSS применяется как анимация за одну секунду. Когда мышь перемещается, анимация отменяется, возвращая каждую ячейку в исходное состояние.
HTML
Код
<div class="tanimate-lements standareading">ZORNET.RU</div>
CSS
Код
.tanimate-lements {
float: left;
margin: 3em 2em;
width: 100px;
height: 59px;
border: 1.8px solid green;
background-color: #fff;
line-height: 59px;
text-align: center;
cursor:pointer;
-webkit-transition: 2s ease-in-out;
-moz-transition: 2s ease-in-out;
-o-transition: 2s ease-in-out;
transition: 2s ease-in-out;
}
.tanimate-lements.standareading:hover {
-webkit-transform: translate(5em,0);
-moz-transform: translate(5em,0);
-o-transform: translate(5em,0);
-ms-transform: translate(5em,0);
transform: translate(5em,0);
}
В следующем примере окно слева начинается как маленькое и зеленое с квадратными углами, а справа - больше, с красной рамкой и закругленными углами. Наведение курсора на любой из ящиков вызовет анимацию, в результате которой коробка 1 примет вид коробки 2 и наоборот.
Демонстрация
