Text wiggle when using CSS transition
在Chrome和Safari中,此代码(http://codepen.io/igdaloff/pen/cgCFt)中的文本在悬停时会微妙地摆动。我希望文本在整个过渡过程中保持稳定。
我已经尝试了几种替代方法来实现相同的效果(在本文中进行了解释),但摆动仍然存在。
我需要文本保持垂直居中,内容必须完全流畅(仅百分比)。只要这些要求是真实的,我就会接受任何解决方案。我正在使用最新的浏览器版本。
预先感谢。
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <ul> <li> <img src="..." /> <h4>Goats</h4> </li> </ul> |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 | .work-home { text-align: center; } .work-home li { display: inline-block; position: relative; margin: 0 0 2em; width: 100%; } .work-home li:hover a:before { opacity: 1; top: 5%; left: 5%; right: 5%; bottom:5%; } .work-home li:hover h4 { opacity:1; } .work-home img { width: 100%; -webkit-transition: all 0.1s ease; -moz-transition: all 0.1s ease; -o-transition: all 0.1s ease; transition: all 0.1s ease; } .work-home a:before { content:""; display:block; opacity: 0; position: absolute; margin: 0; top:0; right:0; left:0; bottom:0; background-color: rgba(0, 160, 227, 0.88); -webkit-transition: all linear .3s; -moz-transition: all linear .3s; -ms-transition: all linear .3s; transition: all linear .3s; } .work-home h4 { display: block; padding: 0; margin:0; font-family: helvetica, sans-serif; font-size: 4em; color: #ffffff; position:absolute; top:50%; margin-top:-.8em; text-align:center; width:100%; z-index:1; opacity:0; -webkit-transition: all linear .3s; -moz-transition: all linear .3s; -ms-transition: all linear .3s; transition: all linear .3s; } |