Mixing
Avoid that keyframe animation overflows submenus in navigation
0
I have the following HTML and CSS which you can also find in the JSfiddle here:
/* Header & Naviagtion */
.header {
width: 100%;
height: 10%;
position: fixed;
}
.navigation {
width: 100%;
height: 100%;
}
.navigation>ul {
height: 100%;
width: 100%;
display: flex;
list-style: none;
margin: 0;
padding: 0;
background-color: purple;
}
.panel {
transform: scale(1, 0);
transform-origin: top;
transition-duration: 0.2s;
width: 100%;
position: absolute;
top: 100%;
background-color: lime;
}
.button:hover .panel {
transform: scale(1);
}
/* Content Animation */
.parent{
margin-top: 5%;
height: 10%;
width: 100%;
float: left;
position: relative;
}
.content1{
height: 100%;
width: 100%;
background-color: blue;
float: left;
position: absolute;
}
.content2{
height: 100%;
width: 100%;
background-color: red;
float: left;
animation-delay: 1s;
position: absolute;
}
.content3{
height: 100%;
width: 100%;
background-color:yellow;
float: left;
animation-delay: 2s;
position: absolute;
}
.content4{
height: 100%;
width: 100%;
background-color: green;
float: left;
animation-delay: 3s;
position: absolute;
}
.content5{
height: 100%;
width: 100%;
background-color: lime;
float: left;
animation-delay: 4s;
}
.parent div {
animation-name: animation_01;
animation-duration:5s;
animation-iteration-count:infinite;
animation-fill-mode: forwards;
opacity:0;
}
@keyframes animation_01 {
12.5% {
opacity: 1
}
0%, 25%, 100% {
opacity: 0
}
}<div class="header">
<nav class="navigation">
<ul>
<li class="button"> 1.0 Main Menu
<ul class="panel">
<li> 1.1 Sub Menu </li>
<li> 1.2 Sub Menu </li>
</ul>
</li>
</ul>
</nav>
</div>
<div class="parent">
<div class="content1">Here goes content1</div>
<div class="content2">Here goes content2</div>
<div class="content3">Here goes content3</div>
<div class="content4">Here goes content4</div>
<div class="content5">Here goes content5</div>
</div>As you can see in the comments the code is divided in two parts:
Part 1: Navigation with a panel to display submenus when the button is hovered.
Part 2: An automated animation of a content using CSS keyframes.
Both parts individually work fine.
Now my issue is that the animation of the content overflows the panel of the navigation which results from the absolute position of the animation. However, I need this absolute position to make the animation work since I want to have content1 til content5 displayed on top of each other.
On the other side I also want to have navigation that is not overflown by the animation.
Do you have any idea how I can solve this dilemma?
html css css-animations keyframe
asked Nov 19 '18 at 15:41
Michi
1,0901022
add a comment |
0
I have the following HTML and CSS which you can also find in the JSfiddle here:
/* Header & Naviagtion */
.header {
width: 100%;
height: 10%;
position: fixed;
}
.navigation {
width: 100%;
height: 100%;
}
.navigation>ul {
height: 100%;
width: 100%;
display: flex;
list-style: none;
margin: 0;
padding: 0;
background-color: purple;
}
.panel {
transform: scale(1, 0);
transform-origin: top;
transition-duration: 0.2s;
width: 100%;
position: absolute;
top: 100%;
background-color: lime;
}
.button:hover .panel {
transform: scale(1);
}
/* Content Animation */
.parent{
margin-top: 5%;
height: 10%;
width: 100%;
float: left;
position: relative;
}
.content1{
height: 100%;
width: 100%;
background-color: blue;
float: left;
position: absolute;
}
.content2{
height: 100%;
width: 100%;
background-color: red;
float: left;
animation-delay: 1s;
position: absolute;
}
.content3{
height: 100%;
width: 100%;
background-color:yellow;
float: left;
animation-delay: 2s;
position: absolute;
}
.content4{
height: 100%;
width: 100%;
background-color: green;
float: left;
animation-delay: 3s;
position: absolute;
}
.content5{
height: 100%;
width: 100%;
background-color: lime;
float: left;
animation-delay: 4s;
}
.parent div {
animation-name: animation_01;
animation-duration:5s;
animation-iteration-count:infinite;
animation-fill-mode: forwards;
opacity:0;
}
@keyframes animation_01 {
12.5% {
opacity: 1
}
0%, 25%, 100% {
opacity: 0
}
}<div class="header">
<nav class="navigation">
<ul>
<li class="button"> 1.0 Main Menu
<ul class="panel">
<li> 1.1 Sub Menu </li>
<li> 1.2 Sub Menu </li>
</ul>
</li>
</ul>
</nav>
</div>
<div class="parent">
<div class="content1">Here goes content1</div>
<div class="content2">Here goes content2</div>
<div class="content3">Here goes content3</div>
<div class="content4">Here goes content4</div>
<div class="content5">Here goes content5</div>
</div>As you can see in the comments the code is divided in two parts:
Part 1: Navigation with a panel to display submenus when the button is hovered.
Part 2: An automated animation of a content using CSS keyframes.
Both parts individually work fine.
Now my issue is that the animation of the content overflows the panel of the navigation which results from the absolute position of the animation. However, I need this absolute position to make the animation work since I want to have content1 til content5 displayed on top of each other.
On the other side I also want to have navigation that is not overflown by the animation.
Do you have any idea how I can solve this dilemma?
html css css-animations keyframe
asked Nov 19 '18 at 15:41
Michi
1,0901022
an animation question each hour today? :p
– Temani Afif
Nov 19 '18 at 15:46
hahah, yeah working on something here :-)
– Michi
Nov 19 '18 at 15:50
.header:hover + .parent { top: 2em; }
– Mr Lister
Nov 19 '18 at 17:40
add a comment |
0
0
0
I have the following HTML and CSS which you can also find in the JSfiddle here:
/* Header & Naviagtion */
.header {
width: 100%;
height: 10%;
position: fixed;
}
.navigation {
width: 100%;
height: 100%;
}
.navigation>ul {
height: 100%;
width: 100%;
display: flex;
list-style: none;
margin: 0;
padding: 0;
background-color: purple;
}
.panel {
transform: scale(1, 0);
transform-origin: top;
transition-duration: 0.2s;
width: 100%;
position: absolute;
top: 100%;
background-color: lime;
}
.button:hover .panel {
transform: scale(1);
}
/* Content Animation */
.parent{
margin-top: 5%;
height: 10%;
width: 100%;
float: left;
position: relative;
}
.content1{
height: 100%;
width: 100%;
background-color: blue;
float: left;
position: absolute;
}
.content2{
height: 100%;
width: 100%;
background-color: red;
float: left;
animation-delay: 1s;
position: absolute;
}
.content3{
height: 100%;
width: 100%;
background-color:yellow;
float: left;
animation-delay: 2s;
position: absolute;
}
.content4{
height: 100%;
width: 100%;
background-color: green;
float: left;
animation-delay: 3s;
position: absolute;
}
.content5{
height: 100%;
width: 100%;
background-color: lime;
float: left;
animation-delay: 4s;
}
.parent div {
animation-name: animation_01;
animation-duration:5s;
animation-iteration-count:infinite;
animation-fill-mode: forwards;
opacity:0;
}
@keyframes animation_01 {
12.5% {
opacity: 1
}
0%, 25%, 100% {
opacity: 0
}
}<div class="header">
<nav class="navigation">
<ul>
<li class="button"> 1.0 Main Menu
<ul class="panel">
<li> 1.1 Sub Menu </li>
<li> 1.2 Sub Menu </li>
</ul>
</li>
</ul>
</nav>
</div>
<div class="parent">
<div class="content1">Here goes content1</div>
<div class="content2">Here goes content2</div>
<div class="content3">Here goes content3</div>
<div class="content4">Here goes content4</div>
<div class="content5">Here goes content5</div>
</div>As you can see in the comments the code is divided in two parts:
Part 1: Navigation with a panel to display submenus when the button is hovered.
Part 2: An automated animation of a content using CSS keyframes.
Both parts individually work fine.
Now my issue is that the animation of the content overflows the panel of the navigation which results from the absolute position of the animation. However, I need this absolute position to make the animation work since I want to have content1 til content5 displayed on top of each other.
On the other side I also want to have navigation that is not overflown by the animation.
Do you have any idea how I can solve this dilemma?
html css css-animations keyframe
asked Nov 19 '18 at 15:41
Michi
1,0901022
I have the following HTML and CSS which you can also find in the JSfiddle here:
/* Header & Naviagtion */
.header {
width: 100%;
height: 10%;
position: fixed;
}
.navigation {
width: 100%;
height: 100%;
}
.navigation>ul {
height: 100%;
width: 100%;
display: flex;
list-style: none;
margin: 0;
padding: 0;
background-color: purple;
}
.panel {
transform: scale(1, 0);
transform-origin: top;
transition-duration: 0.2s;
width: 100%;
position: absolute;
top: 100%;
background-color: lime;
}
.button:hover .panel {
transform: scale(1);
}
/* Content Animation */
.parent{
margin-top: 5%;
height: 10%;
width: 100%;
float: left;
position: relative;
}
.content1{
height: 100%;
width: 100%;
background-color: blue;
float: left;
position: absolute;
}
.content2{
height: 100%;
width: 100%;
background-color: red;
float: left;
animation-delay: 1s;
position: absolute;
}
.content3{
height: 100%;
width: 100%;
background-color:yellow;
float: left;
animation-delay: 2s;
position: absolute;
}
.content4{
height: 100%;
width: 100%;
background-color: green;
float: left;
animation-delay: 3s;
position: absolute;
}
.content5{
height: 100%;
width: 100%;
background-color: lime;
float: left;
animation-delay: 4s;
}
.parent div {
animation-name: animation_01;
animation-duration:5s;
animation-iteration-count:infinite;
animation-fill-mode: forwards;
opacity:0;
}
@keyframes animation_01 {
12.5% {
opacity: 1
}
0%, 25%, 100% {
opacity: 0
}
}<div class="header">
<nav class="navigation">
<ul>
<li class="button"> 1.0 Main Menu
<ul class="panel">
<li> 1.1 Sub Menu </li>
<li> 1.2 Sub Menu </li>
</ul>
</li>
</ul>
</nav>
</div>
<div class="parent">
<div class="content1">Here goes content1</div>
<div class="content2">Here goes content2</div>
<div class="content3">Here goes content3</div>
<div class="content4">Here goes content4</div>
<div class="content5">Here goes content5</div>
</div>As you can see in the comments the code is divided in two parts:
Part 1: Navigation with a panel to display submenus when the button is hovered.
Part 2: An automated animation of a content using CSS keyframes.
Both parts individually work fine.
Now my issue is that the animation of the content overflows the panel of the navigation which results from the absolute position of the animation. However, I need this absolute position to make the animation work since I want to have content1 til content5 displayed on top of each other.
On the other side I also want to have navigation that is not overflown by the animation.
Do you have any idea how I can solve this dilemma?
/* Header & Naviagtion */
.header {
width: 100%;
height: 10%;
position: fixed;
}
.navigation {
width: 100%;
height: 100%;
}
.navigation>ul {
height: 100%;
width: 100%;
display: flex;
list-style: none;
margin: 0;
padding: 0;
background-color: purple;
}
.panel {
transform: scale(1, 0);
transform-origin: top;
transition-duration: 0.2s;
width: 100%;
position: absolute;
top: 100%;
background-color: lime;
}
.button:hover .panel {
transform: scale(1);
}
/* Content Animation */
.parent{
margin-top: 5%;
height: 10%;
width: 100%;
float: left;
position: relative;
}
.content1{
height: 100%;
width: 100%;
background-color: blue;
float: left;
position: absolute;
}
.content2{
height: 100%;
width: 100%;
background-color: red;
float: left;
animation-delay: 1s;
position: absolute;
}
.content3{
height: 100%;
width: 100%;
background-color:yellow;
float: left;
animation-delay: 2s;
position: absolute;
}
.content4{
height: 100%;
width: 100%;
background-color: green;
float: left;
animation-delay: 3s;
position: absolute;
}
.content5{
height: 100%;
width: 100%;
background-color: lime;
float: left;
animation-delay: 4s;
}
.parent div {
animation-name: animation_01;
animation-duration:5s;
animation-iteration-count:infinite;
animation-fill-mode: forwards;
opacity:0;
}
@keyframes animation_01 {
12.5% {
opacity: 1
}
0%, 25%, 100% {
opacity: 0
}
}<div class="header">
<nav class="navigation">
<ul>
<li class="button"> 1.0 Main Menu
<ul class="panel">
<li> 1.1 Sub Menu </li>
<li> 1.2 Sub Menu </li>
</ul>
</li>
</ul>
</nav>
</div>
<div class="parent">
<div class="content1">Here goes content1</div>
<div class="content2">Here goes content2</div>
<div class="content3">Here goes content3</div>
<div class="content4">Here goes content4</div>
<div class="content5">Here goes content5</div>
</div>/* Header & Naviagtion */
.header {
width: 100%;
height: 10%;
position: fixed;
}
.navigation {
width: 100%;
height: 100%;
}
.navigation>ul {
height: 100%;
width: 100%;
display: flex;
list-style: none;
margin: 0;
padding: 0;
background-color: purple;
}
.panel {
transform: scale(1, 0);
transform-origin: top;
transition-duration: 0.2s;
width: 100%;
position: absolute;
top: 100%;
background-color: lime;
}
.button:hover .panel {
transform: scale(1);
}
/* Content Animation */
.parent{
margin-top: 5%;
height: 10%;
width: 100%;
float: left;
position: relative;
}
.content1{
height: 100%;
width: 100%;
background-color: blue;
float: left;
position: absolute;
}
.content2{
height: 100%;
width: 100%;
background-color: red;
float: left;
animation-delay: 1s;
position: absolute;
}
.content3{
height: 100%;
width: 100%;
background-color:yellow;
float: left;
animation-delay: 2s;
position: absolute;
}
.content4{
height: 100%;
width: 100%;
background-color: green;
float: left;
animation-delay: 3s;
position: absolute;
}
.content5{
height: 100%;
width: 100%;
background-color: lime;
float: left;
animation-delay: 4s;
}
.parent div {
animation-name: animation_01;
animation-duration:5s;
animation-iteration-count:infinite;
animation-fill-mode: forwards;
opacity:0;
}
@keyframes animation_01 {
12.5% {
opacity: 1
}
0%, 25%, 100% {
opacity: 0
}
}<div class="header">
<nav class="navigation">
<ul>
<li class="button"> 1.0 Main Menu
<ul class="panel">
<li> 1.1 Sub Menu </li>
<li> 1.2 Sub Menu </li>
</ul>
</li>
</ul>
</nav>
</div>
<div class="parent">
<div class="content1">Here goes content1</div>
<div class="content2">Here goes content2</div>
<div class="content3">Here goes content3</div>
<div class="content4">Here goes content4</div>
<div class="content5">Here goes content5</div>
</div>html css css-animations keyframe
html css css-animations keyframe
asked Nov 19 '18 at 15:41
Michi
1,0901022
asked Nov 19 '18 at 15:41
Michi
1,0901022
asked Nov 19 '18 at 15:41
Michi
1,0901022
asked Nov 19 '18 at 15:41
Michi
1,0901022
asked Nov 19 '18 at 15:41
Michi
1,0901022
1,0901022
an animation question each hour today? :p
– Temani Afif
Nov 19 '18 at 15:46
hahah, yeah working on something here :-)
– Michi
Nov 19 '18 at 15:50
.header:hover + .parent { top: 2em; }
– Mr Lister
Nov 19 '18 at 17:40
add a comment |
an animation question each hour today? :p
– Temani Afif
Nov 19 '18 at 15:46
hahah, yeah working on something here :-)
– Michi
Nov 19 '18 at 15:50
.header:hover + .parent { top: 2em; }
– Mr Lister
Nov 19 '18 at 17:40
an animation question each hour today? :p
– Temani Afif
Nov 19 '18 at 15:46
an animation question each hour today? :p
– Temani Afif
Nov 19 '18 at 15:46
hahah, yeah working on something here :-)
– Michi
Nov 19 '18 at 15:50
hahah, yeah working on something here :-)
– Michi
Nov 19 '18 at 15:50
.header:hover + .parent { top: 2em; }– Mr Lister
Nov 19 '18 at 17:40
.header:hover + .parent { top: 2em; }– Mr Lister
Nov 19 '18 at 17:40
add a comment |
1 Answer
1
active
oldest
votes
0
You placed the navigation with fixed position, so if it scales it won't affect other elements in the page, the animated element in your example.
You need to place it without a fixed position. Also, you can't use scale transform since scaling it later won't affect the parent height. You can use height: 0px as the default state and height: unset once hovered.
Here's an example:
/* Header & Naviagtion */
.header {
width: 100%;
}
.navigation {
width: 100%;
height: 100%;
}
.button {
width: 100%;
background-color: purple;
}
.navigation>ul {
height: 100%;
width: 100%;
display: flex;
list-style: none;
margin: 0;
padding: 0;
position: relative;
}
.panel {
max-height: 0px;
overflow: hidden;
transform: scale(1, 0);
transform-origin: top;
transition-duration: 0.2s;
background-color: lime;
}
.button:hover .panel {
max-height: unset;
transform: scale(1);
}
/* Content Animation */
.parent {
margin-top: 5%;
height: 10%;
width: 100%;
float: left;
position: relative;
}
.content1 {
height: 100%;
width: 100%;
background-color: blue;
float: left;
position: absolute;
}
.content2 {
height: 100%;
width: 100%;
background-color: red;
float: left;
animation-delay: 1s;
position: absolute;
}
.content3 {
height: 100%;
width: 100%;
background-color: yellow;
float: left;
animation-delay: 2s;
position: absolute;
}
.content4 {
height: 100%;
width: 100%;
background-color: green;
float: left;
animation-delay: 3s;
position: absolute;
}
.content5 {
height: 100%;
width: 100%;
background-color: lime;
float: left;
animation-delay: 4s;
}
.parent div {
animation-name: animation_01;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-fill-mode: forwards;
opacity: 0;
}
@keyframes animation_01 {
12.5% {
opacity: 1
}
0%,
25%,
100% {
opacity: 0
}
}<div class="header">
<nav class="navigation">
<ul>
<li class="button"> 1.0 Main Menu
<ul class="panel">
<li> 1.1 Sub Menu </li>
<li> 1.2 Sub Menu </li>
</ul>
</li>
</ul>
</nav>
</div>
<div class="parent">
<div class="content1">Here goes content1</div>
<div class="content2">Here goes content2</div>
<div class="content3">Here goes content3</div>
<div class="content4">Here goes content4</div>
<div class="content5">Here goes content5</div>
</div>answered Nov 20 '18 at 8:45
Itay Gal
7,51752559
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%2f53378091%2favoid-that-keyframe-animation-overflows-submenus-in-navigation%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
You placed the navigation with fixed position, so if it scales it won't affect other elements in the page, the animated element in your example.
You need to place it without a fixed position. Also, you can't use scale transform since scaling it later won't affect the parent height. You can use height: 0px as the default state and height: unset once hovered.
Here's an example:
/* Header & Naviagtion */
.header {
width: 100%;
}
.navigation {
width: 100%;
height: 100%;
}
.button {
width: 100%;
background-color: purple;
}
.navigation>ul {
height: 100%;
width: 100%;
display: flex;
list-style: none;
margin: 0;
padding: 0;
position: relative;
}
.panel {
max-height: 0px;
overflow: hidden;
transform: scale(1, 0);
transform-origin: top;
transition-duration: 0.2s;
background-color: lime;
}
.button:hover .panel {
max-height: unset;
transform: scale(1);
}
/* Content Animation */
.parent {
margin-top: 5%;
height: 10%;
width: 100%;
float: left;
position: relative;
}
.content1 {
height: 100%;
width: 100%;
background-color: blue;
float: left;
position: absolute;
}
.content2 {
height: 100%;
width: 100%;
background-color: red;
float: left;
animation-delay: 1s;
position: absolute;
}
.content3 {
height: 100%;
width: 100%;
background-color: yellow;
float: left;
animation-delay: 2s;
position: absolute;
}
.content4 {
height: 100%;
width: 100%;
background-color: green;
float: left;
animation-delay: 3s;
position: absolute;
}
.content5 {
height: 100%;
width: 100%;
background-color: lime;
float: left;
animation-delay: 4s;
}
.parent div {
animation-name: animation_01;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-fill-mode: forwards;
opacity: 0;
}
@keyframes animation_01 {
12.5% {
opacity: 1
}
0%,
25%,
100% {
opacity: 0
}
}<div class="header">
<nav class="navigation">
<ul>
<li class="button"> 1.0 Main Menu
<ul class="panel">
<li> 1.1 Sub Menu </li>
<li> 1.2 Sub Menu </li>
</ul>
</li>
</ul>
</nav>
</div>
<div class="parent">
<div class="content1">Here goes content1</div>
<div class="content2">Here goes content2</div>
<div class="content3">Here goes content3</div>
<div class="content4">Here goes content4</div>
<div class="content5">Here goes content5</div>
</div>answered Nov 20 '18 at 8:45
Itay Gal
7,51752559
add a comment |
0
You placed the navigation with fixed position, so if it scales it won't affect other elements in the page, the animated element in your example.
You need to place it without a fixed position. Also, you can't use scale transform since scaling it later won't affect the parent height. You can use height: 0px as the default state and height: unset once hovered.
Here's an example:
/* Header & Naviagtion */
.header {
width: 100%;
}
.navigation {
width: 100%;
height: 100%;
}
.button {
width: 100%;
background-color: purple;
}
.navigation>ul {
height: 100%;
width: 100%;
display: flex;
list-style: none;
margin: 0;
padding: 0;
position: relative;
}
.panel {
max-height: 0px;
overflow: hidden;
transform: scale(1, 0);
transform-origin: top;
transition-duration: 0.2s;
background-color: lime;
}
.button:hover .panel {
max-height: unset;
transform: scale(1);
}
/* Content Animation */
.parent {
margin-top: 5%;
height: 10%;
width: 100%;
float: left;
position: relative;
}
.content1 {
height: 100%;
width: 100%;
background-color: blue;
float: left;
position: absolute;
}
.content2 {
height: 100%;
width: 100%;
background-color: red;
float: left;
animation-delay: 1s;
position: absolute;
}
.content3 {
height: 100%;
width: 100%;
background-color: yellow;
float: left;
animation-delay: 2s;
position: absolute;
}
.content4 {
height: 100%;
width: 100%;
background-color: green;
float: left;
animation-delay: 3s;
position: absolute;
}
.content5 {
height: 100%;
width: 100%;
background-color: lime;
float: left;
animation-delay: 4s;
}
.parent div {
animation-name: animation_01;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-fill-mode: forwards;
opacity: 0;
}
@keyframes animation_01 {
12.5% {
opacity: 1
}
0%,
25%,
100% {
opacity: 0
}
}<div class="header">
<nav class="navigation">
<ul>
<li class="button"> 1.0 Main Menu
<ul class="panel">
<li> 1.1 Sub Menu </li>
<li> 1.2 Sub Menu </li>
</ul>
</li>
</ul>
</nav>
</div>
<div class="parent">
<div class="content1">Here goes content1</div>
<div class="content2">Here goes content2</div>
<div class="content3">Here goes content3</div>
<div class="content4">Here goes content4</div>
<div class="content5">Here goes content5</div>
</div>answered Nov 20 '18 at 8:45
Itay Gal
7,51752559
add a comment |
0
0
0
You placed the navigation with fixed position, so if it scales it won't affect other elements in the page, the animated element in your example.
You need to place it without a fixed position. Also, you can't use scale transform since scaling it later won't affect the parent height. You can use height: 0px as the default state and height: unset once hovered.
Here's an example:
/* Header & Naviagtion */
.header {
width: 100%;
}
.navigation {
width: 100%;
height: 100%;
}
.button {
width: 100%;
background-color: purple;
}
.navigation>ul {
height: 100%;
width: 100%;
display: flex;
list-style: none;
margin: 0;
padding: 0;
position: relative;
}
.panel {
max-height: 0px;
overflow: hidden;
transform: scale(1, 0);
transform-origin: top;
transition-duration: 0.2s;
background-color: lime;
}
.button:hover .panel {
max-height: unset;
transform: scale(1);
}
/* Content Animation */
.parent {
margin-top: 5%;
height: 10%;
width: 100%;
float: left;
position: relative;
}
.content1 {
height: 100%;
width: 100%;
background-color: blue;
float: left;
position: absolute;
}
.content2 {
height: 100%;
width: 100%;
background-color: red;
float: left;
animation-delay: 1s;
position: absolute;
}
.content3 {
height: 100%;
width: 100%;
background-color: yellow;
float: left;
animation-delay: 2s;
position: absolute;
}
.content4 {
height: 100%;
width: 100%;
background-color: green;
float: left;
animation-delay: 3s;
position: absolute;
}
.content5 {
height: 100%;
width: 100%;
background-color: lime;
float: left;
animation-delay: 4s;
}
.parent div {
animation-name: animation_01;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-fill-mode: forwards;
opacity: 0;
}
@keyframes animation_01 {
12.5% {
opacity: 1
}
0%,
25%,
100% {
opacity: 0
}
}<div class="header">
<nav class="navigation">
<ul>
<li class="button"> 1.0 Main Menu
<ul class="panel">
<li> 1.1 Sub Menu </li>
<li> 1.2 Sub Menu </li>
</ul>
</li>
</ul>
</nav>
</div>
<div class="parent">
<div class="content1">Here goes content1</div>
<div class="content2">Here goes content2</div>
<div class="content3">Here goes content3</div>
<div class="content4">Here goes content4</div>
<div class="content5">Here goes content5</div>
</div>answered Nov 20 '18 at 8:45
Itay Gal
7,51752559
You placed the navigation with fixed position, so if it scales it won't affect other elements in the page, the animated element in your example.
You need to place it without a fixed position. Also, you can't use scale transform since scaling it later won't affect the parent height. You can use height: 0px as the default state and height: unset once hovered.
Here's an example:
/* Header & Naviagtion */
.header {
width: 100%;
}
.navigation {
width: 100%;
height: 100%;
}
.button {
width: 100%;
background-color: purple;
}
.navigation>ul {
height: 100%;
width: 100%;
display: flex;
list-style: none;
margin: 0;
padding: 0;
position: relative;
}
.panel {
max-height: 0px;
overflow: hidden;
transform: scale(1, 0);
transform-origin: top;
transition-duration: 0.2s;
background-color: lime;
}
.button:hover .panel {
max-height: unset;
transform: scale(1);
}
/* Content Animation */
.parent {
margin-top: 5%;
height: 10%;
width: 100%;
float: left;
position: relative;
}
.content1 {
height: 100%;
width: 100%;
background-color: blue;
float: left;
position: absolute;
}
.content2 {
height: 100%;
width: 100%;
background-color: red;
float: left;
animation-delay: 1s;
position: absolute;
}
.content3 {
height: 100%;
width: 100%;
background-color: yellow;
float: left;
animation-delay: 2s;
position: absolute;
}
.content4 {
height: 100%;
width: 100%;
background-color: green;
float: left;
animation-delay: 3s;
position: absolute;
}
.content5 {
height: 100%;
width: 100%;
background-color: lime;
float: left;
animation-delay: 4s;
}
.parent div {
animation-name: animation_01;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-fill-mode: forwards;
opacity: 0;
}
@keyframes animation_01 {
12.5% {
opacity: 1
}
0%,
25%,
100% {
opacity: 0
}
}<div class="header">
<nav class="navigation">
<ul>
<li class="button"> 1.0 Main Menu
<ul class="panel">
<li> 1.1 Sub Menu </li>
<li> 1.2 Sub Menu </li>
</ul>
</li>
</ul>
</nav>
</div>
<div class="parent">
<div class="content1">Here goes content1</div>
<div class="content2">Here goes content2</div>
<div class="content3">Here goes content3</div>
<div class="content4">Here goes content4</div>
<div class="content5">Here goes content5</div>
</div>/* Header & Naviagtion */
.header {
width: 100%;
}
.navigation {
width: 100%;
height: 100%;
}
.button {
width: 100%;
background-color: purple;
}
.navigation>ul {
height: 100%;
width: 100%;
display: flex;
list-style: none;
margin: 0;
padding: 0;
position: relative;
}
.panel {
max-height: 0px;
overflow: hidden;
transform: scale(1, 0);
transform-origin: top;
transition-duration: 0.2s;
background-color: lime;
}
.button:hover .panel {
max-height: unset;
transform: scale(1);
}
/* Content Animation */
.parent {
margin-top: 5%;
height: 10%;
width: 100%;
float: left;
position: relative;
}
.content1 {
height: 100%;
width: 100%;
background-color: blue;
float: left;
position: absolute;
}
.content2 {
height: 100%;
width: 100%;
background-color: red;
float: left;
animation-delay: 1s;
position: absolute;
}
.content3 {
height: 100%;
width: 100%;
background-color: yellow;
float: left;
animation-delay: 2s;
position: absolute;
}
.content4 {
height: 100%;
width: 100%;
background-color: green;
float: left;
animation-delay: 3s;
position: absolute;
}
.content5 {
height: 100%;
width: 100%;
background-color: lime;
float: left;
animation-delay: 4s;
}
.parent div {
animation-name: animation_01;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-fill-mode: forwards;
opacity: 0;
}
@keyframes animation_01 {
12.5% {
opacity: 1
}
0%,
25%,
100% {
opacity: 0
}
}<div class="header">
<nav class="navigation">
<ul>
<li class="button"> 1.0 Main Menu
<ul class="panel">
<li> 1.1 Sub Menu </li>
<li> 1.2 Sub Menu </li>
</ul>
</li>
</ul>
</nav>
</div>
<div class="parent">
<div class="content1">Here goes content1</div>
<div class="content2">Here goes content2</div>
<div class="content3">Here goes content3</div>
<div class="content4">Here goes content4</div>
<div class="content5">Here goes content5</div>
</div>/* Header & Naviagtion */
.header {
width: 100%;
}
.navigation {
width: 100%;
height: 100%;
}
.button {
width: 100%;
background-color: purple;
}
.navigation>ul {
height: 100%;
width: 100%;
display: flex;
list-style: none;
margin: 0;
padding: 0;
position: relative;
}
.panel {
max-height: 0px;
overflow: hidden;
transform: scale(1, 0);
transform-origin: top;
transition-duration: 0.2s;
background-color: lime;
}
.button:hover .panel {
max-height: unset;
transform: scale(1);
}
/* Content Animation */
.parent {
margin-top: 5%;
height: 10%;
width: 100%;
float: left;
position: relative;
}
.content1 {
height: 100%;
width: 100%;
background-color: blue;
float: left;
position: absolute;
}
.content2 {
height: 100%;
width: 100%;
background-color: red;
float: left;
animation-delay: 1s;
position: absolute;
}
.content3 {
height: 100%;
width: 100%;
background-color: yellow;
float: left;
animation-delay: 2s;
position: absolute;
}
.content4 {
height: 100%;
width: 100%;
background-color: green;
float: left;
animation-delay: 3s;
position: absolute;
}
.content5 {
height: 100%;
width: 100%;
background-color: lime;
float: left;
animation-delay: 4s;
}
.parent div {
animation-name: animation_01;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-fill-mode: forwards;
opacity: 0;
}
@keyframes animation_01 {
12.5% {
opacity: 1
}
0%,
25%,
100% {
opacity: 0
}
}<div class="header">
<nav class="navigation">
<ul>
<li class="button"> 1.0 Main Menu
<ul class="panel">
<li> 1.1 Sub Menu </li>
<li> 1.2 Sub Menu </li>
</ul>
</li>
</ul>
</nav>
</div>
<div class="parent">
<div class="content1">Here goes content1</div>
<div class="content2">Here goes content2</div>
<div class="content3">Here goes content3</div>
<div class="content4">Here goes content4</div>
<div class="content5">Here goes content5</div>
</div>answered Nov 20 '18 at 8:45
Itay Gal
7,51752559
edited Nov 20 '18 at 8:52
answered Nov 20 '18 at 8:45
Itay Gal
7,51752559
answered Nov 20 '18 at 8:45
Itay Gal
7,51752559
answered Nov 20 '18 at 8:45
Itay Gal
7,51752559
7,51752559
add a comment |
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%2f53378091%2favoid-that-keyframe-animation-overflows-submenus-in-navigation%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
an animation question each hour today? :p
– Temani Afif
Nov 19 '18 at 15:46
hahah, yeah working on something here :-)
– Michi
Nov 19 '18 at 15:50
.header:hover + .parent { top: 2em; }– Mr Lister
Nov 19 '18 at 17:40