избежать медленного движения при использовании CSS ключевых кадров

Я пытаюсь достичь этой кнопки анимации на парении, используя только CSS решение:избежать медленного движения при использовании CSS ключевых кадров

enter image description here

Я преуспеть на найти способ делать это с помощью CSS ключевого кадра, но Теперь я столкнулся некоторым неожиданный эффект медленного движения, сейчас я только экспериментирую с этим в левом верхнем углу, вот что я сделал до сих пор:

HTML

<a href=""><div class="borderTop"></div></a>

CSS

a { 
    width: 150px; 
    height: 50px; 
    border: 2px solid; 
    margin: 0 auto; 
    margin-top: 20%; 
    display: block;  
} 

a:hover .borderTop { 
    width: 10px; 
    height: 2px; 
    border-top: 2px solid; 
    position: relative; 
    top: -2px; 
    -webkit-animation: topTheleft 2s alternate; 
    animation: topTheleft 2s alternate; 
} 

.borderTop { 
    width: 10px; 
    height: 2px; 
    border-top: 2px solid; 
    position: relative; 
    top: -2px; 
    left: 50px; 
} 

@-webkit-keyframes topTheleft { 
    0% { left: -2px; } 
    50% { left: -30px; } 
    100% { left: -70px; display: none; } 
} 
@-o-keyframes topTheleft { 
    0% { left: -2px; } 
    50% { left: -30px; } 
    100% { left: -70px; display: none; } 
} 
@-moz-keyframes topTheleft { 
    0% { left: -2px; } 
    50% { left: -30px; } 
    100% { left: -70px; display: none; } 
} 
@keyframes topTheleft { 
    0% { left: -2px; } 
    50% { left: -30px; } 
    100% { left: -70px; display: none; } 
}

LIVE DEMO

любая помощь о том, как избежать этого медленного движения на середине анимации будет высоко оценили, спасибо заранее

редактировать, есть способ сделать линию скрытой, когда достигнете left: -70px с эффектом перехода не ansta-hide, любое другое решение сделать это тоже желательно

источник

2015-02-18 Ze Rubeus

Попробуйте ge чал избавиться от 50% линий:

@-webkit-keyframes topTheleft { 
    0% { left: -2px; } 
    100% { left: -70px; display: none; } 
} 
@-o-keyframes topTheleft { 
    0% { left: -2px; } 
    100% { left: -70px; display: none; } 
} 
@-moz-keyframes topTheleft { 
    0% { left: -2px; } 
    100% { left: -70px; display: none; } 
} 
@keyframes topTheleft { 
    0% { left: -2px; } 
    100% { left: -70px; display: none; } 
}

источник

2015-02-18 10:50:37

спасибо, что это решило проблему с кулаком :) есть ли способ сделать прямую линию при достижении левой стороны: -70px с эффектом перехода не ansta-hide? –

Я думаю, что лучшее, что вы могли бы сделать, это поставить 50% {left: -70px; } в ваших ключевых кадрах. Таким образом, у вас есть две анимации: переход от A к B, остановка и исчезновение чуть позже. –

merci c'est gentil :) –

Похоже, функция синхронизации по умолчанию легкость входа-выхода: от одной анимации шага к другому, скорость идет медленно-быстро-медленно, чтобы сделать его более естественным (реальная физика не может сделать объект со скоростью от 0 до 100 мгновенно).

Так что же происходит анимация начинается медленно при 0%, идет быстро, а затем замедляется на стадии 50%, после чего ускоряется снова

Это то, что вы ищете? https://jsfiddle.net/kvyqyg19/1/

a:hover .borderTop { 
    /* .. */ 
    -webkit-animation: topTheleft 2s alternate; 
    animation: topTheleft 2s alternate; 
    animation-timing-function: linear; 
} 


@-webkit-keyframes topTheleft { 
    0% { left: -2px; } 
    100% { left: -70px; display: none; } 
} 
/* .. */

я удалил шаг со средним (50%) и установить анимации-газораспределительного-функции: линейный;

источник

2015-02-18 10:56:43

избежать медленного движения при использовании CSS ключевых кадров

ответ

Смежные вопросы