Ever since I added "position absoulte" to my div ".container" in my code below, my CSS animate code zooms in from the bottom then hiccups and positions itself to the center.
How can I make my animate zoom just zoom in right to the center without this hiccup where it goes down first then a second later it automatically moves to the center?
If I remove the position absolute from the .container div the animate zoom works just fine but it's not centered anymore vertically (just horizontally). The reason I used position absolute and left 0 and right 0 was to center it both ways.
Here is my code:
* {
box-sizing: border-box;
}
html,
body {
height: 100%;
margin: 0 auto;
color: white;
text-align: center;
font-family: 'Lato', serif;
background: linear-gradient(white 70px, #007580 70px);
-webkit-text-size-adjust: none;
}
header,
footer {
background: #007580
}
body,
main {
display: flex;
flex: 1;
}
body {
flex-flow: column;
}
header {
min-height: 35px;
}
footer {
min-height: 35px;
}
section {
margin: auto;
width: 95%;
height: 100%;
color: black;
background-color: white;
}
.categories {
position: relative;
top: 3px;
color: white;
font-size: 16px;
font-weight: 300;
word-spacing: 26px;
padding-bottom: 2px;
}
.categories a {
text-decoration: none;
color: inherit;
}
.legal {
position: absolute;
bottom: 0;
width: 100%;
height: 30px;
font-weight: 300;
word-spacing: 15px;
}
.legal a {
text-decoration: none;
font-size: 14px;
color: white;
}
.quote {
position: relative;
margin: auto;
font-size: 20px;
font-weight: 300;
bottom: 80px;
height: 0;
}
.searchcontainer {
position: relative;
height: 0;
bottom: 43px;
margin: auto;
width: 380px;
;
}
input[type=text] {
width: 100%;
display: inline-block;
border: 2px solid #ddd;
border-radius: 4px;
padding: 6px 0 7px 40px;
background-image: url('https://image.ibb.co/j9esac/searchicon.png');
background-position: 10px 6px;
background-repeat: no-repeat;
font-size: 16px;
background-color: white;
}
.innercircle {
height: 89px;
width: 89px;
border-radius: 50%;
background-color: white;
margin: auto;
position: relative;
bottom: 93px;
}
.outercircle {
height: 120px;
width: 120px;
border-radius: 50%;
background-color: #007580;
margin: auto;
position: relative;
top: 11px;
}
.D {
font-size: 100px;
font-weight: 100;
position: relative;
bottom: 196px;
right: 3px;
margin: auto;
color: #007580;
height: 0;
font-family: 'Amiri', serif;
letter-spacing: -10px;
}
.D a {
text-decoration: none;
color: inherit;
}
.R {
font-size: 55px;
font-weight: 100;
position: relative;
bottom: 173px;
right: 2px;
margin: auto;
color: #007580;
height: 0;
font-family: 'Amiri', serif;
letter-spacing: -10px;
}
.R a {
text-decoration: none;
color: inherit;
}
.ICONwhatsnew {
position: relative;
margin: auto;
bottom: 194px;
right: 191px;
width: 0;
display: block;
height: 0;
}
.ICONwhatsnew a {
text-decoration: none;
color: inherit;
}
.ICONworldlanguages {
position: relative;
margin: auto;
bottom: 190px;
right: 116px;
width: 0;
display: block;
height: 0;
}
.ICONworldlanguages a {
text-decoration: none;
color: inherit;
}
.ICONsignin {
position: relative;
margin: auto;
bottom: 192px;
left: 83px;
width: 0;
display: block;
height: 0;
}
.ICONsignin a {
text-decoration: none;
color: inherit;
}
.ICONcart {
position: relative;
margin: auto;
bottom: 192px;
left: 149px;
width: 0;
display: block;
height: 0;
}
.ICONcart a {
text-decoration: none;
color: inherit;
}
.container {
font-size: 17px;
font-weight: 400;
color: #007580;
top: 50%;
left: 0;
right: 0;
position: absolute;
}
input[type=unams] {
width: 80%;
padding: 12px 45px;
margin: 22px 0 0 0;
border: 1px solid #007580;
box-sizing: border-box;
border-radius: 0px;
-webkit-appearance: none;
font-size: 17px;
background-image: url('https://image.ibb.co/fZHHnc/signin.png');
background-position: 10px 8px;
background-repeat: no-repeat;
background-size: 25px;
}
input[type=password] {
width: 80%;
padding: 12px 45px;
/* first is how big you want the input box 2nd is positioning of word password */
margin: 22px 0 15px 0;
border: 1px solid #007580;
box-sizing: border-box;
border-radius: 0px;
-webkit-appearance: none;
font-size: 17px;
background-image: url('https://image.ibb.co/jC7gfx/lock.png');
background-position: 10px 8px;
background-repeat: no-repeat;
background-size: 25px;
}
.buttonlg {
background-color: #007580;
border: none;
color: white;
width: 25%;
font-size: 17px;
height: 38px;
margin: auto;
text-align: center;
}
.outerform {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.innerform {
width: 90%;
height: 90%;
}
.box {
background-color: white;
border: 1px solid #007580;
height: 100%;
}
.animate {
-webkit-animation: animatezoom 0.6s;
animation: animatezoom 0.6s
}
@-webkit-keyframes animatezoom {
from {
-webkit-transform: scale(0)
}
to {
-webkit-transform: scale(1)
}
}
::-webkit-input-placeholder {
/* WebKit browsers */
color: lightgrey;
opacity: 1 !important;
}
.circlelogo1 {
background: #007580;
border-radius: 50%;
height: 30px;
width: 30px;
position: relative;
margin: auto;
/*
Child elements with absolute positioning will be
positioned relative to this div
*/
}
.circlelogo2 {
position: absolute;
background: white;
border-radius: 50%;
height: 18px;
width: 18px;
/*
Put top edge and left edge in the center
*/
top: 50%;
left: 50%;
margin: -9px 0px 0px -9px;
/*
Offset the position correctly with
minus half of the width and minus half of the height
*/
}<div class="outercircle"></div>
<div class="innercircle"></div>
<div class="D">
<a href="index.html">D</a>
</div>
<div class="R">
<a href="index.html">R</a>
</div>
<div class="quote">
You will always be your greatest investment.
</div>
<div class="searchcontainer">
<form>
<input name="search" placeholder="Search all resources..." type="text">
</form>
</div>
<div class="ICONsignin">
<a href="signin.html"><img height="37px" src="https://svgshare.com/i/5SR.svg"></a>
</div>
<div class="ICONcart">
<a href="#"><img height="39px" src="https://svgshare.com/i/5SE.svg"></a>
</div>
<div class="ICONworldlanguages">
<a href="#"><img height="34px" src="https://svgshare.com/i/5XW.svg"></a>
</div>
<div class="ICONwhatsnew">
<a href="#"><img height="43px" src="https://svgshare.com/i/5aX.svg"></a>
</div>
<header>
<div class="categories">
<a href="#"><b>Categories</b></a> <a href="#home">Newest</a> <a href="#about">Popular</a> <a href="#about">Music</a> <a href="#about">Youth</a>
</div>
</header>
<main>
<section>
<div class="outerform">
<div class="innerform">
<form class="animate box">
<div class="container">
<div class="circlelogo1">
<div class="circlelogo2">
</div>
</div>
<input type="unams" placeholder="Username" name="uname" required>
<input type="password" placeholder="Password" name="psw" required><br>
<button class="buttonlg" type="submit">Log In</button>
</div>
</form>
</div>
</div>
</section>
</main>
<footer>
<div class="legal">
<a href="#home">Contact</a> <a href="#home">Privacy</a> <a href="#about">Terms</a> <a href="#about">Copyright</a> <a href="#home">About</a>
</div>
</footer>You are using position:absolute and the parent element is not set with relative so the form is not relative to the scaled container which is creating this issue. You need to set position:relative to the parent container and then adjust the centering:
.box {
...
position:relative; /*Added this*/
}
.container {
...
transform:translate(0,-50%); /*Added this*/
top: 50%;
...
}
Here is the full code:
* {
box-sizing: border-box;
}
html,
body {
height: 100%;
margin: 0 auto;
color: white;
text-align: center;
font-family: 'Lato', serif;
background: linear-gradient(white 70px, #007580 70px);
-webkit-text-size-adjust: none;
}
header,
footer {
background: #007580
}
body,
main {
display: flex;
flex: 1;
}
body {
flex-flow: column;
}
header {
min-height: 35px;
}
footer {
min-height: 35px;
}
section {
margin: auto;
width: 95%;
height: 100%;
color: black;
background-color: white;
}
.categories {
position: relative;
top: 3px;
color: white;
font-size: 16px;
font-weight: 300;
word-spacing: 26px;
padding-bottom: 2px;
}
.categories a {
text-decoration: none;
color: inherit;
}
.legal {
position: absolute;
bottom: 0;
width: 100%;
height: 30px;
font-weight: 300;
word-spacing: 15px;
}
.legal a {
text-decoration: none;
font-size: 14px;
color: white;
}
.quote {
position: relative;
margin: auto;
font-size: 20px;
font-weight: 300;
bottom: 80px;
height: 0;
}
.searchcontainer {
position: relative;
height: 0;
bottom: 43px;
margin: auto;
width: 380px;
;
}
input[type=text] {
width: 100%;
display: inline-block;
border: 2px solid #ddd;
border-radius: 4px;
padding: 6px 0 7px 40px;
background-image: url('https://image.ibb.co/j9esac/searchicon.png');
background-position: 10px 6px;
background-repeat: no-repeat;
font-size: 16px;
background-color: white;
}
.innercircle {
height: 89px;
width: 89px;
border-radius: 50%;
background-color: white;
margin: auto;
position: relative;
bottom: 93px;
}
.outercircle {
height: 120px;
width: 120px;
border-radius: 50%;
background-color: #007580;
margin: auto;
position: relative;
top: 11px;
}
.D {
font-size: 100px;
font-weight: 100;
position: relative;
bottom: 196px;
right: 3px;
margin: auto;
color: #007580;
height: 0;
font-family: 'Amiri', serif;
letter-spacing: -10px;
}
.D a {
text-decoration: none;
color: inherit;
}
.R {
font-size: 55px;
font-weight: 100;
position: relative;
bottom: 173px;
right: 2px;
margin: auto;
color: #007580;
height: 0;
font-family: 'Amiri', serif;
letter-spacing: -10px;
}
.R a {
text-decoration: none;
color: inherit;
}
.ICONwhatsnew {
position: relative;
margin: auto;
bottom: 194px;
right: 191px;
width: 0;
display: block;
height: 0;
}
.ICONwhatsnew a {
text-decoration: none;
color: inherit;
}
.ICONworldlanguages {
position: relative;
margin: auto;
bottom: 190px;
right: 116px;
width: 0;
display: block;
height: 0;
}
.ICONworldlanguages a {
text-decoration: none;
color: inherit;
}
.ICONsignin {
position: relative;
margin: auto;
bottom: 192px;
left: 83px;
width: 0;
display: block;
height: 0;
}
.ICONsignin a {
text-decoration: none;
color: inherit;
}
.ICONcart {
position: relative;
margin: auto;
bottom: 192px;
left: 149px;
width: 0;
display: block;
height: 0;
}
.ICONcart a {
text-decoration: none;
color: inherit;
}
.container {
font-size: 17px;
font-weight: 400;
color: #007580;
transform:translate(0,-50%);
top: 50%;
left: 0;
right: 0;
position: absolute;
}
input[type=unams] {
width: 80%;
padding: 12px 45px;
margin: 22px 0 0 0;
border: 1px solid #007580;
box-sizing: border-box;
border-radius: 0px;
-webkit-appearance: none;
font-size: 17px;
background-image: url('https://image.ibb.co/fZHHnc/signin.png');
background-position: 10px 8px;
background-repeat: no-repeat;
background-size: 25px;
}
input[type=password] {
width: 80%;
padding: 12px 45px;
/* first is how big you want the input box 2nd is positioning of word password */
margin: 22px 0 15px 0;
border: 1px solid #007580;
box-sizing: border-box;
border-radius: 0px;
-webkit-appearance: none;
font-size: 17px;
background-image: url('https://image.ibb.co/jC7gfx/lock.png');
background-position: 10px 8px;
background-repeat: no-repeat;
background-size: 25px;
}
.buttonlg {
background-color: #007580;
border: none;
color: white;
width: 25%;
font-size: 17px;
height: 38px;
margin: auto;
text-align: center;
}
.outerform {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.innerform {
width: 90%;
height: 90%;
}
.box {
background-color: white;
border: 1px solid #007580;
height: 100%;
position:relative;
}
.animate {
-webkit-animation: animatezoom 0.6s;
animation: animatezoom 0.6s
}
@-webkit-keyframes animatezoom {
from {
-webkit-transform: scale(0)
}
to {
-webkit-transform: scale(1)
}
}
::-webkit-input-placeholder {
/* WebKit browsers */
color: lightgrey;
opacity: 1 !important;
}
.circlelogo1 {
background: #007580;
border-radius: 50%;
height: 30px;
width: 30px;
position: relative;
margin: auto;
/*
Child elements with absolute positioning will be
positioned relative to this div
*/
}
.circlelogo2 {
position: absolute;
background: white;
border-radius: 50%;
height: 18px;
width: 18px;
/*
Put top edge and left edge in the center
*/
top: 50%;
left: 50%;
margin: -9px 0px 0px -9px;
/*
Offset the position correctly with
minus half of the width and minus half of the height
*/
}<div class="outercircle"></div>
<div class="innercircle"></div>
<div class="D">
<a href="index.html">D</a>
</div>
<div class="R">
<a href="index.html">R</a>
</div>
<div class="quote">
You will always be your greatest investment.
</div>
<div class="searchcontainer">
<form>
<input name="search" placeholder="Search all resources..." type="text">
</form>
</div>
<div class="ICONsignin">
<a href="signin.html"><img height="37px" src="https://svgshare.com/i/5SR.svg"></a>
</div>
<div class="ICONcart">
<a href="#"><img height="39px" src="https://svgshare.com/i/5SE.svg"></a>
</div>
<div class="ICONworldlanguages">
<a href="#"><img height="34px" src="https://svgshare.com/i/5XW.svg"></a>
</div>
<div class="ICONwhatsnew">
<a href="#"><img height="43px" src="https://svgshare.com/i/5aX.svg"></a>
</div>
<header>
<div class="categories">
<a href="#"><b>Categories</b></a> <a href="#home">Newest</a> <a href="#about">Popular</a> <a href="#about">Music</a> <a href="#about">Youth</a>
</div>
</header>
<main>
<section>
<div class="outerform">
<div class="innerform">
<form class="animate box">
<div class="container">
<div class="circlelogo1">
<div class="circlelogo2">
</div>
</div>
<input type="unams" placeholder="Username" name="uname" required>
<input type="password" placeholder="Password" name="psw" required><br>
<button class="buttonlg" type="submit">Log In</button>
</div>
</form>
</div>
</div>
</section>
</main>
<footer>
<div class="legal">
<a href="#home">Contact</a> <a href="#home">Privacy</a> <a href="#about">Terms</a> <a href="#about">Copyright</a> <a href="#home">About</a>
</div>
</footer>By the way it's better to consider another way than positioned element to center. You can do it with flex since you are already using it:
.box {
....
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
Then remove everything related to positionning from .container.
Here is the full code:
* {
box-sizing: border-box;
}
html,
body {
height: 100%;
margin: 0 auto;
color: white;
text-align: center;
font-family: 'Lato', serif;
background: linear-gradient(white 70px, #007580 70px);
-webkit-text-size-adjust: none;
}
header,
footer {
background: #007580
}
body,
main {
display: flex;
flex: 1;
}
body {
flex-flow: column;
}
header {
min-height: 35px;
}
footer {
min-height: 35px;
}
section {
margin: auto;
width: 95%;
height: 100%;
color: black;
background-color: white;
}
.categories {
position: relative;
top: 3px;
color: white;
font-size: 16px;
font-weight: 300;
word-spacing: 26px;
padding-bottom: 2px;
}
.categories a {
text-decoration: none;
color: inherit;
}
.legal {
position: absolute;
bottom: 0;
width: 100%;
height: 30px;
font-weight: 300;
word-spacing: 15px;
}
.legal a {
text-decoration: none;
font-size: 14px;
color: white;
}
.quote {
position: relative;
margin: auto;
font-size: 20px;
font-weight: 300;
bottom: 80px;
height: 0;
}
.searchcontainer {
position: relative;
height: 0;
bottom: 43px;
margin: auto;
width: 380px;
;
}
input[type=text] {
width: 100%;
display: inline-block;
border: 2px solid #ddd;
border-radius: 4px;
padding: 6px 0 7px 40px;
background-image: url('https://image.ibb.co/j9esac/searchicon.png');
background-position: 10px 6px;
background-repeat: no-repeat;
font-size: 16px;
background-color: white;
}
.innercircle {
height: 89px;
width: 89px;
border-radius: 50%;
background-color: white;
margin: auto;
position: relative;
bottom: 93px;
}
.outercircle {
height: 120px;
width: 120px;
border-radius: 50%;
background-color: #007580;
margin: auto;
position: relative;
top: 11px;
}
.D {
font-size: 100px;
font-weight: 100;
position: relative;
bottom: 196px;
right: 3px;
margin: auto;
color: #007580;
height: 0;
font-family: 'Amiri', serif;
letter-spacing: -10px;
}
.D a {
text-decoration: none;
color: inherit;
}
.R {
font-size: 55px;
font-weight: 100;
position: relative;
bottom: 173px;
right: 2px;
margin: auto;
color: #007580;
height: 0;
font-family: 'Amiri', serif;
letter-spacing: -10px;
}
.R a {
text-decoration: none;
color: inherit;
}
.ICONwhatsnew {
position: relative;
margin: auto;
bottom: 194px;
right: 191px;
width: 0;
display: block;
height: 0;
}
.ICONwhatsnew a {
text-decoration: none;
color: inherit;
}
.ICONworldlanguages {
position: relative;
margin: auto;
bottom: 190px;
right: 116px;
width: 0;
display: block;
height: 0;
}
.ICONworldlanguages a {
text-decoration: none;
color: inherit;
}
.ICONsignin {
position: relative;
margin: auto;
bottom: 192px;
left: 83px;
width: 0;
display: block;
height: 0;
}
.ICONsignin a {
text-decoration: none;
color: inherit;
}
.ICONcart {
position: relative;
margin: auto;
bottom: 192px;
left: 149px;
width: 0;
display: block;
height: 0;
}
.ICONcart a {
text-decoration: none;
color: inherit;
}
.container {
font-size: 17px;
font-weight: 400;
color: #007580;
}
input[type=unams] {
width: 80%;
padding: 12px 45px;
margin: 22px 0 0 0;
border: 1px solid #007580;
box-sizing: border-box;
border-radius: 0px;
-webkit-appearance: none;
font-size: 17px;
background-image: url('https://image.ibb.co/fZHHnc/signin.png');
background-position: 10px 8px;
background-repeat: no-repeat;
background-size: 25px;
}
input[type=password] {
width: 80%;
padding: 12px 45px;
/* first is how big you want the input box 2nd is positioning of word password */
margin: 22px 0 15px 0;
border: 1px solid #007580;
box-sizing: border-box;
border-radius: 0px;
-webkit-appearance: none;
font-size: 17px;
background-image: url('https://image.ibb.co/jC7gfx/lock.png');
background-position: 10px 8px;
background-repeat: no-repeat;
background-size: 25px;
}
.buttonlg {
background-color: #007580;
border: none;
color: white;
width: 25%;
font-size: 17px;
height: 38px;
margin: auto;
text-align: center;
}
.outerform {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.innerform {
width: 90%;
height: 90%;
}
.box {
background-color: white;
border: 1px solid #007580;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.animate {
-webkit-animation: animatezoom 0.6s;
animation: animatezoom 0.6s
}
@-webkit-keyframes animatezoom {
from {
-webkit-transform: scale(0)
}
to {
-webkit-transform: scale(1)
}
}
::-webkit-input-placeholder {
/* WebKit browsers */
color: lightgrey;
opacity: 1 !important;
}
.circlelogo1 {
background: #007580;
border-radius: 50%;
height: 30px;
width: 30px;
position: relative;
margin: auto;
/*
Child elements with absolute positioning will be
positioned relative to this div
*/
}
.circlelogo2 {
position: absolute;
background: white;
border-radius: 50%;
height: 18px;
width: 18px;
/*
Put top edge and left edge in the center
*/
top: 50%;
left: 50%;
margin: -9px 0px 0px -9px;
/*
Offset the position correctly with
minus half of the width and minus half of the height
*/
}<div class="outercircle"></div>
<div class="innercircle"></div>
<div class="D">
<a href="index.html">D</a>
</div>
<div class="R">
<a href="index.html">R</a>
</div>
<div class="quote">
You will always be your greatest investment.
</div>
<div class="searchcontainer">
<form>
<input name="search" placeholder="Search all resources..." type="text">
</form>
</div>
<div class="ICONsignin">
<a href="signin.html"><img height="37px" src="https://svgshare.com/i/5SR.svg"></a>
</div>
<div class="ICONcart">
<a href="#"><img height="39px" src="https://svgshare.com/i/5SE.svg"></a>
</div>
<div class="ICONworldlanguages">
<a href="#"><img height="34px" src="https://svgshare.com/i/5XW.svg"></a>
</div>
<div class="ICONwhatsnew">
<a href="#"><img height="43px" src="https://svgshare.com/i/5aX.svg"></a>
</div>
<header>
<div class="categories">
<a href="#"><b>Categories</b></a> <a href="#home">Newest</a> <a href="#about">Popular</a> <a href="#about">Music</a> <a href="#about">Youth</a>
</div>
</header>
<main>
<section>
<div class="outerform">
<div class="innerform">
<form class="animate box">
<div class="container">
<div class="circlelogo1">
<div class="circlelogo2">
</div>
</div>
<input type="unams" placeholder="Username" name="uname" required>
<input type="password" placeholder="Password" name="psw" required><br>
<button class="buttonlg" type="submit">Log In</button>
</div>
</form>
</div>
</div>
</section>
</main>
<footer>
<div class="legal">
<a href="#home">Contact</a> <a href="#home">Privacy</a> <a href="#about">Terms</a> <a href="#about">Copyright</a> <a href="#home">About</a>
</div>
</footer>