Давайте рассмотрим одну анимацию, которая в большинстве вы могли наблюдать на разных сайтах. Это элемент на сайте, который плавно поднимается вверх и также опускается. Где можно использовать в различных эффектах.
Переходы CSS предоставляют возможность дизайнерам с ограниченными знаниями кода улучшить свои проекты с потрясающими эффектами движения, которые будут привлекать пользователей как никогда ранее
Также рекомендую посмотреть похожею анимацию, но там больше задействовано различных элементов под дизайн.
HTML
Код
<div class="floating"
style="height: 43px; width: 43px; background: rgb(86, 80, 80); border-radius: 100px; border: 2px solid #c4c7cc;">
</div>
CSS
Код
.floating {
animation-name: floating;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
margin-left: 30px;
margin-top: 5px;
}
@keyframes floating {
from { transform: translate(0, 0px); }
65% { transform: translate(0, 15px); }
to { transform: translate(0, -0px); }
}
Вы можете создать текстовый редактор и браузер для тестирования, но я предпочитаю использовать такой инструмент, как jsfiddle или codepen.
Демонстрация
