Свойство animation-timing-function

Устанавливает функцию расчета значений между началом и концом анимации

animation-timing-function: ease;

поддерживается начиная с
частичная поддержка до
не поддерживается

Значения

animation-timing-function: ease;

Использование стандартных временных функций: linear, ease, ease-in, ease-out, ease-in-out, step-start, step-end

<style>
.example-1 {
    width: 100px;
    height: 100px;
    background-color: #d62e2e;
    
    animation-name: moveX;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease;
}
@keyframes moveX {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(200px);   
    }
}
</style>

<div class="example-1"></div>

animation-timing-function: steps(4, end);

Расчет значений используя функцию steps. Первый параметр функции - сколько шагов, второй параметр - термин перехода: start, end

<style>
.example-2 {
    width: 100px;
    height: 100px;
    background-color: #d62e2e;
    
    animation-name: moveX;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: steps(4, end);
}
@keyframes moveX {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(200px);   
    }
}
</style>

<div class="example-2"></div>

animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);

Расчет значений используя кривую Бизье. Первое и третье значения должны находится в диапазоне 0-1.

<style>
.example-3 {
    width: 100px;
    height: 100px;
    background-color: #d62e2e;
    
    animation-name: moveX;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
}
@keyframes moveX {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(200px);   
    }
}
</style>

<div class="example-3"></div>

animation-timing-function: steps(4, end), linear;

Расчет значений для разных анимаций элемента, если их указано несколько в animation-name

<style>
.example-4 {
    width: 100px;
    height: 100px;
    background-color: #d62e2e;
    
    animation-name: moveX, bgChange;
    animation-duration: 4s, 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: steps(4, end), linear;
}
@keyframes moveX {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(200px);   
    }
}
@keyframes bgChange {
    from {
        background: green;
    }
    to {
        background: red;
    }
}
</style>

<div class="example-4"></div>

Обсуждение (0)

Войдите или зарегистрируйтесь для того чтобы оставлять комментарии

Свойство animation-timing-function

Устанавливает функцию расчета значений между началом и концом анимации

Значения

Читайте также

Обсуждение (0)