用CSS3对我的文本进行动画处理后，为什么它没有完全消失?

当单词Front End完成动画时，可以在div的顶部看到一点点，带有一类.wrapper。我唯一能够弄清楚如何解决这个问题的是使其字体更小。如何解决保持元素当前大小的问题？

body{
	background: lightblue;
}
.wrapper{
	width: 50%;
	height: auto;
	padding:5%;	
}
.frontEnd{
	-webkit-animation: move 2s ease-in-out normal;
animation: move 2s ease-in-out normal;
}
@-webkit-keyframes move{
	0% {transform: translate(100%, 25%);}
	100%{transform: translate(7%, 25%);}
}
.webDeveloper{
	transform: translate(0%, 45%);
}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>header animations</title>
	<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
	<div class="wrapper">
		<h1>
			<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 818 323.15">
				<defs>
					<style>
						.frontEnd {
							font-size: 101px;
							fill: #a4844e;
							font-family: BrandonGrotesque-Thin, Brandon Grotesque;
							font-weight: 200;
						}
						.webDeveloper {
							font-size: 70px;
							fill: #336699;
							font-family: BrandonGrotesque-Medium, Brandon Grotesque;
							font-weight: 500;
						}
						.webGraphics {
							font-size: 55px;
							fill: #a4844e;
							font-family: BrandonGrotesque-Thin, Brandon Grotesque;
							font-weight: 200;
						}
					</style>
				</defs>
				<title>creativeCogAnimation</title>
				<g><text class="frontEnd">FRONT END</text></g>
				<g><text class="webDeveloper">
						<tspan class="webDeveloper">WEB DEVELOPER</tspan>
					</text></g>
				<g><text class="webGraphics" transform="translate(313 274.65)">web &amp; graphic design</text></g>
			</svg>
		</h1>
	</div>
</body>
</html>

希望对您有所帮助。

body {
background: lightblue;
}
.wrapper {
width: 50%;
height: auto;
padding: 5%;
}
.frontEnd {
-webkit-animation: move 2s ease-in-out normal;
animation: move 2s ease-in-out normal;
transform: translate(0%, 25%);
}
@-webkit-keyframes move {
0% {
transform: translate(100%, 25%);
}
100% {
transform: translate(0%, 25%);
}
}
.webDeveloper {
transform: translate(0%, 45%);
}

<div class="wrapper">
<h1>
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 818 323.15">
				<defs>
					<style>
						.frontEnd {
							font-size: 101px;
							fill: #a4844e;
							font-family: BrandonGrotesque-Thin, Brandon Grotesque;
							font-weight: 200;
						}
						.webDeveloper {
							font-size: 70px;
							fill: #336699;
							font-family: BrandonGrotesque-Medium, Brandon Grotesque;
							font-weight: 500;
						}
						.webGraphics {
							font-size: 55px;
							fill: #a4844e;
							font-family: BrandonGrotesque-Thin, Brandon Grotesque;
							font-weight: 200;
						}
					</style>
				</defs>
				<title>creativeCogAnimation</title>
				<g><text class="frontEnd" >FRONT END</text></g>
						
				<g><text class="webDeveloper">
						<tspan class="webDeveloper">WEB DEVELOPER</tspan>
					</text></g>
				<g><text class="webGraphics" transform="translate(313 274.65)">web &amp; graphic design</text></g>
			</svg>
</h1>
</div>

相关内容

最新更新

热门标签：