Назад
Регистрация Войти
Войти через VK Войти через FB Войти через Google Войти через Яндекс




Поиск по сайту




Наш Telegram бот: @htmlweb_bot

Функции перехода. Свойство transition-timing-function

Чтобы увидеть на примере работу разных функций перехода, наведите указатель мышки на этот блок:

ease
ease-in
ease-out
ease-in-out
linear
cubic-bezier(0.1, -0.3, 0.2, 0)
Исходный код этого примера:
<style>
    .trans-box {
        width: 700px;
        border: 1px #ccc solid;
        padding: 0 10px;
    }
    .trans-item {
        background-color: #deebec;
        font: 14px/24px Arial,sans-serif;
        height: 34px;
        width: 200px;
        margin: 10px 0;
        padding: 5px;
        box-sizing: border-box;
        white-space: nowrap;
        overflow: hidden;
        transition: width 3s;
    }
    .trans-box:hover .trans-item {
        width: 100%;
    }
</style>
<p>Чтобы увидеть на примере работу разных функций перехода, наведите указатель мышки на этот блок:</p>
<div class="trans-box">
    <div class="trans-item" style="transition-timing-function: ease">ease</div>
    <div class="trans-item" style="transition-timing-function: ease-in">ease-in</div>
    <div class="trans-item" style="transition-timing-function: ease-out">ease-out</div>
    <div class="trans-item" style="transition-timing-function: ease-in-out">ease-in-out</div>
    <div class="trans-item" style="transition-timing-function: linear">linear</div>
    <div class="trans-item" style="transition-timing-function: cubic-bezier(0.1, -0.3, 0.2, 0)">cubic-bezier(0.1, -0.3, 0.2, 0)</div>
</div>

.