AAA Главная
Примеры PHP Примеры JavaScript Примеры Ajax Примеры CSS,HTML

Функции перехода

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

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;
        -webkit-transition: width 3s;
        -moz-transition: width 3s;
        -o-transition: width 3s;
        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>


.

© Copyright 2008- by KDG



Rambler's Top100