When my animation ends, my bottom_row element should disappear (as display: none is set at 100%), but it does not happen. Why?
.bottom_row {
opacity: 1;
animation: hide 5s linear 0s 1 normal forwards running;
}
#keyframes hide {
0% {
opacity: 1;
}
95% {
opacity: 0.05;
}
100% {
opacity: 0;
display: none;
color: red;
font-size: 48px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<header>
<nav class="header_nav_container">
<div class="top_row">
TOP ROW CONTENT
</div>
<div class="bottom_row">
BOTTOM ROW CONTENT
</div>
<div class="third_row">
THIRD ROW CONTENT
</div>
</nav>
</header>
</body>
</html>
If I simply set display: none; right away, the cell is not present in the layout (which is what I want at the end of my anim):
.bottom_row {
opacity: 1;
display: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<header>
<nav class="header_nav_container">
<div class="top_row">
TOP ROW CONTENT
</div>
<div class="bottom_row">
BOTTOM ROW CONTENT
</div>
<div class="third_row">
THIRD ROW CONTENT
</div>
</nav>
</header>
</body>
</html>
How do I make an element disappear from the layout / grid without js? Is it possible and why it does not work with animations?
You can use height: 0;overflow:hidden; instead and you will get the same visual result:
.bottom_row {
opacity: 1;
animation: hide 5s linear forwards ;
}
#keyframes hide {
0% {
opacity: 1;
}
95% {
opacity: 0.05;
}
100% {
opacity: 0;
height: 0;
overflow:hidden;
color: red;
font-size: 48px;
}
}
<header>
<nav class="header_nav_container">
<div class="top_row">
TOP ROW CONTENT
</div>
<div class="bottom_row">
BOTTOM ROW CONTENT
</div>
<div class="third_row">
THIRD ROW CONTENT
</div>
</nav>
</header>
Related
If I have two div elements that contain some text and I want them into one another such that as one disappears the other appears and it then repeats how do i go about doing this? I'm not sure where to where to start.
<div id="body">
<div>My great adventure</div>
<div>Travel, adventure, leisure</div>
</div>
Using CSS animations we can achieve this pretty simply.
We will create 2 animations. One that causes the text to fade in initially, and one to cause the text to fade out initially. We will set these animations to loop forever.
You can fine tune the timings and opacity levels to your needs.
.fade {
position: absolute;
}
#start {
opacity: 1;
animation-name: fadeStart;
animation-duration: 4s;
animation-iteration-count: infinite;
}
#end {
opacity: 0;
animation-name: fadeEnd;
animation-duration: 4s;
animation-iteration-count: infinite;
}
#keyframes fadeStart {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes fadeEnd {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
<div id="container">
<div class="fade" id="start">My great adventure</div>
<div class="fade" id="end">Travel, adventure, leisure</div>
</div>
If you are just talking about non-animated, static elements visually fading into one another, you can use a linear-gradient for the background of ::before and ::after pseudo-elements.
Below is a pure CSS example making use of CSS variables for consistent colors and sizing. The ::before and ::after pseudo-elements fade from the background color to transparent. You can increase the multiplier in margin on the #body > div to decrease the amount of overlap.
body {
--div-bg: orange;
--fade-height: 3rem;
background: white;
}
#body>div {
position: relative;
color: black;
background: var(--div-bg);
padding: 1rem;
margin: calc(var(--fade-height) * 1) 0 0;
}
#body>div::before,
#body>div::after {
content: "";
position: absolute;
left: 0;
right: 0;
height: var(--fade-height);
}
#body>div::after {
bottom: calc(var(--fade-height) * -1);
background: linear-gradient(to bottom, var(--div-bg), transparent);
}
#body>div::before {
top: calc(var(--fade-height) * -1);
background: linear-gradient(to top, var(--div-bg), transparent);
}
<div id="body">
<div>My great adventure</div>
<div style="--div-bg: #33F;">Travel, adventure, leisure</div>
</div>
I have to make an animation of 5 balls of different colors that move in a wave. I am struggling with the different starting positions of the balls as the instructions say. And the position and color of the first-child goes last in the sequence of 5 balls for some reason.
Use this color palette (Links to an external site.) to style the div elements with the circle class as per the reference above. Each circle should be 50px in diameter.
Implement an animation so that the circles move up 100px, then move back down to their original position. The movement should have a duration of 1 second. Each ball should start the animation at a slightly different point in time so that they appear slightly out of phase. The overall effect is that they appear as an infinite looping ‘wave’.
Here is the HTML
.circle {
height: 50px;
width: 50px;
border-radius: 50%;
background-color:antiquewhite;
animation: circle 1s linear infinite;
float: left;
margin: 5px;
}
.circle:first-child {animation-delay: -0.1s; background: #EF476F}
.circle:nth-child(2) {animation-delay: -0.2s; background: #FFD166;}
.circle:nth-child(3) {animation-delay: -0.4s; background: #06D6A0;}
.circle:nth-child(4) {animation-delay: -0.6s; background: #118AB2;}
.circle:nth-child(5) {animation-delay: -0.8s; background: #073B4C;}
#keyframes circle {
0%, 100% {transform: translateY(0px);}
50% {transform: translateY(100px);}
}
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>CSS Challenges</h1>
<section>
<h2>Challenge 3</h2>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</section>
</body>
</html>
Your problem is the nth-child(). Your first circle element is actually the second child element in the container, because the first child element is the <h2>.
The nth-child() does not distinct by class so this method won't work.
However, the solution is found in another, more fitting selector nth-of-type(). This selector also can't distinguish by class name, but can by element type.
.circle {
height: 50px;
width: 50px;
border-radius: 50%;
background-color: antiquewhite;
animation: circle 1s ease-in-out infinite; /* changed it to ease-in-out just for better visual result */
float: left;
margin: 5px;
}
.circle:nth-of-type(1) { animation-delay: -0.1s; background: #EF476F }
.circle:nth-of-type(2) { animation-delay: -0.2s; background: #FFD166; }
.circle:nth-of-type(3) { animation-delay: -0.4s; background: #06D6A0; }
.circle:nth-of-type(4) { animation-delay: -0.6s; background: #118AB2; }
.circle:nth-of-type(5) { animation-delay: -0.8s; background: #073B4C; }
#keyframes circle {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(100px); }
}
<h1>CSS Challenges</h1>
<section>
<h2>Challenge 3</h2>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</section>
The selector will find the element with class circle and find the nth of its type - in this case div. If you add another element, like <span class"circle"></span>, it will get the styles of .circle:nth-of-type(1) because this is the first span with this class.
I have a button that when I click it, it makes an animation for an image to move up.
Every-time I click the button, it should add another image that moves up.
The problem is: If I have tapped the button more than one time, the first one completes, but all the other images just disappears before reaching the point.
css
.zoom{
position: fixed;
top: 50%;
right: 1%;
width: 5%;
height: 5%;
opacity: 0;
animation: zoom 2s ease forwards;
z-index: 2;
}
#keyframes zoom{
0%{opacity: 0}
50%{opacity: 1}
100%{opacity: 0; top: 1%;}
}
html
<head>
<script src="https://code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script>
</head>
<body>
<div class="col-lg-4 item-info">
<div class="card" style="background-color: #05008F">
<img class="thumbnail" src="image.png" width="640" height="360">
</div>
<div class="box-element">
<button>Image Up</button>
</div>
</div>
<script type="text/javascript">
$("button").on("click", function() {
$(this).closest(".item-info")
.find("img")
.clone()
.addClass("zoom")
.appendTo("body");
setTimeout(function(){
$(".zoom").remove();
}, 2000);
});
</script>
</body>
The animation comes from this tutorial
clicking the button more than 1 time, should show more than 1 image going up.
The problem is:
When I click many times during the 2 seconds, the images are displayed, but when the 2 seconds are gone from the first click, all of the images disappear.
The problem is that on the timeout all the .zoom images are removed.
This snippet 'remembers' which img is to be removed on each timeout.
It is important in a practical situation that these images are removed when no longer needed else you could eventually run out of store.
<head>
<script src="https://code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script>
<style>
.zoom {
position: fixed;
top: 50%;
right: 1%;
width: 5%;
height: 5%;
opacity: 0;
animation: zoom 2s ease forwards;
z-index: 2;
}
#keyframes zoom {
0% {
opacity: 0
}
50% {
opacity: 1
}
100% {
opacity: 0;
top: 1%;
}
}
</style>
</head>
<body>
<div class="col-lg-4 item-info">
<div class="card" style="background-color: #05008F">
<img class="thumbnail" src="https://picsum.photos/id/1084/640/360?grayscale" width="640" height="360">
</div>
<div class="box-element">
<button>Image Up</button>
</div>
</div>
<script type="text/javascript">
$("button").on("click", function() {
const thisImg = $(this).closest(".item-info")
.find("img")
.clone();
thisImg.addClass("zoom")
.appendTo("body");
setTimeout(function() {
thisImg.remove();
}, 2000);
});
</script>
</body>
$("button").on("click", function() {
$(this).closest(".item-info")
.find("img")
.clone()
.addClass("zoom")
.appendTo("body");
if(!$('.zoom').get(0) )
setTimeout(function(){
$(".zoom").remove();
}, 2000);
});
Try it this way and tell if everythins is ok :)
I wrote such a code to operate opacity at check time. This worked.
#check1:checked+.box {
animation: blink 1s;
}
#keyframes blink {
0%,
99% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<input type="checkbox" id="check1">
<div class="box">
<div class="content">
<p>content</p>
<button type="button">
<label for="check1">click me</label>
</button>
</div>
</div>
I also wanted to do the same operation when unchecking, so I added the animation property.
However, this will not work and the animation at check will not work. Why does this happen?
#check1 + .box {
animation: blink 1s;
}
#check1:checked + .box {
animation: blink 1s;
}
#keyframes blink {
0%, 99% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<input type="checkbox" id="check1">
<div class="box">
<div class="content">
<p>content</p>
<button type="button">
<label for="check1">click me</label>
</button>
</div>
</div>
Also, I defined an animation with the exact same processing as another name, and it worked normally. Why does this happen? Is there a smart CSS solution?
#check1+.box {
animation: blink1 1s;
}
#check1:checked+.box {
animation: blink2 1s;
}
#keyframes blink1 {
0%,
99% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes blink2 {
0%,
99% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<input type="checkbox" id="check1">
<div class="box">
<div class="content">
<p>content</p>
<button type="button">
<label for="check1">click me</label>
</button>
</div>
</div>
go through it, I hope it will work for you
#check1+.box {
opacity:1;transition: 1s;
}
#check1:checked+.box {
opacity:0;transition: 1s;
}
<input type="checkbox" id="check1">
<div class="box">
<div class="content">
<p>content</p>
<button type="button">
<label for="check1">click me</label>
</button>
</div>
</div>
"...but why does it stop working when changing it to the checked pseudo-class?"
The unchecked state needs to have an explicit selector like:
#check1:not(:checked)
but that won't work with current layout because:
The trigger (i.e. <label>) is nested within the target (i.e. .box). That looks very awkward. In the updated demo, I had to remove the trigger from the flow by using:
position:absolute; z-index: 1; pointer-events:auto
and then the target (i.e. .box) pointer-events: none
The checkbox "state" is persistent so if selectors are similar, more than likely the latest version overrides previous selectors. In order to make everything animate from one keyframe I needed behavior that did not persist and had only one state -- :active.
:active
The animation occurs when the checkbox is checked/unchecked. If you take a step back check/uncheck looks a lot like click and the animation itself behaves briefly (like its namesake "blink"). The state of :active occurs when the user clicks -- specifically mousedown until mouseup.
HTML
Required
<br id='target'>
...
<a href='#target' class='link'>X</a>
CSS
Required
.box { pointer-events: none; }
.link { ...position: relative; z-index: 1;...pointer-events: auto; }
:target + .box :not(:active) { ... }
Demo 1
.box {
pointer-events: none;
}
.X {
display: inline-block;
position: relative;
z-index: 1;
background: rgba(0, 0, 0, 0.1);
width: 5ch;
height: 2.5ex;
line-height: 2.5ex;
border: 2px outset grey;
border-radius: 4px;
color: #000;
text-align: center;
text-decoration: none;
padding: 1px 3px;
pointer-events: auto;
}
:target+.box :not(:active) {
animation: blink 2s linear 0.1s;
}
#keyframes blink {
0% {
opacity: 0s;
}
70% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<br id='target'>
<article class="box">
<section class="content">
<p>Content inside .box</p>
<a href='#target' class='X'>X</a>
</section>
</article>
<p>Content outside of .box</p>
I am running the following code and once the animation completes the opacity of the image changes. Till animation is going on the image looks smooth after that it changes the opacity.
please find code at following JS: https://jsfiddle.net/7fk0b788/
<!DOCTYPE html>
<html lang ="en">
<head>
<title> joe's Pizza Co.-New York's Best Pizza</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<header>
<h1>
Joe's Pizza
</h1>
</header>
<div>
<section id="feature">
</section>
<section id="home-text">
</section>
<section id="offers">
</section>
</div>
<footer>
</footer>
</div>
</body>
</html>
#container
{
background: url("Img/background.jpg") no-repeat center center fixed;
background-size:cover;
min-width: 100%;
min-height: 100%;
position: fixed;
top:0;
left:0;
animation: fadein 4s;
filter: opacity(50%);
}
#keyframes fadein {
from {
opacity:0;
}
to {
opacity:.5;
}
}
There are a few ways you can do it:
Add forwards to the animation property as that will make sure the animation once it hits its 100%, it will persist:
animation: fadein 4s forwards;
or by adding
opacity:.5;
Using forwards
Using opacity
Change the opacity .5 to 1. It'll go smooth till the end. Your code snippet below
#keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}