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>

How do I animate React component upon entering the dom?

I have code something like this in react
{this.state.popoverOpen && <Popover/>}
it's easy, but when the component actually appears I want it to come in with opacity changing and animating...
I've been working with react for some time but these cases always leave room for confusion for me...
So whats the best and easy solution? no applying classes work obviously at this point...

You can use CSS transitions. Try adding the fade-in to the className of Popover's outermost HTML element after adding the code below to the relevant CSS file.
.fade-in {
-webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 2s; /* Firefox < 16 */
-ms-animation: fadein 2s; /* Internet Explorer */
-o-animation: fadein 2s; /* Opera < 12.1 */
animation: fadein 2s;
}
#keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Firefox < 16 */
#-moz-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Safari, Chrome and Opera > 12.1 */
#-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Internet Explorer */
#-ms-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Opera < 12.1 */
#-o-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
Codepen example: https://codepen.io/rodenmonte/pen/LYpOVpb
Here's a StackOverflow answer showing another (better IMO) way to do this ReactJS: Fade in div and fade out div based on state

CSS Transition and animation disappear after the starting animation finished

Hi,
I have a problem on CSS animation and transition.
$(document).ready(function(){
$(".d1").click(function(e){
$(".d2").css("animation-direction", "reverse");
$(".d3").css("animation-direction", "reverse");
});
$(".d2").click(function(e){
$(".d1").css("animation-name", "none").css("opacity", 0);
$(".d3").css("animation-name", "none").css("opacity", 0);
});
$(".d3").click(function(e){
$(".d1").css("animation-name", "none").fadeOut("slow");
$(".d2").css("animation-name", "none").fadeOut("slow");
});
});
#keyframes inseq {
100% { opacity: 1; }
}
.d1, .d2, .d3 {
opacity: 0;
transition: all 2s;
animation: inseq 3s ease 1s forwards;
}
.d2 {
animation-delay: 1.3s
}
.d3 {
animation-delay: 1.6s
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="d1">1</div>
<div class="d2">2</div>
<div class="d3">3</div>
https://jsfiddle.net/v7mepwmg/2/
I have a starting-fade-in animation on a series of elements, and then using jquery click event to trigger fadeout; I have tried 3 methods (in example they are .d1 .d2 and .d3 click event) to achieve so, but none of them can do so while the animation finished.....
P.S. If the animation has not finished yet, they work well...
Do I miss anything ?? Thanks!

Updated this a little.
It has something to do with the opacity=0 set on the div elements and the use of animation-direction:reverse. Tough to explain. Basically it jumps to the initial key-frame without any animation. So I've created another set of keyframes for out animation instead of using animation-direction:reverse.
#keyframes in {
from {opacity: 0;}
to {opacity: 1;}
}
#keyframes out {
from {opacity: 1;}
to {opacity: 0;}
}
.d1,.d2,.d3 {
opacity: 0;
animation: in 3s ease 1s forwards 1;
}
.d2 {animation-delay: 1.3s}
.d3 {animation-delay: 1.6s}
And then used this to add the second animation and change the initial opacity.
$(document).ready(function() {
$('div').click(function(e) {
var selected = $(this).attr('class');
$('div').not("." + selected).css({
'opacity': '1',
'animation' : 'out 3s ease forwards 1'
}).delay('3000').fadeOut('0');
});
});
Here's the updated Fiddle.
https://jsfiddle.net/thelessergeek/0pwan8qm/

How to re-blink a div using css? [duplicate]

This question already has answers here:
How do I re-trigger a WebKit CSS animation via JavaScript?
(9 answers)
Closed 7 years ago.
I know that we can use the below css to blink a div for the number of times specified:
html:
<div class="blink">blinking text</div>
css:
#-webkit-keyframes blinker {
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
#-moz-keyframes blinker {
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
.blink {
-webkit-animation: blinker 1s 5;
-moz-animation: blinker 1s 5;
animation: blinker 1s 5;
}
By using the css way, the div will blink after the page loaded without us calling any js function.
But then what if i want to re-blink the div after the user press a button? There's no function to call on "onclick".
<button onclick="">BLINK AGAIN!</button>
Any idea how to do it?
JSFIDDLE

You need to remove the class 'blink' then add it back again, in order to restart the CSS animation
You'll need to use a setTimeout so that it doesn't have the class added to it before it has has the class taken away from it
$("#blinkagain").click(function() {
var $el = $(".blink");
$el.removeClass("blink");
setTimeout(function() {$el.addClass("blink");}, 500);
});
#-webkit-keyframes blinker {
0% {
opacity: 1.0;
}
50% {
opacity: 0.0;
}
100% {
opacity: 1.0;
}
}
#-moz-keyframes blinker {
0% {
opacity: 1.0;
}
50% {
opacity: 0.0;
}
100% {
opacity: 1.0;
}
}
.blink {
-webkit-animation: blinker 1s 5;
-moz-animation: blinker 1s 5;
animation: blinker 1s 5;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="blink">blinking text</div>
<button id="blinkagain">BLINK AGAIN!</button>

Hide a div following css animation on button click

As the current time, I have CSS3 Animations being triggered on button click, and all works well. Its an animation to represent the plant life cycle, working in 5 stages, each stage shows an image and corresponding text.
However, if i click stage 1, then stage 2, and want to click stage 1 again to view the supporting text again, whilst hiding the image from stage two, I cannot seem to be able to do it.
JSFiddle for your convinience:
http://jsfiddle.net/YUC3d/
Live View of current stage:
http://www.mattmeadows.info/MFTW2/howplantsgrow.html
Javascript:
$(function() {
$("#stage1").click(function() {
$("#Seed1,#infoBox1").toggleClass("animate")
});
$("#stage2").click(function() {
$("#Seed2,#infoBox2").toggleClass("animate")
});
$("#stage3").click(function() {
$("#Seed3,#infoBox3").toggleClass("animate")
});
$("#stage4").click(function() {
$("#Seed4,#infoBox4").toggleClass("animate")
});
$("#stage5").click(function() {
$("#Seed5,#infoBox5").toggleClass("animate")
});
});
HTML Segment being animated:
<div id="Seed1" class="target">
</div> <!-- end of Seed1 -->
<div id="infoBox1">
Text for stage 1 Text for stage 1 Text for stage 1 Text for stage 1 Text for stage 1
</div>
(There are 5 of these div combinations in total
CSS:
#-webkit-keyframes show
{
0% { opacity: 0; }
100% { opacity: 1; }
}
#Seed1
{
opacity:0;
}
#Seed1.animate
{
-webkit-animation-name: show;
-webkit-animation-duration: 2s;
-webkit-animation-timing-function: ease;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: normal;
-webkit-animation-delay: 0;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;
}
#infoBox1
{
width: 400px;
height: 100px;
background:white;
position: absolute;
bottom: 425px;
margin-left: 25px;
border-radius: 10px;
opacity:0;
}
#infoBox1.animate
{
-webkit-animation-name: show;
-webkit-animation-duration: 2s;
-webkit-animation-timing-function: ease;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: normal;
-webkit-animation-delay: 0;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;
}

Presuming that 'animate' is the 'on' class (it seems to be), try making a method that resets everything then animate the specific element:
function setStage(stage) {
var numberOfStages = 5;
for (i=1; i <= numberOfStages; i++) {
if (i == stage) {
$("#infoBox" + i).addClass("animate");
$("#Seed" + i).addClass("animate");
} else if (i < stage) {
$("#infoBox" + i).removeClass("animate");
$("#Seed" + i).addClass("animate");
} else {
$("#infoBox" + i).removeClass("animate");
$("#Seed" + i).removeClass("animate");
}
}
}
Example use:
$(document).ready(function() {
$("#stage1").click(function() {
setStage(1);
});
//stage 2,3,5 etc...
$("#stage4").click(function() {
setStage(4);
});
});

Presuming that 'animate' is the 'on' class (it seems to be), try making a method that resets everything then animate the specific element:
function resetState() {
//you can use classes here to make it neater
$("#Seed1,#infoBox1,#Seed2,#infoBox2,#Seed3,#infoBox3,#Seed4,#infoBox4,#Seed5,#infoBox5").removeClass("animate");
}
Example use:
$("#stage1").click(function() {
resetState();
$("#Seed1,#infoBox1").toggleClass("animate");
});