We Keep Coding

How to fade in and fade out text in loop

I want the text to fade in and fade out in the loop never stop it. like, come fade in then out again and again with HTML CSS. I'm going to share with you my code which just does fade in not do fade out and loop also not so anybody sees my code and told me how I can do that with HTML OR CSS because I want to use this animated type text on WordPress website with one build on the Elementor page builder. so please help. Thank You
.fade-in {
animation: fadeIn ease 10s;
-webkit-animation: fadeIn ease 10s;
-moz-animation: fadeIn ease 10s;
-o-animation: fadeIn ease 10s;
-ms-animation: fadeIn ease 10s;
}
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-moz-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-o-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-ms-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
<h1 class="fade-in">Its just fade in not out i want fade in and out in loop never stop it.</h1>

Use animation-direction and animation-iteration properties.
Combined into a shorthand, you get a property like : animation: fadeIn infinite alternate ease 2s
Change duration as necessary
.fade-in {
animation: fadeIn infinite alternate ease 2s;
}
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<h1 class="fade-in">Its just fade in not out i want fade in and out in loop never stop it.</h1>

CSS Animation fadeOut / fadeIn for JS Popup

I want create an fadeIn and fadeOut effect for my JS popup window in css.
fadeIn works fine but not the fadeOut effect, i dont know how i must change my JS time, i have tried some things, but if i use both, fideIn and fadeOut in CSS, the Popup just flashing.
But i want an 5 seconds effect for both and with an delay of also 5 seconds to show the popup.
CSS fadeIn:
.fadeInclass {
animation: fadeIn ease 5s;
-webkit-animation: fadeIn ease 5s;
-moz-animation: fadeIn ease 5s;
-o-animation: fadeIn ease 5s;
-ms-animation: fadeIn ease 5s;
}
#keyframes fadeIn{
0% {
opacity:0;
}
100% {
opacity:1;
}
}
#-moz-keyframes fadeIn {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
#-webkit-keyframes fadeIn {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
#-o-keyframes fadeIn {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
#-ms-keyframes fadeIn {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
JS:
var div = document.getElementById("show-popup");
var showFlag = true;
var myIntv = setInterval(function() {
if(showFlag){
div.style.display = 'block';
showFlag = false;
}
else{
div.style.display = 'none';
showFlag = true;
}
}, 5 * 1000);
Whats the best way to add the fadeIn and fadeOut effect, with js or CSS animation?
5 seconds fadeIn effect, then stay for 5 seconds and again 5 seconds fadeOut.

You could use a single animation to achieve all of this.
The first 5 seconds fades in the control, it stays fully visible for 5 seconds, and then fades out for 5 seconds.
.fadeInclass {
animation: fadeIn ease 15s;
background-color: red;
height: 50px;
opacity: 0;
width: 50px;
}
#keyframes fadeIn{
0% {
opacity:0;
}
33% {
opacity:1;
}
66% {
opacity:1;
}
100% {
opacity:0;
}
}
<div class="fadeInclass"></div>

You could simply use CSS transition with opacity:
#popup{
opacity: 0;
transition: ease opacity 5s;
}
#popup.fadeInclass{
opacity: 1;
}
And then just add/remove the .fadeInClass to your element in JS to achieve the desired goal:
function showPopup(){
var div = document.getElementById("popup");
div.style.display = 'block';
div.classList.add("fadeInclass");
}
function hidePopup(){
var div = document.getElementById("popup");
div.classList.remove("fadeInclass");
setTimeout(function(){
div.style.display = 'none';
}, 5000);
}

How can I achieve this sequential fade-in effect?

I came across this page https://pepecph.com/ and thought the fade in effect of the pictures were really cool.
I tried to imitate that effect with styled-component to pass each picture's index as a way to separate them when they are all fading in.
-webkit-animation: ${props =>
`fadein ${props.index}s`}; /* Safari, Chrome and Opera > 12.1 */
#keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
Here is the demo: https://codesandbox.io/s/focused-clarke-eduf1
However it is not quite doing what that page seems to be doing, no matter how I adjust the time of fade-in. On the original page(https://pepecph.com/), every picture is showing up fast and delayed differently for some time. And I inspect the image element of the original page, it has this line of css
transition: top 70ms cubic-bezier(0.25,0.46,0.45,0.94),left 70ms cubic-bezier(0.25,0.46,0.45,0.94),transform 70ms cubic-bezier(0.25,0.46,0.45,0.94),height 150ms cubic-bezier(0.25,0.46,0.45,0.94) 70ms,-webkit-transform 70ms cubic-bezier(0.25,0.46,0.45,0.94)
I am not good at css so I don't know if this has something to do with that visual effect.

I edited your code a little bit, let me explain what I've done:
First we need to start with zero opacity images till those are loaded, we can also add a delay transition based on the index of the image.
<Image
pose={pose}
{...props}
style={{
opacity: this.state.opacity,
transition: "opacity 2s cubic-bezier(0.25,0.46,0.45,0.94)",
transitionDelay: `${props.index * 0.5}s`
}}
/>
We also need to add a setter function to change the opacity state via refs:
toggleOpacity = o => {
this.setState({ opacity: o });
};
The tricky part was to track the images refs, this is how it looks, we also removed all keyframes since those are no longer necessary:
const Gallery = () => {
const [isSelected, setIsSelected] = useState(null);
const refs = {};
let images = [];
for (let i = 0; i < 10; i++) {
refs[i] = useRef(null);
let height = Math.floor(Math.random() * 400 + 400);
let width = Math.floor(Math.random() * 400 + 400);
images.push(
<PicContainer index={i} key={i} selected={isSelected}>
<ZoomImg
src={`https://source.unsplash.com/random/${height}x${width}`}
onLoad={() => {
// Calling ref function
refs[i].current.toggleOpacity(1);
}}
// Setting ref
ref={refs[i]}
index={i}
setIsSelected={setIsSelected}
/>
</PicContainer>
);
}
return (
<Mansory gap={"15em"} minWidth={600}>
{images.map(image => image)}
</Mansory>
);
};
Here is the full example.

Here's an example. The HTML requires a div to be wrapped around the whole of the body content if you want it to fade in all at once. Look for this:
<div class="wrapper fade-in">
There's a lot of stuff you can do with CSS, I've been using it for years and I still learn something new every once in a while.
All the animation commands will appear in your CSS like so:
#keyframes fadeIn
to {
opacity: 1; }
Then your divs are going to have a class that calls the animation (#keyframes):
.fade-in {
animation: fadeIn 1.0s ease forwards;
[other div properties can be included here]
}
The HTML will look like this:
<div class="fade-in">
[content]
</div>
Finally, you'll need to make sure you include the vendor codes to make it compatible with all browsers [which adds a fair amount of code, which is why jQuery can be a better option for this stuff]:
#keyframes fadeIn{
0% {
opacity:0;
}
100% {
opacity:1;
}
}
#-moz-keyframes fadeIn {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
#-webkit-keyframes fadeIn {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
#-o-keyframes fadeIn {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
#-ms-keyframes fadeIn {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
The vendor codes will have to be duplicated again in your div class in the CSS:
.fade-in {
animation: fadeIn ease 5s;
-webkit-animation: fadeIn ease 5s;
-moz-animation: fadeIn ease 5s;
-o-animation: fadeIn ease 5s;
-ms-animation: fadeIn ease 5s;
}

Is there a better way to add/remove classes for menu with Javascript

This is what I have so far..
icons.addEventListener('click', (e)=>{
if(e.target.className==="skate"){
navigation.classList.remove('slideIn');
navigation.classList.add('slideOut');
skateboard.classList.add('skateOff');
x.classList.add('xslide');
}else{
navigation.classList.remove('slideOut');
navigation.classList.add('slideIn');
skateboard.classList.remove('skateOff');
x.classList.remove('xslide');
}
})
#keyframes skateOff{
0%{
transform:rotate(0);
}
50%{
transform:rotate(49deg);
}
100%{
transform: translateX(-300px);
}
}
.skateOff{
animation: skateOff ease-in 1s forwards;
}
.x{
visibility: hidden;
}
.xslide{
animation:slideOut .8s ease 2s forwards;
}
.menu{
visibility: hidden;
color:black;
width:10em;
background-color:white;
border-radius: 4px;
font-family: 'Raleway';
background: linear-gradient(to right,
rgba(249,107,142,1),
rgba(218,103,230,1),
rgba(130,125,253,1));
}
.slideOut{
animation: slideOut 1s forwards 1.2s;
}
#keyframes slideOut{
0%{
transform: translateX(-50%);
}
100%{
visibility: visible;
transform: translateX(0);
}
}
.slideIn{
animation: slideIn 2s ease forwards;
}
#keyframes slideIn{
0%{
visibility: visible;
transform: translateX(0);
}
100%{
transform: translateX(-150%);
}
}
The functionality of the JS is this,
when "skateboard" is clicked, it animates out, to the left and is no longer visible (the skateOff keyframes makes that happen, and i added a class that has that animation implemented also called ".skateOff")
(would it be better to not have a separate class and just add
skateboard.style.animation="animation: skateOff ease-in 1s forwards"?)
..anyway
then after "skateboard" animates out the "navigation"(which is a sidebar menu) adds the "slideOut" class which makes it slide out from the left, along with this the "X" to close the menu slide out, when that is clicked the "navigation"'s class of "slideOut" gets removed and the class of "slideIn" gets added.
This way of doing things seems inefficient, and like a lot of code, I was wondering if there's a simpler way of doing this? Toggling maybe? I've looked into toggling but i'm not sure it will work since the "navigation" element's initial state doesn't have the "slideIn" or "slideOut" class.
ANY tips will be greatly appreciated, thank you for reading and have a great day.

first of all, welcome on Stack Overflow :)
Your code may benefit from classList.toggle (https://developer.mozilla.org/pl/docs/Web/API/Element/classList).
You can have conditional statements there, meaning classList.toggle("string", boolean), like this:
icons.addEventListener('click', (e)=> {
const isSkate = e.target.className === "skate"; // this could also be altered using classList.contains()
navigation.classList.toggle('slideIn', !isSkate);
navigation.classList.toggle('slideOut', isSkate);
skateboard.classList.toggle('skateOff', isSkate);
x.classList.toggle('xslide', isSkate);
});
A little PoC can be found here: https://codepen.io/tomekbuszewski/pen/XyNzqG
If you need more help, please post your code to CodePen or JSFiddle, it would be easier to discuss then.

have jquery add(or trigger?) an animation

So I have a graph that is filled out through a nice animation. This happens because every bar in the graph has the css attribute
animation: slide-left 0.9s ease-in-out 1s both;
The animation looks like this:
#keyframes slide-left {
0% {
-webkit-transform: translateX(-200%);
}
70% {
-webkit-transform: translateX(2%);
}
100% {
-webkit-transform: translateX(0);
}
}
Now, I'm not very good at javascript but I'd like this to happen on the click of a button (and have the graph hidden until the button is clicked) instead of when the page loads.
Now I've removed the animation-attribute from the css-selector and added translateX(-200%);
Realized that if I add animation: slide-left 0.9s ease-in-out 1s both; through inspect element, exactly what I want happens.
So I found a "solution" that looks like this:
$("#button").on('click', show_function);
function show_function() {
$(".graph").fadeIn("slow");
$('<style>.bar-container>* { animation: slide-left 1s ease-in-out 1s both; }</style>').prependTo('body');
}
This feels "clunky" and it takes almost a second to load. So I was wondering what a better way to have a function trigger the animation in javascript/JQuery would be?

Your best answer is likely to be have the animation sequence in a class, and use jQuery to add the class. E.g.
CSS
#keyframes slide-left {
0% {
-webkit-transform: translateX(-200%);
}
70% {
-webkit-transform: translateX(2%);
}
100% {
-webkit-transform: translateX(0);
}
}
.slide-it {
animation: slide-left 0.9s ease-in-out 1s both;
}
And then JS
$("#button").on('click', show_function);
function show_function() {
$(".graph").fadeIn("slow");
$('.bar-container').addClass('slide-it');
}