Mixing
Why does padding lead to jumpy animation?
-1
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 '18 at 13:06
jnuK
1,5401425
asked Nov 21 '18 at 11:16
JenyoinJenyoin
689
add a comment |
-1
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 '18 at 13:06
jnuK
1,5401425
asked Nov 21 '18 at 11:16
JenyoinJenyoin
689
add a comment |
-1
-1
-1
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 '18 at 13:06
jnuK
1,5401425
asked Nov 21 '18 at 11:16
JenyoinJenyoin
689
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 '18 at 13:06
jnuK
1,5401425
asked Nov 21 '18 at 11:16
JenyoinJenyoin
689
edited Nov 21 '18 at 13:06
jnuK
1,5401425
asked Nov 21 '18 at 11:16
JenyoinJenyoin
689
edited Nov 21 '18 at 13:06
jnuK
1,5401425
edited Nov 21 '18 at 13:06
jnuK
1,5401425
edited Nov 21 '18 at 13:06
jnuK
1,5401425
1,5401425
asked Nov 21 '18 at 11:16
JenyoinJenyoin
689
asked Nov 21 '18 at 11:16
JenyoinJenyoin
689
asked Nov 21 '18 at 11:16
JenyoinJenyoin
689
689
add a comment |
add a comment |
3 Answers
3
active
oldest
votes
1
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 '18 at 12:19
Zohir SalakZohir Salak
2,5031414
add a comment |
1
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 '18 at 12:43
amnamn
3,95553262
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 '18 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 '18 at 13:28
add a comment |
0
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 '18 at 11:19
OneJeetOneJeet
962310
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 '18 at 11:22
I have updated the code. please check
– OneJeet
Nov 21 '18 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 '18 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 '18 at 11:55
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
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
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
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 '18 at 12:19
Zohir SalakZohir Salak
2,5031414
add a comment |
1
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 '18 at 12:19
Zohir SalakZohir Salak
2,5031414
add a comment |
1
1
1
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 '18 at 12:19
Zohir SalakZohir Salak
2,5031414
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 '18 at 12:19
Zohir SalakZohir Salak
2,5031414
edited Nov 21 '18 at 12:43
answered Nov 21 '18 at 12:19
Zohir SalakZohir Salak
2,5031414
answered Nov 21 '18 at 12:19
Zohir SalakZohir Salak
2,5031414
answered Nov 21 '18 at 12:19
Zohir SalakZohir Salak
2,5031414
2,5031414
add a comment |
add a comment |
1
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 '18 at 12:43
amnamn
3,95553262
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 '18 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 '18 at 13:28
add a comment |
1
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 '18 at 12:43
amnamn
3,95553262
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 '18 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 '18 at 13:28
add a comment |
1
1
1
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 '18 at 12:43
amnamn
3,95553262
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 '18 at 12:43
amnamn
3,95553262
edited Nov 21 '18 at 13:00
answered Nov 21 '18 at 12:43
amnamn
3,95553262
answered Nov 21 '18 at 12:43
amnamn
3,95553262
answered Nov 21 '18 at 12:43
amnamn
3,95553262
3,95553262
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 '18 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 '18 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 '18 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 '18 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 '18 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 '18 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 '18 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 '18 at 13:28
add a comment |
0
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 '18 at 11:19
OneJeetOneJeet
962310
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 '18 at 11:22
I have updated the code. please check
– OneJeet
Nov 21 '18 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 '18 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 '18 at 11:55
add a comment |
0
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 '18 at 11:19
OneJeetOneJeet
962310
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 '18 at 11:22
I have updated the code. please check
– OneJeet
Nov 21 '18 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 '18 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 '18 at 11:55
add a comment |
0
0
0
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 '18 at 11:19
OneJeetOneJeet
962310
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 '18 at 11:19
OneJeetOneJeet
962310
edited Nov 21 '18 at 11:39
answered Nov 21 '18 at 11:19
OneJeetOneJeet
962310
answered Nov 21 '18 at 11:19
OneJeetOneJeet
962310
answered Nov 21 '18 at 11:19
OneJeetOneJeet
962310
962310
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 '18 at 11:22
I have updated the code. please check
– OneJeet
Nov 21 '18 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 '18 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 '18 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 '18 at 11:22
I have updated the code. please check
– OneJeet
Nov 21 '18 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 '18 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 '18 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 '18 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 '18 at 11:22
I have updated the code. please check
– OneJeet
Nov 21 '18 at 11:39
I have updated the code. please check
– OneJeet
Nov 21 '18 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 '18 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 '18 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 '18 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 '18 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.
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
