CSS动画中奇怪的关键帧设置

Question

受本教程http://tympanus.net/codrops/2014/01/07/shape-hover-effect-with-svg/的启发，我决定制作类似效果的纯css版本。

而且它看起来很好，工作起来也很流畅。让我烦恼的是，为什么在几次尝试之后，我必须将关键帧设置为24%和74%，而不是50%？50%的动画看起来起伏不定。我真的不喜欢蒙住眼睛做事情，所以我将非常感谢你的帮助。

下面是一个快速的脏实现：

​

	html {
		background: #ccc;
	}
	.card {
		position: relative;
		display: inline-block;
		height: 400px;
		width: 200px;
		background: #000;
		margin: 50px;
		overflow: hidden;
	}
	
	.card-head {
		position: absolute;
		background: #000;
		height: 400px;
		width: 400px;
		border-radius: 50%;
		left: -100px;
		top: -173px;
		z-index: 10;
		-webkit-animation-name: carda;
		animation-name: carda;
	}
	
	.card-extend {
		position: absolute;
		background: #fff;
		height: 400px;
		width: 400px;
		bottom: -200px;
		left: -100px;
		z-index: 5;
		-webkit-animation-name: cardb;
		animation-name: cardb;
	}
	
	.card-animated {
		-webkit-animation-duration: .2s;
		animation-duration: .2s;
		-webkit-animation-fill-mode: forwards;
		animation-fill-mode: forwards;
		-webkit-animation-timing-function:ease-in-out;
    	animation-timing-function:ease-in-out;
	}
	
	.card:hover .card-head,
	.card:focus .card-head{
		-webkit-animation-name: cardhovera;
		animation-name: cardhovera;
	}
	
	.card:hover .card-extend,
	.card:focus .card-extend{
		-webkit-animation-name: cardhoverb;
		animation-name: cardhoverb;
	}
	
	@-webkit-keyframes carda {
		from {
			border-radius: 0%;
			top: -320px;
			z-index: 2;
		}
		24% {
			top: -320px;
			border-radius: 25%;
			z-index: 2;
		}
		to {			
			border-radius: 50%;
			top: -173px;
		}
	}
	
	@keyframes carda {
		from {
			border-radius: 0%;
			top: -320px;
			z-index: 2;
		}
		24% {
			top: -320px;
			border-radius: 25%;
			z-index: 2;
		}
		to {			
			border-radius: 50%;
			top: -173px;
		}
	}
	
	@-webkit-keyframes cardhovera {
		from {
			border-radius: 50%;
			top: -173px;
		}
		76% {
			top: -320px;
			border-radius: 25%;
			z-index: 2;
		}
		to {
			border-radius: 0%;
			top: -320px;
			z-index: 2;
		}
	}
	
	@keyframes cardhovera {
		from {
			border-radius: 50%;
			top: -173px;
		}
		76% {
			top: -320px;
			border-radius: 25%;
			z-index: 2;
		}
		to {
			border-radius: 0%;
			top: -320px;
			z-index: 2;
		}
	}
	
	@-webkit-keyframes cardb {
		from {
			bottom: -53px;
			border-radius: 50%;
		}
		76% {
			bottom: -200px;
			border-radius: 25%;
			
		}
		to {			
			border-radius: 0;
			z-index: 5;
			bottom: -200px;
		}
	}
	
	@keyframes cardb {
		from {
			bottom: -53px;
			border-radius: 50%;
		}
		76% {
			bottom: -200px;
			border-radius: 25%;
			
		}
		to {			
			border-radius: 0;
			z-index: 5;
			bottom: -200px;
		}
	}
	@-webkit-keyframes cardhoverb {
		from {
			border-radius: 0;
			z-index: 5;
			bottom: -200px;
		}
		24% {
			bottom: -200px;
			border-radius: 25%;
		}
		to {
			bottom: -53px;
			border-radius: 50%;
		}
	}
	
	@keyframes cardhoverb {
		from {
			border-radius: 0;
			z-index: 5;
			bottom: -200px;
		}
		24% {
			bottom: -200px;
			border-radius: 25%;
			
		}
		to {
			bottom: -53px;
			border-radius: 50%;
		}
	}

<div tabindex="0" class="card">
		<div class="card-head card-animated">

		</div>
		<div class="card-extend card-animated">

		</div>
	</div>

​

Answer 1

我认为你所说的这种起伏不定的效果与css中动画的工作方式有更多的关系。当缓动应用于它的整个扩展时，这意味着，想象一些像这样的关键帧：

@keyframes exampleFrames {
        0% {
            transform: translateX(50px)
        }
        50% {
            transform: translateX(0)
        }
        100% {
            transform: translateX(50px)
        }
    }

即使你可以向动画添加缓动，受影响的元素也会从50个像素开始向右移动，并开始向左移动到它的初始位置，并且在中心帧中会突然改变方向，再次到达最后一个位置。问题在于这种突如其来的变化，这就是它之所以起伏不定的原因。

为了避免这一点，你可能需要使用javascript，或者，正如你已经看到的，调整关键帧来最小化这种不希望看到的视觉效果。