Div flickering when using CSS transform when hovering

Question

I am making a div on top of the tweet button (and also like Facebook). I want it to move up as soon as I hang over the div button (button) so that you can actually click the real tweet button. I have tried the following.

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. } 

I'm not sure what will go wrong. This is similar to the moment I hover over the cursor, it moves, but if I move the cursor one pixel, it must perform a new calculation that causes flickering.

Answer 1

I don’t know why you need animations when you can just achieve the above using transitions

The trick is moving the child when the parent hangs

Demo

 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; } 

---

Explanation: First, we end the span inside the div element, which is equal to position: relative; and later we use transition on the span , which will help us smooth out the animation stream, now we use position: absolute; with left: 0; , this will stack the elements on top of each other, than we use z-index so that the first element overlaps the second.

Now, finally, we move the first span , we select it with nth-of-type(1) , which is nothing more than the first child of the view, which is nested inside the div , and we assign top: -40px; which will pass when the parent div frozen.