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

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

animation-timing-function: ease;
  • поддерживается начиная с
  • частичная поддержка до
  • не поддерживается

Значения

animation-timing-function: ease;

Использование стандартных временных функций: lineareaseease-inease-outease-in-outstep-startstep-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)

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