1 Replies - 1081 Views - Last Post: 23 September 2013 - 06:08 AM

#1 njgmoorman  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 65
  • Joined: 02-October 12

Text moves with animation

Posted 23 September 2013 - 05:44 AM

I'm trying to figure out how to have the text animation at the top of the page still happen but not cause the link to move.

<DOCTYPE HTML!>
<html>
	<head>
		<title>Web Design Home Page</title>
		<link rel="stylesheet" type="text/css" href="webdesign.css" />
		</head>
	
	<body>
		<div class="header">
			<center>& HELLO &</center>
		</div>
		<br><br><br>
		<div class="links">
			<a href="sports.html" class="sports">sports</a>
		</div>
	</body>
</html>



@font-face {
	font-family: monster;
	src: url('fonts/monster.ttf');
}

@font-face {
	font-family: checkbook;
	src: url('fonts/checkbook.ttf');
}

@font-face {
	font-family: allstarresort;
	src: url('fonts/allstarresort.ttf');
}

body {
	background: #00b7ea; /* Old browsers */
	background: -moz-radial-gradient(center, ellipse cover,  #00b7ea 0%, #009ec3 100%); /* FF3.6+ */
	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#00b7ea), color-stop(100%,#009ec3)); /* Chrome,Safari4+ */
	background: -webkit-radial-gradient(center, ellipse cover,  #00b7ea 0%,#009ec3 100%); /* Chrome10+,Safari5.1+ */
	background: -o-radial-gradient(center, ellipse cover,  #00b7ea 0%,#009ec3 100%); /* Opera 12+ */
	background: -ms-radial-gradient(center, ellipse cover,  #00b7ea 0%,#009ec3 100%); /* IE10+ */
	background: radial-gradient(ellipse at center,  #00b7ea 0%,#009ec3 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=1 ); /* IE6-9 fallback on horizontal gradient*/
}

.header {
	font-family: monster;
	font-weight: bold;
	font-size: 50px;
	margin: auto;
	animation: headerColor 1.5s infinite alternate;
	-webkit-animation: headerColor 1.5s infinite alternate;
}

.links {
	margin: auto;
	text-align: center;
}

.sports {
	font-family: allstarresort;
	color: white;
	font-size: 30px;
}

@keyframes headerColor {
	from {color:black; font-size:50px;}
	to{color:red; font-size:75px;}
}

@-webkit-keyframes headerColor {
	from {color:black; font-size:50px;}
	to{color:red; font-size:75px;}
}



Is This A Good Question/Topic? 0
  • +

Replies To: Text moves with animation

#2 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3480
  • View blog
  • Posts: 11,876
  • Joined: 12-December 12

Re: Text moves with animation

Posted 23 September 2013 - 06:08 AM

You could put the element you wish to animate in a div with a fixed height. This way the animation can happen within this div and not push the rest of the page-content down.

BTW Your DOCTYPE declaration is incorrect and the center tag is obsolete.

And using all these:

<br><br><br>

to separate content is a poor practice: use CSS (margins, padding, etc.).

This post has been edited by andrewsw: 23 September 2013 - 06:09 AM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1