Why does padding lead to jumpy animation?
up vote
-1
down vote
favorite
Why does the ::before pseudo element jump during a height transition when I apply top and bottom padding to its parent?
a {
font-size: 2em;
font-family: sans-serif;
text-transform: uppercase;
color: #fff;
text-decoration: none;
position: relative;
/* Removing this padding resolves the animation issue, but why? */
padding: 1em;
}
a::before {
content: "";
width: 0.06em;
height: 0%;
position: absolute;
background: #fff;
left: 0;
transition: height 0.25s linear;
}
a:hover::before {
height: 100%;
bottom: 0;
}
.container {
background: #3a3a3a;
height: 100%;
display: flex;
padding-top: 1em;
justify-content: center;
align-items: flex-start;
}
body,
html {
height: 100%;
margin: 0;
}<div class="container">
<a href="#">Hover Me</a>
</div>html css
edited Nov 21 at 13:06
jnuK
1,4651325
asked Nov 21 at 11:16
Jenyoin
688
add a comment |
up vote
-1
down vote
favorite
Why does the ::before pseudo element jump during a height transition when I apply top and bottom padding to its parent?
a {
font-size: 2em;
font-family: sans-serif;
text-transform: uppercase;
color: #fff;
text-decoration: none;
position: relative;
/* Removing this padding resolves the animation issue, but why? */
padding: 1em;
}
a::before {
content: "";
width: 0.06em;
height: 0%;
position: absolute;
background: #fff;
left: 0;
transition: height 0.25s linear;
}
a:hover::before {
height: 100%;
bottom: 0;
}
.container {
background: #3a3a3a;
height: 100%;
display: flex;
padding-top: 1em;
justify-content: center;
align-items: flex-start;
}
body,
html {
height: 100%;
margin: 0;
}<div class="container">
<a href="#">Hover Me</a>
</div>html css
edited Nov 21 at 13:06
jnuK
1,4651325
asked Nov 21 at 11:16
Jenyoin
688
add a comment |
up vote
-1
down vote
favorite
up vote
-1
down vote
favorite
Why does the ::before pseudo element jump during a height transition when I apply top and bottom padding to its parent?
a {
font-size: 2em;
font-family: sans-serif;
text-transform: uppercase;
color: #fff;
text-decoration: none;
position: relative;
/* Removing this padding resolves the animation issue, but why? */
padding: 1em;
}
a::before {
content: "";
width: 0.06em;
height: 0%;
position: absolute;
background: #fff;
left: 0;
transition: height 0.25s linear;
}
a:hover::before {
height: 100%;
bottom: 0;
}
.container {
background: #3a3a3a;
height: 100%;
display: flex;
padding-top: 1em;
justify-content: center;
align-items: flex-start;
}
body,
html {
height: 100%;
margin: 0;
}<div class="container">
<a href="#">Hover Me</a>
</div>html css
edited Nov 21 at 13:06
jnuK
1,4651325
asked Nov 21 at 11:16
Jenyoin
688
Why does the ::before pseudo element jump during a height transition when I apply top and bottom padding to its parent?
a {
font-size: 2em;
font-family: sans-serif;
text-transform: uppercase;
color: #fff;
text-decoration: none;
position: relative;
/* Removing this padding resolves the animation issue, but why? */
padding: 1em;
}
a::before {
content: "";
width: 0.06em;
height: 0%;
position: absolute;
background: #fff;
left: 0;
transition: height 0.25s linear;
}
a:hover::before {
height: 100%;
bottom: 0;
}
.container {
background: #3a3a3a;
height: 100%;
display: flex;
padding-top: 1em;
justify-content: center;
align-items: flex-start;
}
body,
html {
height: 100%;
margin: 0;
}<div class="container">
<a href="#">Hover Me</a>
</div>a {
font-size: 2em;
font-family: sans-serif;
text-transform: uppercase;
color: #fff;
text-decoration: none;
position: relative;
/* Removing this padding resolves the animation issue, but why? */
padding: 1em;
}
a::before {
content: "";
width: 0.06em;
height: 0%;
position: absolute;
background: #fff;
left: 0;
transition: height 0.25s linear;
}
a:hover::before {
height: 100%;
bottom: 0;
}
.container {
background: #3a3a3a;
height: 100%;
display: flex;
padding-top: 1em;
justify-content: center;
align-items: flex-start;
}
body,
html {
height: 100%;
margin: 0;
}<div class="container">
<a href="#">Hover Me</a>
</div>a {
font-size: 2em;
font-family: sans-serif;
text-transform: uppercase;
color: #fff;
text-decoration: none;
position: relative;
/* Removing this padding resolves the animation issue, but why? */
padding: 1em;
}
a::before {
content: "";
width: 0.06em;
height: 0%;
position: absolute;
background: #fff;
left: 0;
transition: height 0.25s linear;
}
a:hover::before {
height: 100%;
bottom: 0;
}
.container {
background: #3a3a3a;
height: 100%;
display: flex;
padding-top: 1em;
justify-content: center;
align-items: flex-start;
}
body,
html {
height: 100%;
margin: 0;
}<div class="container">
<a href="#">Hover Me</a>
</div>html css
html css
edited Nov 21 at 13:06
jnuK
1,4651325
asked Nov 21 at 11:16
Jenyoin
688
edited Nov 21 at 13:06
jnuK
1,4651325
asked Nov 21 at 11:16
Jenyoin
688
edited Nov 21 at 13:06
jnuK
1,4651325
edited Nov 21 at 13:06
jnuK
1,4651325
edited Nov 21 at 13:06
jnuK
1,4651325
1,4651325
asked Nov 21 at 11:16
Jenyoin
688
asked Nov 21 at 11:16
Jenyoin
688
asked Nov 21 at 11:16
Jenyoin
688
688
add a comment |
add a comment |
3 Answers
3
active
oldest
votes
up vote
1
down vote
accepted
If you have padding on an element, then apply position absolute on one of it's children the padding amount will be added as an offset to that child element.
Say you have padding-top:10px;, it'll become top:10px, i think some browsers do rest this.
DEMO
*,
*:before,
*:after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.test {
width: 100px;
height: 100px;
padding-top: 15px;
border: 5px solid red;
}
.test>div {
height: 50px;
width: 50px;
border: 5px solid red;
}
.test:hover>div {
position: absolute;
/* uncomment this line to see it */
/* top: 0; */
}<div class="test">
<div></div>
</div>Now to fix your issue.
a {
font-size: 2em;
font-family: sans-serif;
text-transform: uppercase;
color: #fff;
text-decoration: none;
position: relative;
padding: 1em;
}
a::before {
content: "";
width: 0.06em;
height: 0%;
position: absolute;
background: #fff;
left: 0;
/* rest the top here */
top: 0;
transition: height 0.25s linear;
}
a:hover::before {
height: 100%;
bottom: 0;
/* unsetting the top because top:0 bottom:0; is full heiht which will prevent the animation the way you want it*/
/* unsetting the top and not the bottom so it goes upward */
top: unset;
}
.container {
background: #3a3a3a;
height: 100%;
display: flex;
padding-top: 1em;
justify-content: center;
align-items: flex-start;
}
body,
html {
height: 100%;
margin: 0;
}<div class="container">
<a href="#">Hover Me</a>
</div>answered Nov 21 at 12:19
Zohir Salak
2,4431414
add a comment |
up vote
1
down vote
Move the bottom: 0 rule from a:hover::before to the a::before rule set.
In general, try to minimize amount of rules in selectors like :hover -- whenever a "hover" rule set applies, the chances of things jumping or moving because of inability to mentally calculate how the layout engine will render things, is ever higher the more properties are overriden. You don't need bottom: 0 there, but if you need to align to the bottom, set it on the same rule set without the :hover to it, i.e. the a::before -- it will be inherited anyway by the element in the "hover" state. If you on the other hand only desire the height of an element to transition as you hover over, then that's the only rule that should be set there, should it not?
answered Nov 21 at 12:43
amn
3,71252962
I like the advice of minimizing:hoverrules and the like. However, in this case I am intentionally changing the anchor point to get the desired animation.
– Jenyoin
Nov 21 at 13:03
Am I to understand you want your white line to spread out from the vertical center of the following block?
– amn
Nov 21 at 13:28
add a comment |
up vote
0
down vote
The issue is your before content is not aligned properly.
Here is the solution...
a {
font-size: 2em;
font-family: sans-serif;
text-transform: uppercase;
color: #fff;
text-decoration: none;
position: relative;
/* Removing this padding resolves the animation issue, but why? */
padding: 1em;
}
a::before {
content: "";
width: 0.06em;
height: 0%;
position: absolute;
background: #fff;
bottom:0;
left: 0;
transition: height 0.25s linear;
}
a:hover::before {
top:0;
height: 100%;
}
.container {
background: #3a3a3a;
height: 100%;
display: flex;
padding-top: 1em;
justify-content: center;
align-items: flex-start;
}
body,
html {
height: 100%;
margin: 0;
}<div class="container">
<a href="#">Hover Me</a>
</div>answered Nov 21 at 11:19
OneJeet
900210
Hi Jeet! That does indeed make the animation not jump, but I would like it to grow upwards and then shrink upwards as in my example. :-)
– Jenyoin
Nov 21 at 11:22
I have updated the code. please check
– OneJeet
Nov 21 at 11:39
This was the animation I created first. But I am trying to do the reverse animation: Grow and shrink upwards, not grow and shrink downwards. Also, I am trying to learn why it happens more so than fixing it.
– Jenyoin
Nov 21 at 11:46
1
This is happening because when you remove top:0; from a::before content, the absolute position doesn't let is align. check developer tool with hover position on to see where it is aligned.
– OneJeet
Nov 21 at 11:55
add a comment |
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
1
down vote
accepted
If you have padding on an element, then apply position absolute on one of it's children the padding amount will be added as an offset to that child element.
Say you have padding-top:10px;, it'll become top:10px, i think some browsers do rest this.
DEMO
*,
*:before,
*:after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.test {
width: 100px;
height: 100px;
padding-top: 15px;
border: 5px solid red;
}
.test>div {
height: 50px;
width: 50px;
border: 5px solid red;
}
.test:hover>div {
position: absolute;
/* uncomment this line to see it */
/* top: 0; */
}<div class="test">
<div></div>
</div>Now to fix your issue.
a {
font-size: 2em;
font-family: sans-serif;
text-transform: uppercase;
color: #fff;
text-decoration: none;
position: relative;
padding: 1em;
}
a::before {
content: "";
width: 0.06em;
height: 0%;
position: absolute;
background: #fff;
left: 0;
/* rest the top here */
top: 0;
transition: height 0.25s linear;
}
a:hover::before {
height: 100%;
bottom: 0;
/* unsetting the top because top:0 bottom:0; is full heiht which will prevent the animation the way you want it*/
/* unsetting the top and not the bottom so it goes upward */
top: unset;
}
.container {
background: #3a3a3a;
height: 100%;
display: flex;
padding-top: 1em;
justify-content: center;
align-items: flex-start;
}
body,
html {
height: 100%;
margin: 0;
}<div class="container">
<a href="#">Hover Me</a>
</div>answered Nov 21 at 12:19
Zohir Salak
2,4431414
add a comment |
up vote
1
down vote
accepted
If you have padding on an element, then apply position absolute on one of it's children the padding amount will be added as an offset to that child element.
Say you have padding-top:10px;, it'll become top:10px, i think some browsers do rest this.
DEMO
*,
*:before,
*:after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.test {
width: 100px;
height: 100px;
padding-top: 15px;
border: 5px solid red;
}
.test>div {
height: 50px;
width: 50px;
border: 5px solid red;
}
.test:hover>div {
position: absolute;
/* uncomment this line to see it */
/* top: 0; */
}<div class="test">
<div></div>
</div>Now to fix your issue.
a {
font-size: 2em;
font-family: sans-serif;
text-transform: uppercase;
color: #fff;
text-decoration: none;
position: relative;
padding: 1em;
}
a::before {
content: "";
width: 0.06em;
height: 0%;
position: absolute;
background: #fff;
left: 0;
/* rest the top here */
top: 0;
transition: height 0.25s linear;
}
a:hover::before {
height: 100%;
bottom: 0;
/* unsetting the top because top:0 bottom:0; is full heiht which will prevent the animation the way you want it*/
/* unsetting the top and not the bottom so it goes upward */
top: unset;
}
.container {
background: #3a3a3a;
height: 100%;
display: flex;
padding-top: 1em;
justify-content: center;
align-items: flex-start;
}
body,
html {
height: 100%;
margin: 0;
}<div class="container">
<a href="#">Hover Me</a>
</div>answered Nov 21 at 12:19
Zohir Salak
2,4431414
add a comment |
up vote
1
down vote
accepted
up vote
1
down vote
accepted
If you have padding on an element, then apply position absolute on one of it's children the padding amount will be added as an offset to that child element.
Say you have padding-top:10px;, it'll become top:10px, i think some browsers do rest this.
DEMO
*,
*:before,
*:after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.test {
width: 100px;
height: 100px;
padding-top: 15px;
border: 5px solid red;
}
.test>div {
height: 50px;
width: 50px;
border: 5px solid red;
}
.test:hover>div {
position: absolute;
/* uncomment this line to see it */
/* top: 0; */
}<div class="test">
<div></div>
</div>Now to fix your issue.
a {
font-size: 2em;
font-family: sans-serif;
text-transform: uppercase;
color: #fff;
text-decoration: none;
position: relative;
padding: 1em;
}
a::before {
content: "";
width: 0.06em;
height: 0%;
position: absolute;
background: #fff;
left: 0;
/* rest the top here */
top: 0;
transition: height 0.25s linear;
}
a:hover::before {
height: 100%;
bottom: 0;
/* unsetting the top because top:0 bottom:0; is full heiht which will prevent the animation the way you want it*/
/* unsetting the top and not the bottom so it goes upward */
top: unset;
}
.container {
background: #3a3a3a;
height: 100%;
display: flex;
padding-top: 1em;
justify-content: center;
align-items: flex-start;
}
body,
html {
height: 100%;
margin: 0;
}<div class="container">
<a href="#">Hover Me</a>
</div>answered Nov 21 at 12:19
Zohir Salak
2,4431414
If you have padding on an element, then apply position absolute on one of it's children the padding amount will be added as an offset to that child element.
Say you have padding-top:10px;, it'll become top:10px, i think some browsers do rest this.
DEMO
*,
*:before,
*:after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.test {
width: 100px;
height: 100px;
padding-top: 15px;
border: 5px solid red;
}
.test>div {
height: 50px;
width: 50px;
border: 5px solid red;
}
.test:hover>div {
position: absolute;
/* uncomment this line to see it */
/* top: 0; */
}<div class="test">
<div></div>
</div>Now to fix your issue.
a {
font-size: 2em;
font-family: sans-serif;
text-transform: uppercase;
color: #fff;
text-decoration: none;
position: relative;
padding: 1em;
}
a::before {
content: "";
width: 0.06em;
height: 0%;
position: absolute;
background: #fff;
left: 0;
/* rest the top here */
top: 0;
transition: height 0.25s linear;
}
a:hover::before {
height: 100%;
bottom: 0;
/* unsetting the top because top:0 bottom:0; is full heiht which will prevent the animation the way you want it*/
/* unsetting the top and not the bottom so it goes upward */
top: unset;
}
.container {
background: #3a3a3a;
height: 100%;
display: flex;
padding-top: 1em;
justify-content: center;
align-items: flex-start;
}
body,
html {
height: 100%;
margin: 0;
}<div class="container">
<a href="#">Hover Me</a>
</div>*,
*:before,
*:after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.test {
width: 100px;
height: 100px;
padding-top: 15px;
border: 5px solid red;
}
.test>div {
height: 50px;
width: 50px;
border: 5px solid red;
}
.test:hover>div {
position: absolute;
/* uncomment this line to see it */
/* top: 0; */
}<div class="test">
<div></div>
</div>*,
*:before,
*:after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.test {
width: 100px;
height: 100px;
padding-top: 15px;
border: 5px solid red;
}
.test>div {
height: 50px;
width: 50px;
border: 5px solid red;
}
.test:hover>div {
position: absolute;
/* uncomment this line to see it */
/* top: 0; */
}<div class="test">
<div></div>
</div>a {
font-size: 2em;
font-family: sans-serif;
text-transform: uppercase;
color: #fff;
text-decoration: none;
position: relative;
padding: 1em;
}
a::before {
content: "";
width: 0.06em;
height: 0%;
position: absolute;
background: #fff;
left: 0;
/* rest the top here */
top: 0;
transition: height 0.25s linear;
}
a:hover::before {
height: 100%;
bottom: 0;
/* unsetting the top because top:0 bottom:0; is full heiht which will prevent the animation the way you want it*/
/* unsetting the top and not the bottom so it goes upward */
top: unset;
}
.container {
background: #3a3a3a;
height: 100%;
display: flex;
padding-top: 1em;
justify-content: center;
align-items: flex-start;
}
body,
html {
height: 100%;
margin: 0;
}<div class="container">
<a href="#">Hover Me</a>
</div>a {
font-size: 2em;
font-family: sans-serif;
text-transform: uppercase;
color: #fff;
text-decoration: none;
position: relative;
padding: 1em;
}
a::before {
content: "";
width: 0.06em;
height: 0%;
position: absolute;
background: #fff;
left: 0;
/* rest the top here */
top: 0;
transition: height 0.25s linear;
}
a:hover::before {
height: 100%;
bottom: 0;
/* unsetting the top because top:0 bottom:0; is full heiht which will prevent the animation the way you want it*/
/* unsetting the top and not the bottom so it goes upward */
top: unset;
}
.container {
background: #3a3a3a;
height: 100%;
display: flex;
padding-top: 1em;
justify-content: center;
align-items: flex-start;
}
body,
html {
height: 100%;
margin: 0;
}<div class="container">
<a href="#">Hover Me</a>
</div>answered Nov 21 at 12:19
Zohir Salak
2,4431414
edited Nov 21 at 12:43
answered Nov 21 at 12:19
Zohir Salak
2,4431414
answered Nov 21 at 12:19
Zohir Salak
2,4431414
answered Nov 21 at 12:19
Zohir Salak
2,4431414
2,4431414
add a comment |
add a comment |
up vote
1
down vote
Move the bottom: 0 rule from a:hover::before to the a::before rule set.
In general, try to minimize amount of rules in selectors like :hover -- whenever a "hover" rule set applies, the chances of things jumping or moving because of inability to mentally calculate how the layout engine will render things, is ever higher the more properties are overriden. You don't need bottom: 0 there, but if you need to align to the bottom, set it on the same rule set without the :hover to it, i.e. the a::before -- it will be inherited anyway by the element in the "hover" state. If you on the other hand only desire the height of an element to transition as you hover over, then that's the only rule that should be set there, should it not?
answered Nov 21 at 12:43
amn
3,71252962
I like the advice of minimizing:hoverrules and the like. However, in this case I am intentionally changing the anchor point to get the desired animation.
– Jenyoin
Nov 21 at 13:03
Am I to understand you want your white line to spread out from the vertical center of the following block?
– amn
Nov 21 at 13:28
add a comment |
up vote
1
down vote
Move the bottom: 0 rule from a:hover::before to the a::before rule set.
In general, try to minimize amount of rules in selectors like :hover -- whenever a "hover" rule set applies, the chances of things jumping or moving because of inability to mentally calculate how the layout engine will render things, is ever higher the more properties are overriden. You don't need bottom: 0 there, but if you need to align to the bottom, set it on the same rule set without the :hover to it, i.e. the a::before -- it will be inherited anyway by the element in the "hover" state. If you on the other hand only desire the height of an element to transition as you hover over, then that's the only rule that should be set there, should it not?
answered Nov 21 at 12:43
amn
3,71252962
I like the advice of minimizing:hoverrules and the like. However, in this case I am intentionally changing the anchor point to get the desired animation.
– Jenyoin
Nov 21 at 13:03
Am I to understand you want your white line to spread out from the vertical center of the following block?
– amn
Nov 21 at 13:28
add a comment |
up vote
1
down vote
up vote
1
down vote
Move the bottom: 0 rule from a:hover::before to the a::before rule set.
In general, try to minimize amount of rules in selectors like :hover -- whenever a "hover" rule set applies, the chances of things jumping or moving because of inability to mentally calculate how the layout engine will render things, is ever higher the more properties are overriden. You don't need bottom: 0 there, but if you need to align to the bottom, set it on the same rule set without the :hover to it, i.e. the a::before -- it will be inherited anyway by the element in the "hover" state. If you on the other hand only desire the height of an element to transition as you hover over, then that's the only rule that should be set there, should it not?
answered Nov 21 at 12:43
amn
3,71252962
Move the bottom: 0 rule from a:hover::before to the a::before rule set.
In general, try to minimize amount of rules in selectors like :hover -- whenever a "hover" rule set applies, the chances of things jumping or moving because of inability to mentally calculate how the layout engine will render things, is ever higher the more properties are overriden. You don't need bottom: 0 there, but if you need to align to the bottom, set it on the same rule set without the :hover to it, i.e. the a::before -- it will be inherited anyway by the element in the "hover" state. If you on the other hand only desire the height of an element to transition as you hover over, then that's the only rule that should be set there, should it not?
answered Nov 21 at 12:43
amn
3,71252962
edited Nov 21 at 13:00
answered Nov 21 at 12:43
amn
3,71252962
answered Nov 21 at 12:43
amn
3,71252962
answered Nov 21 at 12:43
amn
3,71252962
3,71252962
I like the advice of minimizing:hoverrules and the like. However, in this case I am intentionally changing the anchor point to get the desired animation.
– Jenyoin
Nov 21 at 13:03
Am I to understand you want your white line to spread out from the vertical center of the following block?
– amn
Nov 21 at 13:28
add a comment |
I like the advice of minimizing:hoverrules and the like. However, in this case I am intentionally changing the anchor point to get the desired animation.
– Jenyoin
Nov 21 at 13:03
Am I to understand you want your white line to spread out from the vertical center of the following block?
– amn
Nov 21 at 13:28
I like the advice of minimizing
:hover rules and the like. However, in this case I am intentionally changing the anchor point to get the desired animation.– Jenyoin
Nov 21 at 13:03
I like the advice of minimizing
:hover rules and the like. However, in this case I am intentionally changing the anchor point to get the desired animation.– Jenyoin
Nov 21 at 13:03
Am I to understand you want your white line to spread out from the vertical center of the following block?
– amn
Nov 21 at 13:28
Am I to understand you want your white line to spread out from the vertical center of the following block?
– amn
Nov 21 at 13:28
add a comment |
up vote
0
down vote
The issue is your before content is not aligned properly.
Here is the solution...
a {
font-size: 2em;
font-family: sans-serif;
text-transform: uppercase;
color: #fff;
text-decoration: none;
position: relative;
/* Removing this padding resolves the animation issue, but why? */
padding: 1em;
}
a::before {
content: "";
width: 0.06em;
height: 0%;
position: absolute;
background: #fff;
bottom:0;
left: 0;
transition: height 0.25s linear;
}
a:hover::before {
top:0;
height: 100%;
}
.container {
background: #3a3a3a;
height: 100%;
display: flex;
padding-top: 1em;
justify-content: center;
align-items: flex-start;
}
body,
html {
height: 100%;
margin: 0;
}<div class="container">
<a href="#">Hover Me</a>
</div>answered Nov 21 at 11:19
OneJeet
900210
Hi Jeet! That does indeed make the animation not jump, but I would like it to grow upwards and then shrink upwards as in my example. :-)
– Jenyoin
Nov 21 at 11:22
I have updated the code. please check
– OneJeet
Nov 21 at 11:39
This was the animation I created first. But I am trying to do the reverse animation: Grow and shrink upwards, not grow and shrink downwards. Also, I am trying to learn why it happens more so than fixing it.
– Jenyoin
Nov 21 at 11:46
1
This is happening because when you remove top:0; from a::before content, the absolute position doesn't let is align. check developer tool with hover position on to see where it is aligned.
– OneJeet
Nov 21 at 11:55
add a comment |
up vote
0
down vote
The issue is your before content is not aligned properly.
Here is the solution...
a {
font-size: 2em;
font-family: sans-serif;
text-transform: uppercase;
color: #fff;
text-decoration: none;
position: relative;
/* Removing this padding resolves the animation issue, but why? */
padding: 1em;
}
a::before {
content: "";
width: 0.06em;
height: 0%;
position: absolute;
background: #fff;
bottom:0;
left: 0;
transition: height 0.25s linear;
}
a:hover::before {
top:0;
height: 100%;
}
.container {
background: #3a3a3a;
height: 100%;
display: flex;
padding-top: 1em;
justify-content: center;
align-items: flex-start;
}
body,
html {
height: 100%;
margin: 0;
}<div class="container">
<a href="#">Hover Me</a>
</div>answered Nov 21 at 11:19
OneJeet
900210
Hi Jeet! That does indeed make the animation not jump, but I would like it to grow upwards and then shrink upwards as in my example. :-)
– Jenyoin
Nov 21 at 11:22
I have updated the code. please check
– OneJeet
Nov 21 at 11:39
This was the animation I created first. But I am trying to do the reverse animation: Grow and shrink upwards, not grow and shrink downwards. Also, I am trying to learn why it happens more so than fixing it.
– Jenyoin
Nov 21 at 11:46
1
This is happening because when you remove top:0; from a::before content, the absolute position doesn't let is align. check developer tool with hover position on to see where it is aligned.
– OneJeet
Nov 21 at 11:55
add a comment |
up vote
0
down vote
up vote
0
down vote
The issue is your before content is not aligned properly.
Here is the solution...
a {
font-size: 2em;
font-family: sans-serif;
text-transform: uppercase;
color: #fff;
text-decoration: none;
position: relative;
/* Removing this padding resolves the animation issue, but why? */
padding: 1em;
}
a::before {
content: "";
width: 0.06em;
height: 0%;
position: absolute;
background: #fff;
bottom:0;
left: 0;
transition: height 0.25s linear;
}
a:hover::before {
top:0;
height: 100%;
}
.container {
background: #3a3a3a;
height: 100%;
display: flex;
padding-top: 1em;
justify-content: center;
align-items: flex-start;
}
body,
html {
height: 100%;
margin: 0;
}<div class="container">
<a href="#">Hover Me</a>
</div>answered Nov 21 at 11:19
OneJeet
900210
The issue is your before content is not aligned properly.
Here is the solution...
a {
font-size: 2em;
font-family: sans-serif;
text-transform: uppercase;
color: #fff;
text-decoration: none;
position: relative;
/* Removing this padding resolves the animation issue, but why? */
padding: 1em;
}
a::before {
content: "";
width: 0.06em;
height: 0%;
position: absolute;
background: #fff;
bottom:0;
left: 0;
transition: height 0.25s linear;
}
a:hover::before {
top:0;
height: 100%;
}
.container {
background: #3a3a3a;
height: 100%;
display: flex;
padding-top: 1em;
justify-content: center;
align-items: flex-start;
}
body,
html {
height: 100%;
margin: 0;
}<div class="container">
<a href="#">Hover Me</a>
</div>a {
font-size: 2em;
font-family: sans-serif;
text-transform: uppercase;
color: #fff;
text-decoration: none;
position: relative;
/* Removing this padding resolves the animation issue, but why? */
padding: 1em;
}
a::before {
content: "";
width: 0.06em;
height: 0%;
position: absolute;
background: #fff;
bottom:0;
left: 0;
transition: height 0.25s linear;
}
a:hover::before {
top:0;
height: 100%;
}
.container {
background: #3a3a3a;
height: 100%;
display: flex;
padding-top: 1em;
justify-content: center;
align-items: flex-start;
}
body,
html {
height: 100%;
margin: 0;
}<div class="container">
<a href="#">Hover Me</a>
</div>a {
font-size: 2em;
font-family: sans-serif;
text-transform: uppercase;
color: #fff;
text-decoration: none;
position: relative;
/* Removing this padding resolves the animation issue, but why? */
padding: 1em;
}
a::before {
content: "";
width: 0.06em;
height: 0%;
position: absolute;
background: #fff;
bottom:0;
left: 0;
transition: height 0.25s linear;
}
a:hover::before {
top:0;
height: 100%;
}
.container {
background: #3a3a3a;
height: 100%;
display: flex;
padding-top: 1em;
justify-content: center;
align-items: flex-start;
}
body,
html {
height: 100%;
margin: 0;
}<div class="container">
<a href="#">Hover Me</a>
</div>answered Nov 21 at 11:19
OneJeet
900210
edited Nov 21 at 11:39
answered Nov 21 at 11:19
OneJeet
900210
answered Nov 21 at 11:19
OneJeet
900210
answered Nov 21 at 11:19
OneJeet
900210
900210
Hi Jeet! That does indeed make the animation not jump, but I would like it to grow upwards and then shrink upwards as in my example. :-)
– Jenyoin
Nov 21 at 11:22
I have updated the code. please check
– OneJeet
Nov 21 at 11:39
This was the animation I created first. But I am trying to do the reverse animation: Grow and shrink upwards, not grow and shrink downwards. Also, I am trying to learn why it happens more so than fixing it.
– Jenyoin
Nov 21 at 11:46
1
This is happening because when you remove top:0; from a::before content, the absolute position doesn't let is align. check developer tool with hover position on to see where it is aligned.
– OneJeet
Nov 21 at 11:55
add a comment |
Hi Jeet! That does indeed make the animation not jump, but I would like it to grow upwards and then shrink upwards as in my example. :-)
– Jenyoin
Nov 21 at 11:22
I have updated the code. please check
– OneJeet
Nov 21 at 11:39
This was the animation I created first. But I am trying to do the reverse animation: Grow and shrink upwards, not grow and shrink downwards. Also, I am trying to learn why it happens more so than fixing it.
– Jenyoin
Nov 21 at 11:46
1
This is happening because when you remove top:0; from a::before content, the absolute position doesn't let is align. check developer tool with hover position on to see where it is aligned.
– OneJeet
Nov 21 at 11:55
Hi Jeet! That does indeed make the animation not jump, but I would like it to grow upwards and then shrink upwards as in my example. :-)
– Jenyoin
Nov 21 at 11:22
Hi Jeet! That does indeed make the animation not jump, but I would like it to grow upwards and then shrink upwards as in my example. :-)
– Jenyoin
Nov 21 at 11:22
I have updated the code. please check
– OneJeet
Nov 21 at 11:39
I have updated the code. please check
– OneJeet
Nov 21 at 11:39
This was the animation I created first. But I am trying to do the reverse animation: Grow and shrink upwards, not grow and shrink downwards. Also, I am trying to learn why it happens more so than fixing it.
– Jenyoin
Nov 21 at 11:46
This was the animation I created first. But I am trying to do the reverse animation: Grow and shrink upwards, not grow and shrink downwards. Also, I am trying to learn why it happens more so than fixing it.
– Jenyoin
Nov 21 at 11:46
1
1
This is happening because when you remove top:0; from a::before content, the absolute position doesn't let is align. check developer tool with hover position on to see where it is aligned.
– OneJeet
Nov 21 at 11:55
This is happening because when you remove top:0; from a::before content, the absolute position doesn't let is align. check developer tool with hover position on to see where it is aligned.
– OneJeet
Nov 21 at 11:55
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53410949%2fwhy-does-padding-lead-to-jumpy-animation%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
