После анимации моего текста с помощью CSS3, почему он не исчезает полностью? - PullRequest
Новая
       7

После анимации моего текста с помощью CSS3, почему он не исчезает полностью?

1 голос
/ 16 февраля 2020

Когда слова 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>

1 Ответ

2 голосов
/ 16 февраля 2020

Надеюсь, это поможет вам. 

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>
...