Мерцающий div при использовании CSS-преобразования при наведении

Question

Я делаю div в верхней части кнопки твит (а также Facebook). Я хочу, чтобы он двигался вверх, как только я наведусь над div (кнопка), так что вы можете реально нажать кнопку твит. Я попробовал следующее.

HTML:

<div class="tweet-bttn">Tweet</div>         
<div class="tweet-widget">
    <a href="https://twitter.com/share" class="twitter-share-button">Tweet</a>
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</div>

CSS:

.tweet-bttn{
    position: relative;
    top: -30px;
    left: -10px;
    display:block;
    opacity: 1;
    width: 80px;
    padding: 10px 12px;
    margin:0px;
    z-index:3;}

.tweet-bttn:hover{
    -webkit-animation-name: UpTweet;
    -moz-animation-name: UpTweet;
    -o-animation-name: UpTweet;
    animation-name: UpTweet;
    -webkit-animation-duration:.5s;
    -moz-animation-duration:.5s;
    animation-duration:.5s;
    -webkit-transition: -webkit-transform 200ms ease-in-out;
    -moz-transition: -moz-transform 200ms ease-in-out;
    -o-transition: -o-transform 200ms ease-in-out;
    transition: transform 200ms ease-in-out;}

@-webkit-keyframes UpTweet {
    0% {
        -webkit-transform: translateY(0);
    }   
    80% {
        -webkit-transform: translateY(-55px);
    }
    90% {
        -webkit-transform: translateY(-47px);
    }
    100% {
        -webkit-transform: translateY(-50px);
    }
    ... and all other browser pre-fixes.
}

Я не уверен, что происходит не так. Похоже, что, как только я наведите курсор мыши, он перемещается, но если я перемещаю курсор еще на один пиксель, он должен выполнить новый расчет, который вызывает мерцание.

Answer 1

Я не знаю, для чего вам нужна анимация, когда вы можете просто достичь вышеуказанного, используя transitions

Хитрость заключается в том, чтобы переместить дочерний элемент при родительском наведении

демонстрация

div {
    margin: 100px;
    position: relative;
    border: 1px solid #aaa;
    height: 30px;
}

div span {
    position: absolute;
    left: 0;
    width: 100px;
    background: #fff;
    top: 0;
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    transition: all 1s;
}

div span:nth-of-type(1) {
/* Just to be sure the element stays above the 
   content to be revealed */
    z-index: 1;
}

div:hover span:nth-of-type(1) { /* Move span on parent hover */
    top: -40px;
}

---

Пояснение: во-первых, мы завернем spanвнутри div элемент, который является position: relative; а позже мы используем transition на span что поможет нам сгладить поток animation, теперь мы используем position: absolute; с left: 0;, это будет складывать элементы друг на друга, чем мы используем z-index чтобы убедиться, что первый элемент перекрывает второй.

Теперь, наконец, мы двигаемся первым spanмы выбираем это с помощью nth-of-type(1), который является ничем иным, как первым в своем роде ребенком, вложенным внутрь divи мы назначаем top: -40px; который пройдет, когда родитель div находится