CSS 悬停闪烁

Question

我已经查看了其他问题和答案，但它似乎对我没有任何帮助 - 这种悬停效果在 Safari 上运行完美，有四个方向，左、右、上和下第一个层在所述方向上滑动。但是在 Chrome 上，没有滑动 Action ，而且有闪烁。有任何想法吗？

codepen.io/anon/pen/VYQQbK

Answer 1

你需要改变

.left:hover {
    left: -100%;
}

到

.left:hover {
    margin-left: -100%;
}

这是一个固定的例子:

html, body, .container, .box {
	margin: 0;
	padding: 0;
}
h1,
h3,
h4,
h5,
body {
	color: #fff;
	text-align: center;
	font-family: 'oswald';
}

h2,p {
	width: 75%;
	margin: 0 auto;
	font-size: 16px;
}
p {
	padding: 15px;
}
img {
	width: 120px;
	height: auto;
	border-radius: 50%;
	border: 3px solid white;
}
.container {
	width: 100%;
	height: 100vh;
	min-height: 100%;
}
.box {
	width: 33.3%;
	float: left;
	height: 100%;
	position: relative;
}
.front-layer, .back-layer {
	height: 100%;
}
.front-layer {
	z-index: 1;
  background-color: purple;
  position: absolute;
}
.back-layer {
	z-index: -1;
	background-color: #2BAEFF;
  position: realtive;
}
.front-layer > div, .back-layer > div {
	top: 10%;
	position: relative;
}

.up, .down, .left, .right {
	-webkit-transition: 1.2s;
	-webkit-transform: 1.2s;
	transition: 1.2s;
	transform: 1.2s;
	width: 100%;
	-webkit-transform-style: preserve-3d; /* Safari, Chrome & Opera support */
  	transform-style: preserve-3d; /* IE support */
}
.up:hover, .down:hover, .left:hover, .right:hover {
	-webkit-transition: all 1.2s;
	-webkit-transform: 1.2s;
	transition: all 1.2s;
	transform: 1.2s;
	opacity: 0;
}

.left:hover {
	margin-left: -100%;
}

<div class="container">
	<div class="box"><!-- info box start -->
		<div class="front-layer left">
			<div>
				<img class="click" src="../Boxes/imgs/person.png">		
					<h2>John Snow</h2>
						<p>Meet John, our resident content editor working on our advertising content and managing the marketing.</p>
			</div>
		</div>
		<div class="back-layer">
			<div>
				<img src="../Boxes/imgs/goofy.png">
				<p>Hey, my name is John, and here's some gibberish. Cupcake ipsum dolor sit amet candy canes muffin gingerbread I love. Dragée pudding jelly-o candy canes cake tart pastry sesame snaps. I love liquorice I love apple pie.</p>
			</div>
		</div>
	</div> <!-- info box end -->
</div>

更新:

有诀窍:

.up:hover {
    margin-top: -100%;
}
.down:hover {
    margin-top: 200%;
}
.left:hover {
    margin-left: -100%;
}
.right:hover {
    margin-left: 200%;
}