Question

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

看起来不错，工作也很顺利。困扰我的是为什么经过几次尝试后我不得不将关键帧设置为24％和74％而不是50％？ 50％的动画看起来不稳定。我真的不喜欢蒙着眼睛做事，所以我很感激你的帮助。

这是快速的脏实现：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

我认为你所谈论的这种不稳定的影响更多地与css工作中的动画方式有关。由于缓动适用于它的整个扩展，这意味着，想象一些像这样的关键帧：

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

即使您可以为动画添加缓动，受影响的元素也会从右侧50像素开始，然后开始向左移动到其初始位置，并且在中心框架中将突然改变方向以再次到达最后位置。问题在于这种突然的变化，这就是它变得不稳定的原因。

为了避免这种情况，您可能需要使用javascript，或者正如您所见，调整关键帧以最大限度地减少这种不良视觉效果。

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

1 个答案: