I'm trying to make a css class and animation which will make a div (and it's contents) fade out or move, but ultimately, the div to have display:none and visibility:hidden
My effort is not working! I can get it to either animate, or to appear to be "removed"
This crude example demonstrates the issue
.hide {
animation-name:fadeOut;
animation-duration:1s;
/*visibility: hidden;
display: none;*/
}
#keyframes fadeOut {
from {
opacity: 1;
margin-left: 0%;
}
to {
opacity: 0;
margin-left: -100%;
}
}
<div class="hide">
<div style="padding:20px;background:orange;">
<div style="padding:5px;background:azure;">
My content
</div>
</div>
</div>
I also tried updating the CSS to
to {
opacity: 0;
margin-left: -100%;
visibility: hidden;
display: none;
}
And also on https://jsfiddle.net/
As you can see, in the CSS I have commented out the hiding part (although the opacity makes it hidden).
Is it possible to apply the fadeout and then update the visibility and display without using JavaScript?
Add animation-fill-mode: forwards; so that the element you're animating stays on the last (key)frame, and it doesn't start over or refresh to the beginning.
Learn more about animation-fill-mode.
Another way to write this animation:
.hide {
animation: fadeOut 1s forwards;
}
.hide {
animation-name:fadeOut;
animation-duration:1s;
animation-fill-mode: forwards; /* added */
/*visibility: hidden;
display: none;*/
}
#keyframes fadeOut {
from {
opacity: 1;
margin-left: 0%;
}
to {
opacity: 0;
margin-left: -100%;
height: 0; /* added */
}
}
<div class="hide">
<div style="padding:20px;background:orange;">
<div style="padding:5px;background:azure;">
My content
</div>
</div>
</div>
<div>
Other content
</div>
Scrollbar fix
A possible solution to the scrollbar issue is to bring the hidden element back to the initial position with margin: 0; (or whatever the initial margin was):
#keyframes fadeOut {
0% {
opacity: 1;
margin-left: 0%;
}
99% {
opacity: 0;
margin-left: -100%;
height: 0;
}
100% {
opacity: 0;
margin-left: 0; /* added */
height: 0;
}
}
Related
I have a full screen drop down menu that goes up and down the screen when the user interacts with the menu button. I didn't like that the full screen menu animates when the page loads so I set the opacity of the menu to 0 so that you wouldn't see the animation when the page loads. I created an onclick event that sets the opacity to 1 when the user clicks on the menu. that solved the issue of seeing the animation when the user loads the index page. here's the code for how I did it:
HTML
<div class="menu">
<input type="checkbox" class="toggler" onclick="document.getElementById('overlay').style.opacity='1'">
<div class="icon">
<div></div>
</div>
<div class="overlay" id="overlay">
<nav>
<div id="nav-links"></div>
</nav>
</div>
</div>
CSS
#keyframes slideDown {
0% {
transform: translateY(-100%)
}
100% {
transform: translateY(0%)
}
}
#keyframes slideUp {
0% {
transform: translateY(0%)
}
100% {
transform: translateY(-100%);
}
}
.overlay {
position: fixed;
background: var(--taupe-color);
opacity: 0;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.menu .toggler:checked ~ .overlay {
animation: slideDown 2s forwards;
}
.menu .toggler:not(:checked) ~ .overlay {
animation: slideUp 2s forwards;
}
The only issue now is that when the user clicks on a link to navigate to another page from the menu, the menu no longer animates up. My guess is that on page load, the opacity over the overlay menu is set back to 0 so we can't see the animation actually happening on the other pages. My only idea to fix this is to duplicate the overlay class for the other pages and give it a different name but set the opacity to 1. I'm wondering if there is a better solution than the one I came up with. Ideally, the animation only happens when a link is clicked in the menu or when the menu button is toggled.
EDIT
is there a way to have the menu animate only when the user clicks the menu button or clicks one of the nav links in the menu?
I would suggest maybe adding a class to turn the opacity to 1 upon clicking?
I'm not sure if this is what you are looking for, but here is Codepen that I believe does what you're looking for:
#keyframes slideDown {
0% {
transform: translateY(-100%)
}
100% {
transform: translateY(0%)
}
}
#keyframes slideUp {
0% {
transform: translateY(0%)
}
100% {
transform: translateY(-100%);
}
}
.overlay {
position: fixed;
background: var(--taupe-color);
opacity: 0;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.active {
opacity:1;
}
.menu .toggler:checked ~ .overlay {
animation: slideDown 2s forwards;
}
.menu .toggler:not(:checked) ~ .overlay {
animation: slideUp 2s forwards;
}
<div class="menu">
<input type="checkbox" class="toggler" onclick="document.getElementById('overlay').classList.add('active')">
<div class="icon">
<div></div>
</div>
<div class="overlay" id="overlay">
<nav>
<div id="nav-links"></div>
TESTTTTTTTTTTTT
</nav>
</div>
</div>
Imagine i have 3 div :
<div class="one animated">
I'm the first div
</div>
<div class="two">
second div
</div>
<div class="three">
Last one
</div>
I have a code to move the first to the top :
.animated {
animation: animation 2s;
animation-fill-mode: forwards;
}
#keyframes animation {
0% { top: 0; opacity: 1 }
100% { top: -300px; opacity: 0 }
}
I don't understand why the first div move to top, but not the others.
The first one disappear so i want to replace the blank by my others div ...
Something like that :
function test() {
document.getElementById("sample").classList.add("animated");
}
.one {
border: 1px solid red;
}
.animated {
animation: animation 2s;
animation-fill-mode: forwards;
}
#keyframes animation {
0% { top: 0; opacity: 1 }
100% { top: -300px; opacity: 0 }
}
<div class="one" id="sample">
I'm the first div
</div>
<div class="two">
second div
</div>
<div class="three">
Last one
</div>
<button onclick="test()">Test</button>
Use absolute:position; on Keyframes. This will make sure as soon as the div is hidden it automatically moves to the top.
Also you can add additional keyframes attributes to make if smooth.
function test() {
document.getElementById("sample").classList.add("animated");
}
.one {
border: 1px solid red;
}
.animated {
animation: animation 2s;
animation-fill-mode: forwards;
}
#keyframes animation {
0% {
top: 0;
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 0;
position: absolute;
}
}
<div class="one" id="sample">
I'm the first div
</div>
<div class="two">
second div
</div>
<div class="three">
Last one
</div>
<button onclick="test()">Test</button>
Add position: absolute; to .animated class in your css
function test() {
document.getElementById("sample").classList.add("animated");
}
.one {
border: 1px solid red;
}
.animated {
animation: animation 2s;
animation-fill-mode: forwards;
position: absolute; // Adding this will help
transition: all 2s linear;
}
#keyframes animation {
0% { top: 0; opacity: 1; }
50% {top: -1; opacity: 0.5;}
100% { top: -300px; opacity: 0; }
}
<div class="one" id="sample">
I'm the first div
</div>
<div class="two">
second div
</div>
<div class="three">
Last one
</div>
<button onclick="test()">Test</button>
I have a typewriter effect in CSS for my below text:
these words are in two-line, I have the following code for typewriter effect
.typewriter h1 {
color: #333;
font-family: monospace;
overflow: hidden;
/* Ensures the content is not revealed until the animation */
border-right: .15em solid #ff5d22;
/* The typwriter cursor */
white-space: nowrap;
/* Keeps the content on a single line */
margin: 0 auto;
/* Gives that scrolling effect as the typing happens */
/* Adjust as needed */
animation: typing 3.5s steps(30, end), blink-caret .5s step-end infinite;
}
/* The typing effect */
#keyframes typing {
from {
width: 0
}
to {
width: 100%
}
}
/* The typewriter cursor effect */
#keyframes blink-caret {
from,
to {
border-color: transparent
}
50% {
border-color: orange
}
}
<div class="typewriter">
<h1>Professional, Creative, Flexible, Scalable Workspace</h1>
</div>
Now the problem is, the typewriter is only working in the first line, it's not going to the second line, can anyone please tell me what is wrong with my code?
try like this.. this way of css. or you must add js
html
<div class="container">
<p class="typing">
This paragraph of text will be animated with a "typewriter" style effect, and it will continue to work even if it splits across multiple lines. Well, in this case, up to a maximum of 5 lines, but you get the picture.
</p>
<div class="hiders">
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
</div>
css
#keyframes typing {
from { width: 100% }
to { width: 0 }
}
.container {
position: relative;
font-family: Consolas, monospace;
}
.typing {
position: absolute;
top: 0;
margin: 0;
z-index: -1;
}
.hiders {
margin: 0;
position: absolute;
top: 0;
width: 100%;
}
.hiders p {
position: relative;
clear: both;
margin: 0;
float: right; /* makes animation go left-to-right */
width:0; /* graceful degradation: if animation doesn't work, these are invisible by default */
background: white; /* same as page background */
animation: typing 2s steps(30, end);
animation-fill-mode: both; /* load first keyframe on page load, leave on last frame at end */
}
.hiders p:nth-child(2) {
animation-delay: 2s;
}
.hiders p:nth-child(3) {
animation-delay: 4s;
}
.hiders p:nth-child(4) {
animation-delay: 6s;
}
.hiders p:nth-child(5) {
animation-delay: 8s;
}
I wan to make animation from left to right (animation start in invisible area like left: -100px) and end in invisible area too (right: -100px) I am using this code which works but not correctly on different sizes of screens becuase is in %. And i need to remake it but i dont know how.
.ip_first_block {
width: 100%;
height: 100%;
}
section {
position: relative;
overflow: hidden;
}
.ip_welcome_text {
width: 100%;
height: 70%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.astronaut1 {
position: relative;
animation: lefttoright 10s;
animation-fill-mode: forwards;
}
#keyframes lefttoright {
from {
transform: translateX(-1500%);
}
to {
transform: translateX(2200%);
}
}
<section style="height:100%;">
<div class="ip_first_block" id="ifb">
<div class="ip_welcome_text">
<div class="astronaut1">
<img src="images/astronaut.svg" height="70px" ; width="70px;" />
</div>
</div>
</div>
</section>
It's easier if you animate the position, e.g. left property:
body {margin: 0}
.astronaut1 {
overflow: hidden;
}
img {
position: relative;
left: -70px; /* starting point; needs to be at least the img width to hide it */
animation: lefttoright 10s forwards;
}
#keyframes lefttoright {
to {left: 100%} /* cover the entire parent width */
}
<div class="astronaut1">
<img src="http://placehold.it/70x70" alt="" height="70" width="70">
</div>
Is marquee element supported in Html 5 ? if not, how could we give that effect (design) by Css 3 coding. I mean scrolling text one side to another side, etc etc.
Some browsers still supports marquee element. But when I google it. Some sites are saying that it is not supported by html 5. So what is its alternative options in css 3.
You can use css keyframes for making marquee effect
<div class="marquee">
<div>
<span>This is marquee text...done with css keyframes without using marquee tag</span>
<span>This is marquee text...done with css keyframes without using marquee tag</span>
</div>
body { margin: 20px; }
.marquee {
height: 25px;
width: 600px;
overflow: hidden;
position: relative;
}
.marquee div {
display: block;
width: 200%;
height: 30px;
position: absolute;
overflow: hidden;
animation: marquee 5s linear infinite;
}
.marquee span {
float: left;
width: 50%;
}
#keyframes marquee {
0% { left: 0; }
100% { left: -100%; }
}
From MDN
The HTML <marquee> element is used to insert a scrolling area of text. You can control what happens when the text reaches the edges of its content area using its attributes.
The element is obsolete and must not be used. While some browsers still support it, it's not required.
Marquee in CSS3
body {
margin: 20px;
}
.marquee {
height: 25px;
width: 420px;
overflow: hidden;
position: relative;
}
.marquee div {
display: block;
width: 200%;
height: 30px;
position: absolute;
overflow: hidden;
animation: marquee 5s linear infinite;
}
.marquee span {
float: left;
width: 50%;
}
#keyframes marquee {
0% {
left: 0;
}
100% {
left: -100%;
}
}
<div class="marquee">
<div>
<span>You spin me right round, baby. Like a record, baby.</span>
<span>You spin me right round, baby. Like a record, baby.</span>
</div>
</div>