Related
I made a progress bar with the following CSS:
.progress-bar-short,
.progress-bar-long {
animation-duration: 2.2s;
animation-iteration-count: infinite;
animation-delay: 200ms;
will-change: left, right;
}
.progress-bar-short {
animation-name: indeterminate-short-ltr;
}
.progress-bar-long {
animation-name: indeterminate-ltr;
}
#keyframes indeterminate-ltr {
0% {
left: -90%;
right: 100%;
}
60% {
left: -90%;
right: 100%;
}
100% {
left: 100%;
right: -35%;
}
}
#keyframes indeterminate-short-ltr {
0% {
left: -200%;
right: 100%;
}
60% {
left: 107%;
right: -8%;
}
100% {
left: 107%;
right: -8%;
}
}
<div>
<div class="progress-bar-long" style="left: 0%; right: 100%; top: 0; bottom: 0; position: absolute; background-color: red;"></div>
<div class="progress-bar-short" style="left: 0%; right: 100%; top: 0; bottom: 0; position: absolute; background-color: red;"></div>
</div>
I think it is a pretty standard progress bar. What I find problematic though is that depending on the length (width, size) of the progress bar the speed of the movement changes. Longer it is, speed is faster as animation has to traverse larger distance to finish the animation on time (in 2.2s). Because I would like to use the same progress bar for site-level progress bar on top and smaller progress bar inside components, this bothers me.
How could I make a progress bar which moves at a constant speed regardless of the length of the progress bar?
Codepen demo.
Try this pure CSS solution with calc() function and variables, we use them is to change duration and transform. So we need an absolute width value, because with pure CSS we can't find the relative width value like in JavaScript. In the .progress class has the--speed, --width and --duration variables, which an important because we use them for calculations. Increasing --speed will make animation play faster and decreasing --speed will slow it down.
Why I'm using the transform property instead of the left. web.dev
Update:
For responsive design, you can use media query breakpoints to change the --length variable and we have two ways: use a variable inside a class (or add extra class) or change the variable with !important.
.progress-bar {
--height: 3rem;
width: calc(var(--length) * 1px);
height: var(--height);
outline: 1px solid rgb(125, 164, 255);
position: relative;
overflow: hidden;
}
/* example with responsive class */
.flexible-class {
--length: 450;
outline: 1px solid rgb(238, 125, 255);
}
#media screen and (max-width: 680px) {
.flexible-class {
--length: 350;
}
.progress-bar {
/* --length: 350 !important; */ /* if you want change inline variable*/
}
}
#media screen and (max-width: 480px) {
.flexible-class {
--length: 250;
}
.progress-bar {
/* --length: 250 !important; */ /* if you want change inline variable*/
}
}
.progress {
--speed: 50;
--width: 80; /* 5rem / 5 * 16 = 80 */
--duration: calc((var(--width) + var(--length)) / var(--speed) * 1s);
position: absolute;
top: 0;
left: calc(-1px * var(--width));
background-color: rgb(68, 0, 255);
height: inherit;
width: calc(1px * var(--width));
animation-duration: var(--duration);
animation-iteration-count: infinite;
animation-delay: 200ms;
animation-name: animation;
animation-timing-function: linear;
}
#keyframes animation {
0% {
transform: translateX(0);
}
100% {
transform: translateX(calc((var(--length) + var(--width)) * 1px));
}
}
<div class="progress-bar" style="--length: 450">
<div class="progress"></div>
</div>
<div class="progress-bar" style="--length: 350">
<div class="progress"></div>
</div>
<div class="progress-bar" style="--length: 250">
<div class="progress"></div>
</div>
<div class="progress-bar flexible-class">
<div class="progress"></div>
</div>
Here's a simple progress bar using javascript which has a constant speed :D
How it works?
What it does is each millisecond it traverses one or two or three pixels ... (depending on the value given to the first variable called "Pixles_traversed_in_ms ") and inside that interval, we check if the progress bar has reached the end of it's container, if so we set the pixels to 0 s which means it will go back to the very left of the container. and it keeps doing that again and again.
let Pixles_traversed_in_ms = 2; // Change this to lower or increase the speed
// Variables
let container = document.querySelector('.container')
let progress_bar = document.querySelector('.container .progress_bar');
let pixels = 1;
setInterval(()=>{
pixels += Pixles_traversed_in_ms
progress_bar.style.left = pixels + 'px';
if (pixels >= container.clientWidth ) {
pixels = - progress_bar.clientWidth;
}
}, 1)
.container {
width:100%;
background:#f48225;
height:100px;
position:relative;
overflow:hidden;
}
.container .progress_bar {
position:absolute;
width:200px;
height:100%;
background:black;
/* You can get rid of these style below*/
display:flex;
align-items:center;
justify-content:center;
font-family:sans-serif;
font-size:12px;
color:#f48225;
}
<div class="container">
<div class="progress_bar">
Progress Bar :D
</div>
</div>
Live Preview
I tryed to find a solution and basically found the same thing as Anton's answer, I just added the progress length to the calcul of the duration.
:root {
--progress-width: 50;
--speed: 100;
}
.w-25 {
--bar-width: calc(250 - var(--progress-width));
}
.w-50 {
--bar-width: calc(500 - var(--progress-width));
}
.w-75 {
--bar-width: calc(750 - var(--progress-width));
}
.w-100 {
--bar-width: calc(1000 - var(--progress-width));
}
.bar {
position: relative;
width: calc(var(--bar-width) * 1px);
height: 30px;
border: 1px solid black;
margin: 10px 0;
overflow: hidden;
}
.progress {
position: absolute;
width: calc(var(--progress-width) * 1px);
height: 100%;
left: calc(-1px * var(--progress-width));
animation: animation calc((var(--bar-width) + var(--progress-width)) / var(--speed) * 1000ms) linear infinite;
background-color: red;
}
#keyframes animation {
to {
transform: translateX(calc((var(--bar-width) + var(--progress-width)) * 1px));
}
}
<div class="bar w-25">
<div class="progress"></div>
</div>
<div class="bar w-50">
<div class="progress"></div>
</div>
<div class="bar w-75">
<div class="progress"></div>
</div>
<div class="bar w-100">
<div class="progress"></div>
</div>
Originaly I tryed to make it in pure css but with percentages, I realized I don't think you can because you need to get the value in the duration calcul.
For example, if your screen width is 1024px width and your bar is 25% (and the progress width is 50px), the calcul will be :
(25% of 1024 + 50px)/100 * 1s = (256 + 50)/100 * 1s = 3.06s
So the speed will be 306px/3.06s = 100px/s
If we chose 50%, the calcul will be :
(50% of 1024 + 50px)/100 * 1s = (512 + 50)/100 * 1s = 5.62s
So the speed will be 562px/5.62s = 100px/s
The speed are the same, using percentage.
The problem is that you can't make this calcul in css because you don't know that the screen width is 1024px (so you get 50% of ?)
Here is a cheat that will only work on screen = 1024px because I specified --window-width: 1024 to do the math. I used right for the animation for the same reason, I don't know the length of the parent (you still could use translateX if you wrap the progress in a container having a width:100% and apply the animation to it).
:root {
--progress-width: 50;
--speed: 100;
--window-width: 1024;
}
body {
margin: 0;
}
.w-25 {
--bar-width: 25;
}
.w-50 {
--bar-width: 50;
}
.w-75 {
--bar-width: 75;
}
.w-100 {
--bar-width: 100;
}
.bar {
position: relative;
width: calc(var(--bar-width) * 1%);
height: 30px;
box-shadow: 0 0 0 1px black;
margin: 10px 0;
overflow: hidden;
}
.progress {
position: absolute;
width: calc(var(--progress-width) * 1px);
height: 100%;
background-color: red;
right: calc(100% + 1px * var(--progress-width));
animation: animation calc((var(--bar-width) * var(--window-width) / 100 + 2 * var(--progress-width)) / var(--speed) * 1000ms) linear infinite;
}
#keyframes animation {
to {
right: calc(-1px * var(--progress-width));
}
}
<div class="bar w-25">
<div class="progress"></div>
</div>
<div class="bar w-50">
<div class="progress"></div>
</div>
<div class="bar w-75">
<div class="progress"></div>
</div>
<div class="bar w-100">
<div class="progress"></div>
</div>
You could use a multitude of solutions to your code. The problem with your code is that since the units are in percentages the speed will change based on much of the progress bar is filled. I recommend setting your units to px or making a calculator to find how much to fill up based on how much of the bar is already filled.(Like some others already made)
I'm making a diaporama in pure css, and so far so good, however each pic changes to the other abruptly and i'm trying to make the change gradual (one pic disapearing slowly while the other appears).
I've tried with all timing functions (except cubic-bezier since i'm not too sure how to use it yet) and it hasn't worked.
How to make the changes gradual? I've seen someone doing it with only css3 but I haven't been able to reproduce it.
Here is the css and the html
.diapo {
width: 350px;
height: 150px;
border: 3px solid #544B4D;
background-image: url("http://via.placeholder.com/350x150/F00");
background-size: 350px 150px;
animation-name: diapo1;
animation-duration: 9s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: normal;
}
#keyframes diapo1 {
0% {
background-image: url("http://via.placeholder.com/350x150/F00");
}
33% {
background-image: url("http://via.placeholder.com/350x150/0F0");
}
66% {
background-image: url("http://via.placeholder.com/350x150/00F");
}
}
<body>
<div class="diapo">
</div>
</body>
Thanks for any answer!
IMO, the best solution is to use multiple img in the DOM combined with some opacity animations:
.container {
position: relative;
/* Define size on the container: (best if aligned with images size) */
width: 350px;
height: 150px;
box-sizing: content-box;
/* fancy stuff, not required */
border: 1px solid #000;
border-radius: 5px;
overflow: hidden;
}
.container > img {
height: inherit;
width: inherit;
/* images are stacked on top of each other */
position: absolute;
top: 0;
left: 0;
opacity: 0;
/* 10s is total time (time for a complete cycle) */
animation: fadeInOut 10s infinite;
}
.container > img:nth-child(2) {
animation-delay: 3.33s; /* totalTime * 1/3 */
}
.container > img:nth-child(3) {
animation-delay: 6.66s; /* totalTime * 2/3 */
}
/* choose a % of anim time allocated to transition,
let's call it transTime. Here it's 10%. */
#keyframes fadeInOut {
0% {
opacity: 0;
}
/* transTime */
10% {
opacity: 1;
}
/* transTime + (100% / image count) */
43% {
opacity: 1;
}
/* previous + transTime */
53% {
opacity: 0;
}
}
<div class="container">
<img src="http://via.placeholder.com/350x150/F00"/>
<img src="http://via.placeholder.com/350x150/0F0"/>
<img src="http://via.placeholder.com/350x150/00F"/>
</div>
I strongly advise you to use a preprocessor that allow variables and loops (maybe SCSS or Less) to generate the nth-child section and even the animation block
I don't know that most browser can interprete a change in background-image gradually... How can they interprete that change ? Should it mean the picture slides from the top, should it mean a fade out/fade in, should it mean a fade in of the new picture above the old one ?
I think you'd need to animate a fade out/in (The code below might not work as is, it is just to give you an idea) :
#keyframes diapo1 {
0% {
background-image: url("pics-about-us/a-u1.jpeg");
}
30% { opacity:1;}
33% {
background-image: url("pics-about-us/a-u3.jpeg");
opacity:0;
}
36% {opacity:1}
//etc...
If you want to do it with a gradual change over the whole animation, I would use on <div> child per background image and animate each individually.
I'd like to make both .quote-container and #new-quote elements in the same line even if the window width is very small. For example 83pixels. Using min-width on the .quote-container element worked, however, using the same technique on the #new-quote element didn't work.
Maybe that's because #new-quote isn't the children of .quote-container? I even tried to make it a child and it was even worse (picture was taken on the desktop window size):
What I'd like to achieve in visual:
var getNewQuote = function(callback) {
var quote = {};
quote.text = 'Example';
quote.author = 'Example';
$(".loading").hide();
callback(quote);
};
var quoteContainerStartingPadding,
quoteContainerEndingPadding,
newQuoteEndingPadding;
if ($(window).width() > 648) {
quoteContainerStartingPadding = "0 2.5rem";
quoteContainerEndingPadding = "2.5rem";
newQuoteEndingPadding = "2.5rem .75rem";
} else {
quoteContainerStartingPadding = "0 1.5em";
quoteContainerEndingPadding = "1.5rem";
newQuoteEndingPadding = "1.5rem .75rem";
}
$(".quote-container").css("padding", quoteContainerStartingPadding);
getNewQuote(function(quote) {
var getRandomColor = function() {
var colors = ["#ff9966", "#7f00ff", "#396afc", "#0cebeb", "#06beb6", "#642b73", "#36d1dc", "#cb356b", "#3a1c71", "#ef3b36", "#159957", "#000046", "#007991", "#56ccf2", "#f2994a", "#e44d26", "#4ac29a", "#f7971e", "#34e89e", "#6190e8", "#3494e6", "#ee0979"],
randomNumber = Math.floor(Math.random() * colors.length);
return colors[randomNumber];
};
var updateText = function($t) {
var twitter = "https://twitter.com/intent/tweet?hashtags=quotes&related=freecodecamp&text=";
twitter += '"' + quote.text + '" ';
twitter += quote.author;
var tumblr = "https://www.tumblr.com/widgets/share/tool?posttype=quote&tags=quotes,freecodecamp&caption=";
tumblr += quote.author;
tumblr += "&content=";
tumblr += quote.text;
tumblr += "&canonicalUrl=https%3A%2F%2Fwww.tumblr.com%2Fbuttons&shareSource=tumblr_share_button";
var $icon = $("<i class='fa fa-quote-left'>").prop("aria-hidden", true);
$t.find(".quote-text").html("").append($icon, quote.text);
$t.find(".quote-author").html("- " + quote.author);
$("#tweet-quote").attr("href", twitter);
$("#tumblr-quote").attr("href", tumblr);
};
var calcNewHeight = function(q) {
var $temp = $("<div>", {
class: "quote-container temp",
}).appendTo($("body"));
$temp.append($("<div>", {
class: "quote-text"
}), $("<div>", {
class: "quote-author"
}));
updateText($temp, q);
var h = $temp.height() + 40;
$temp.remove();
return h;
};
var changeColor = function(newColor) {
$("body, .button:not(#new-quote)").animate({
backgroundColor: newColor
});
$("#new-quote").animate({
color: newColor
});
$(".quote-text, .quote-author").css("color", newColor);
if ($("#modStyle").length === 0) {
$("head").append("<style id='modStyle'>#new-quote:before {background:" + newColor + ";} .lds-eclipse {box-shadow: 0 .25rem 0 0 " + newColor + ";}</style>");
} else {
$("head style#modStyle").html("#new-quote:before {background:" + newColor + ";} .lds-eclipse {box-shadow: 0 .25rem 0 0 " + newColor + ";}");
}
};
var getQuote = function() {
var nc, nh = 0;
nc = getRandomColor();
nh = calcNewHeight(quote);
changeColor(nc);
$(".quote-container, #new-quote").animate({
height: nh / 16 + "rem",
}, {
duration: 1000,
queue: false
});
$(".quote-container").animate({
padding: quoteContainerEndingPadding
}, {
duration: 1000,
queue: false
});
$("#new-quote").animate({
padding: newQuoteEndingPadding
}, {
duration: 1000,
queue: false
});
updateText($(".quote-container"), quote);
$(".quote-container").children().not($(".loading")).fadeTo(750, 1);
};
$(".quote-container, #new-quote").css({
visibility: "visible",
height: 0
});
$("#new-quote").css("padding", "0 .75rem");
getQuote();
}
);
var two = function() {
$(".quote-container").children().not($(".loading")).hide();
$(".loading").show();
getNewQuote(function(quote) {
var getRandomColor = function() {
var colors = ["#ff9966", "#7f00ff", "#396afc", "#0cebeb", "#06beb6", "#642b73", "#36d1dc", "#cb356b", "#3a1c71", "#ef3b36", "#159957", "#000046", "#007991", "#56ccf2", "#f2994a", "#e44d26", "#4ac29a", "#f7971e", "#34e89e", "#6190e8", "#3494e6", "#ee0979"],
randomNumber = Math.floor(Math.random() * colors.length);
return colors[randomNumber];
};
var updateText = function($t) {
var twitter = "https://twitter.com/intent/tweet?hashtags=quotes&related=freecodecamp&text=";
twitter += '"' + quote.text + '" ';
twitter += quote.author;
var tumblr = "https://www.tumblr.com/widgets/share/tool?posttype=quote&tags=quotes,freecodecamp&caption=";
tumblr += quote.author;
tumblr += "&content=";
tumblr += quote.text;
tumblr += "&canonicalUrl=https%3A%2F%2Fwww.tumblr.com%2Fbuttons&shareSource=tumblr_share_button";
var $icon = $("<i class='fa fa-quote-left'>").prop("aria-hidden", true);
$t.find(".quote-text").html("").append($icon, quote.text);
$t.find(".quote-author").html("- " + quote.author);
$("#tweet-quote").attr("href", twitter);
$("#tumblr-quote").attr("href", tumblr);
};
var calcNewHeight = function(q) {
var $temp = $("<div>", {
class: "quote-container temp",
}).appendTo($("body"));
$temp.append($("<div>", {
class: "quote-text"
}), $("<div>", {
class: "quote-author"
}));
updateText($temp, q);
var h = $temp.height() + 40;
$temp.remove();
return h;
};
var changeColor = function(newColor) {
$("body, .button:not(#new-quote)").animate({
backgroundColor: newColor
});
$("#new-quote").animate({
color: newColor
});
$(".quote-text, .quote-author").css("color", newColor);
if ($("#modStyle").length === 0) {
$("head").append("<style id='modStyle'>#new-quote:before {background:" + newColor + ";} .lds-eclipse {box-shadow: 0 .25rem 0 0 " + newColor + ";}</style>");
} else {
$("head style#modStyle").html("#new-quote:before {background:" + newColor + ";} .lds-eclipse {box-shadow: 0 .25rem 0 0 " + newColor + ";}");
}
};
var getQuote = function() {
var nc = getRandomColor(),
nh = calcNewHeight(quote);
$(".quote-container").children().not($(".loading")).css("opacity", 0);
changeColor(nc);
$(".quote-container, #new-quote").animate({
height: nh / 16 + "rem",
}, {
duration: 1000,
queue: false
});
updateText($(".quote-container"), quote);
$(".quote-container").children().not($(".loading")).fadeTo(750, 1);
};
getQuote();
});
}
;
html,
body {
height: 100%;
width: 100%;
}
body {
margin: 0;
padding: 0;
background: #333;
color: #333;
font-family: sans-serif;
}
.quote-container {
width: 35%;
background: #fff;
margin: 0;
display: inline-block;
vertical-align: middle;
border-radius: 0.1875rem;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
visibility: hidden;
min-width: 15rem;
}
.quote-text {
font-size: 1.625rem;
}
.quote-text i {
margin-right: 0.6rem;
}
.quote-text p {
display: inline;
}
.quote-author {
font-size: 1rem;
margin: 0 0.4rem 2rem 0;
text-align: right;
}
.button {
padding: 0.75rem;
text-align: center;
font-size: 1rem;
color: #fff;
border-radius: 0.1875rem;
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
user-select: none;
}
.button:not(#new-quote):hover {
opacity: 0.8 !important;
}
.button:not(#new-quote) {
min-width: 1rem;
min-height: 1rem;
}
.button i {
vertical-align: middle;
}
#new-quote {
white-space: nowrap;
writing-mode: vertical-lr;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
vertical-align: middle;
background: #fff !important;
margin: 0;
position: relative;
right: 0.25625rem;
color: #333;
visibility: hidden;
}
#new-quote:before {
content: "";
position: absolute;
height: 100%;
width: 0.0625rem;
bottom: 0;
left: 0;
visibility: hidden;
-webkit-transform: scaleY(0);
transform: scaleY(0);
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
#new-quote:hover:before {
visibility: visible;
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
.v-align {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.text-center {
text-align: center;
}
footer {
font-size: 0.85rem;
margin-bottom: 1rem;
}
footer a {
text-decoration: none;
color: #fff;
position: relative;
}
footer a:before {
content: "";
position: absolute;
width: 100%;
height: 0.0625rem;
bottom: 0;
left: 0;
background: #fff;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
footer a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
/* Loading animation */
#keyframes lds-eclipse {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
50% {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#-webkit-keyframes lds-eclipse {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
50% {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.loading {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.lds-eclipse {
-webkit-animation: lds-eclipse 1s linear infinite;
animation: lds-eclipse 1s linear infinite;
width: 10rem;
height: 10rem;
border-radius: 50%;
margin: auto;
}
#media (max-width: 62.5em) {
.quote-container {
width: 50%;
}
}
#media (max-width: 50em) {
.quote-container {
width: 65%;
}
}
#media (max-width: 17.96875em) {
.quote-container {
width: 40%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="v-align text-center">
<div class="quote-container">
<div class="quote-text">
</div>
<div class="quote-author"></div>
<a id="tweet-quote" class="button"><i class="fa fa-twitter"></i></a>
<a id="tumblr-quote" class="button"><i class="fa fa-tumblr"></i></a>
<div class="loading">
<div class="lds-eclipse"></div>
</div>
</div>
<div id="new-quote" class="button">New quote</div>
<footer>
Created by LukasLSC
</footer>
</div>
EDIT 1: Codepen: https://codepen.io/Kestis500/pen/KZvXgB?editors=0110
If you want to align things in CSS you usually have two different positioning concepts you can use for this purpose:
display (flex)
float
Usually it is a good idea to put all elements you want to align in a wrapping container like a div. In this manner you can just focus on your aligning issue and forget about the general layout - means where you want to have your aligned elements in the layout eventually. You can later on just position the wrapper and do not have to worry about the elements inside.
Another best practice is to give all your elements that this container inherits from a dimension (at least width). A common mistake is that elements that should be aligned break just because the parent element does not have enough space to fit all elements on one line. If you want to know why I provide an example at the end, just follow the *.
But lets go back to the two concepts that you can use. Which one you should use depends on one hand what other attributes you need to give the respective elements and what browsers you need to support. If you only want to support newer browser versions you can go with flexbox, the more secure way to do this is use percentages for widths and float.
Flexbox
.container {
display: flex;
flex-direction: row; // this makes your elements align horizontally
}
.child1 {
flex: 1 1 auto;
}
.child2 {
flex: 0 1 auto;
}
The flex attribute determines the dimension of a child. So consider the parent as width: 100%; and the numbers you give as a first parameter to flex is the ratio of the child's dimension compared to the other children.
Float
.container {
overflow: hidden;
width: 100%; // this must be relative to the containers parent of course
}
.child1 {
width: 75%;
float: left;
}
.child2 {
width: 25%;
float: left;
}
Mind that float takes effect on the elements following in the document flow AFTER the element that you give the float attribute. Also take into account that you might need to calculate margins, paddings or borders in additionally to the elements' widths (except for paddings when using box-sizing: border-box) and that elements containing only floated elements lose their "automatic" dimensions as floated elements lose their information about height and width as well. (overflow: hidden on the container solves this issue for you)
*In a responsive design e.g. you should give the highest parent a width of 100%. If you provide to a child width: 50%; it will now have exactly 50% of the entire width. If you now give the child of the child width: 50% it will be 25% of the entire width. This is less error prone then giving the child's child directly 25%. Let's assume later on you give the child a width of 50% the width of the child's child (25%) will relate to the childs width instead of the parent. So you will end up with a width of 12.5% for the child's child relative to the entire width.
I have an animation where a div slides out the view, however when the animation is completed, the div just returns to its origin position in the view. How do I totally remove the div or hide it after the animation ends using just CSS?
Here is the markup:
<div class="container">
<div class="slide-box" id="slide-box""></div>
</div>
and the css:
.slide-box {
position: relative;
width: 100px;
height: 100px;
background-image: url(../pics/red.png);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
animation: slide 5s linear 1;
}
#keyframes slide {
0% {
left: 0;
}
20% {
left: 20%;
}
40% {
left: 40%;
}
60% {
left: 60%;
}
80% {
left: 80%;
}
100% {
left: 100%;
overflow: hidden;
visibility: hidden;
}
}
I don't want it to fade out over the duration of the animation, i just want it to disappear once it hits 100% in the keyframe. Thanks ahead of time!
Use the animation-fill-mode option. Set it to forwards and the animation ends at it's final state and stay like that.
Altered based upon comments Set opacity fade to just last 1% of animation... simplified keyframes. Added a jquery option to literally remove the div from the DOM. CSS alone won't alter the markup, where jQuery will.
Although you can't animate the display property. If you want the div totally gone, after the opacity fades to zero, you can then add the display property to remove the div. If you don't wait for opacity to end, the div will just vanish without any transition.
/*
This jquery is added to really remove
the div. But it'll essentially be
VISUALLY gone at the end of the
animation. You can not use, or
delete the jquery, and you really
won't see any difference unless
you inspect the DOM after the animation.
This function is bound to animation
and will fire when animation ends.
No need to "guess" at timeout settings.
This REMOVES the div opposed to merely
setting it's style to display: none;
*/
$('.slide-box').bind('animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd', function(e) { $(this).remove(); });
.slide-box {
display: block;
position: relative;
left: 0%;
opacity: 1;
width: 100px;
height: 100px;
background: #a00;
animation: slide 1s 1 linear forwards;
/*
animation-name: slide;
animation-duration: 1s;
animation-iteration-count: 1;
animation-timing-function: linear;
animation-fill-mode: forwards;
*/
}
#keyframes slide {
0% {
left: 0%;
opacity: 1;
}
99% {
left: 99%;
opacity: 1;
}
100% {
left: 100%;
opacity: 0;
display: none;
}
}
#-webkit-keyframes slide {
0% {
left: 0%;
opacity: 1;
}
99% {
left: 99%;
opacity: 1;
}
100% {
left: 100%;
opacity: 0;
display: none;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="slide-box" id="slide-box"></div>
</div>
animation: slide 5s linear forwards;
at 100%
opacity: 0;
display: none;
Try this.
Working fiddle: https://jsfiddle.net/jbtfdjyy/1/
UPDATE: JS mani
var slideBox = document.getElementById('slide-box');
setTimeout(function(){
slideBox.style.display = 'none';
}, 5000);
Try this. https://jsfiddle.net/jbtfdjyy/2/
Add something at 99% or so to your keyframes, and set opacity to 1 in that. If you have opacity: 1 at the start, then it will stay that way until 99%. Only at 100% will it change.
It's not technically fired at 100%. If you want that, I'd recommend using some JavaScript here, but this will at least give the illusion you want.
#keyframes slide {
0% {
left: 0;
}
20% {
left: 20%;
}
40% {
left: 40%;
}
60% {
left: 60%;
}
80% {
left: 80%;
}
99% {
opacity: 1;
}
100% {
left: 100%;
overflow: hidden;
opacity: 0;
display: none;
visibility: hidden;
}
}
UPDATE:
As per your request, here is a JavaScript version. Keep in mind, there are endless ways to accomplish such a task. I am using vanilla JS (no jQuery, etc.), and using ES6 syntax.
What we do here is set a timeout, and at the end of that timeout I broadcast an event animation_end. That event listener will handle the end of the animation (in this case, it adds a class which will handle the fading out). This is much more granular than you need it to be, you could simply do the adding of the class within the setTimeout, but I think it is slightly better this way as you can abstract you can do other things with events such as animation start, etc.
Here is the fiddle: https://jsfiddle.net/vmyzyd6p/
HTML:
<div class="container">
<div class="slide-box" id="slide-box""></div>
</div>
CSS:
.slide-box {
position: relative;
width: 100px;
height: 100px;
background-color: blue;
animation: slide 3s linear 1;
-webkit-transition: opacity 2s ease-in-out;
-moz-transition: opacity 2s ease-in-out;
transition: opacity 2s ease-in-out;
}
.animationEnd {
opacity: 0;
}
#keyframes slide {
0% {
left: 0;
}
20% {
left: 20%;
}
40% {
left: 40%;
}
60% {
left: 60%;
}
80% {
left: 80%;
}
100% {
left: 100%;
}
}
JavaScript:
// Create a function that handles the `animation_end` event
const animationEnd = () => {
// Grab the slidebox element
let slideBox = document.getElementById('slide-box');
// Get the class of the slidebox element
let slideClass = slideBox.getAttribute('class');
// Add the animation end class appended to the previous class
slideBox.setAttribute('class', slideClass + ' animationEnd');
};
// Create the animation end event
let animationEndEvent = new Event('animation_end');
// Cross browser implementation of adding the event listener
if (document.addEventListener) {
document.addEventListener('animation_end', animationEnd, false);
} else {
document.attachEvent('animation_end', animationEnd);
}
// Set the timeout with the same duration as the animation.
setTimeout(() => {
// Broadcast the animation end event
document.dispatchEvent(animationEndEvent);
}, 3000);
I am currently having a problem with CSS animations. A random background is called from an array, shows up and changes and so on. I applied two animation for the image caption id, a slide in and a delayed slide out. The slide in and out runs well for the first time, but when the second background shows up, the caption just appears to the screen without any animation.
This is my test page and below is my code.
HTML code:
<script type="text/javascript">
function loadRandomImage(imgs) {
var index = Math.floor(Math.random() * imgs.length);
console.log("loadRandomImages(): index = "+ index);
$.backstretch(imgs[index].url, {duration: 30000, fade: 1200});
$("#caption").html(imgs[index].caption);
}
var images = new Array(); //array of imgs objects
images[0] = {url: "https://s-media-cache-ak0.pinimg.com/736x/a5/47/45/a5474577f4a4ae93c85db719d0cbafd4.jpg", caption: "Caption0"};
images[1] = {url: "https://s-media-cache-ak0.pinimg.com/736x/e6/41/74/e64174e355f78a0f07e951bcec62ca96.jpg", caption: "Caption1"};
images[2] = {url: "https://media.giphy.com/media/3o7abHrsGbV10rCeze/giphy.gif", caption:"Caption2"};
images[3] = {url: "https://media.giphy.com/media/Bbt5FxRiArl3a/giphy.gif", caption:"Caption3"};
// Preload
setTimeout(loadRandomImage, 1000, images);
// Change images every 3 seconds
setInterval(loadRandomImage, 30000, images);
</script>
<div id="pattern"></div>
<div id="pattern2"></div>
<div id="caption"></div>
CSS code:
#caption {
position: relative;
font: 1.5em Trebuchet, sans-serif;
text-align: center;
margin-left: 75%;
z-index: 56;
color: #ffffff;
background: rgba(0, 0, 0, 0.7);
padding: 8px;
animation: slidein 3s, slideout 3s 27s;
}
#caption:empty
{
display: none;
}
#keyframes slidein {
0% {
margin-left: 100%;
width:100%;
visibility:hidden;
opacity: 0;
}
100% {
margin-left: 75%;
width:100%;
opacity: 1;
visibility:visible;
}
}
#keyframes slideout {
0% {
margin-left: 75%;
width:100%;
opacity: 1;
visibility:visible;
}
100% {
margin-left: 100%;
width:100%;
opacity:0;
visibility:hidden;
}
}
CSS animations have iteration count (animation-iteration-count) as only 1 when no value is given for that property. Here since you've not specified any value, the animation executes only once (that is on page load). There is no pure CSS way to re-trigger an animation once it has completed its cycle. It has to be removed from the element and then re-attached for it to start all over again.
So, for your case here is what you have to do - (a) Set the animations on #caption using JS on page load as it makes it easier to remove and re-add them (b) Upon completion of the slideout animation, remove both the animations from the element (that is, set animation-name: none) and also set html of #caption to none because :empty selector would only then hide it. (c) As soon as the next image is set on the element (using loadRandomImage function), set the animations back on the element. This would re-trigger the animation and so during each image switch, the caption would slide-in and out.
Note: I've changed some parts in the HTML and JS that are not relevant to this answer (like removing the two div and replacing them with 1, avoiding the $.backstretch and loading image using css() etc. But these are only auxiliary items and will not affect the crux of this answer (which is, to remove and add the animations).
function loadRandomImage(imgs) {
var index = Math.floor(Math.random() * imgs.length);
$('#img').css('background-image', 'url(' + images[index].url + ')');
$('#caption').css({
'animation-name': 'slidein, slideout',
'animation-duration': '3s, 3s',
'animation-delay': '0s, 7s'
});
$("#caption").html(imgs[index].caption);
}
var images = new Array(); //array of imgs objects
images[0] = {
url: "http://lorempixel.com/100/100/nature/1",
caption: "Caption0"
};
images[1] = {
url: "http://lorempixel.com/100/100/nature/2",
caption: "Caption1"
};
images[2] = {
url: "http://lorempixel.com/100/100/nature/3",
caption: "Caption2"
};
images[3] = {
url: "http://lorempixel.com/100/100/nature/4",
caption: "Caption3"
};
// Preload
setTimeout(loadRandomImage, 1000, images);
$('#caption').on('animationend', function(e) {
if (e.originalEvent.animationName == 'slideout') {
$('#caption').css('animation-name', 'none');
$('#caption').html('');
setTimeout(function() { /* dummy timeout to make sure browser sees animation as none before adding it again */
loadRandomImage(images);
}, 0);
}
});
#caption {
position: relative;
font: 1.5em Trebuchet, sans-serif;
text-align: center;
margin-left: 75%;
z-index: 56;
color: #ffffff;
background: rgba(0, 0, 0, 0.7);
padding: 8px;
}
#caption:empty {
display: none;
}
#keyframes slidein {
0% {
margin-left: 100%;
width: 100%;
visibility: hidden;
opacity: 0;
}
100% {
margin-left: 75%;
width: 100%;
opacity: 1;
visibility: visible;
}
}
#keyframes slideout {
0% {
margin-left: 75%;
width: 100%;
opacity: 1;
visibility: visible;
}
100% {
margin-left: 100%;
width: 100%;
opacity: 0;
visibility: hidden;
}
}
/* Just for demo */
#img {
height: 100px;
width: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="img"></div>
<div id="caption"></div>
The animationend event still requires vendor prefixes in some browsers.
You need to use a callback, which is explained here:
How do create perpetual animation without freezing?
I think the animation direction needs to be altered.
These are the possibilities:
animation-direction: normal|reverse|alternate|alternate-reverse|initial|inherit;
I think you need to do one of these:
alternate
The animation will be played as normal every odd time (1,3,5,etc..) and in reverse direction every even time (2,4,6,etc...)
alternate-reverse
The animation will be played in reverse direction every odd time (1,3,5,etc..) and in a normal direction every even time (2,4,6,etc...)
At the moment it is set as
animation-direction: initial, initial;
Seen here: http://www.w3schools.com/cssref/css3_pr_animation-direction.asp
Rather than the Javascript suggestions already provided, you could do a straight CSS solution.
Just set animation-iteration-count to "infinite" (to continuously alternate the 2 elements, or an integer for a set number of repeats)
If you want staggered / alternating animations:
Use an animation-delay (matching the animation-duration) on the second element so it doesn't appear until the first element animation has completed
Build a delay onto the end of your animation (revert to original state # 50%) so that the first element stays hidden while the second animates.