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);
}
Related
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>
I am building a simple login/signup screen. I'm toggling the login/signup forms through a state variable. The toggle works fine, but everything happens in just one frame and I want to animate the height transition of the form container, as well as fade the forms in or out as they switch. I am struggling to understand/tame the transition property and so far I managed to transition the height, but it only works once, and of course, I haven't been able to animate the forms opacity. Can anyone help me figure out what I'm missing? code sandbox link: https://codesandbox.io/s/wizardly-flower-e42dj
Better you paste your code here, but anyways
you can use CSS keyframes for fade-in effect.
.fade-in {
animation: fadeIn ease 1s;
-webkit-animation: fadeIn ease 1s;
-moz-animation: fadeIn ease 1s;
-o-animation: fadeIn ease 1s;
-ms-animation: fadeIn ease 1s;
}
#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;
}
}
When you are adding class to show login form and signup form, add this "fade-in" class too. Similarly, you can write the same for fading out.
https://codesandbox.io/s/broken-wildflower-dwn0q?file=/src/App.js
Updated your code for your reference.
I wanted to have an image fade permanently until the user refreshes the page, and I was able to do so with animation-fill forwards. However, I would like this animation to initiate only when you hover over it.
I am able to make an image fade with hover independently, but it resets after the user moves their cursor from the element. In short, I am unable to make the transition and the hover effect work in conjunction.
Here is the HTML
<div class="hill">
<img id="hill" src="https://i.postimg.cc/rw48gd3R/hillary.png">
</div>
Here is the CSS
body {
height:1000px;
}
#hill {
position: relative;
height: 100vh;
top: 100vh;
}
#-webkit-keyframes fade {
0% { opacity: 1; }
100% { opacity: 0; }
}
#-moz-keyframes fade {
0% { opacity: 1; }
100% { opacity: 0; }
}
#-o-keyframes fade {
0% { opacity: 1; }
100% { opacity: 0; }
}
#keyframes fade {
0% { opacity: 1; }
100% { opacity: 0; }
}
#hill {
-webkit-animation: fade 5s;
-moz-animation: fade 5s;
-o-animation: fade 5s;
animation: fade 5s;
animation-fill-mode: forwards;
}
This is the codepen to my project: https://codepen.io/narutofan389/collab/LYpxqmY
Much obliged for your help.
:hover state only applies when it is hovered, so it will not persist. I would recommend toggling a class on mouseenter via javascript. I've attached a fiddle to accomplish what you're intending. Let me know if you need any clarity. :)
document.addEventListener("DOMContentLoaded", function() {
var img = document.getElementById("hill");
img.addEventListener("mouseenter", function() { img.classList.add("hide")});
});
body {
height:1000px;
}
#hill {
position: relative;
height: 100vh;
}
#-webkit-keyframes fade {
0% { opacity: 1; }
100% { opacity: 0; }
}
#-moz-keyframes fade {
0% { opacity: 1; }
100% { opacity: 0; }
}
#-o-keyframes fade {
0% { opacity: 1; }
100% { opacity: 0; }
}
#keyframes fade {
0% { opacity: 1; }
100% { opacity: 0; }
}
#hill.hide {
-webkit-animation: fade 5s;
-moz-animation: fade 5s;
-o-animation: fade 5s;
animation: fade 5s;
animation-fill-mode: forwards;
}
<div class="hill">
<img id="hill" src="https://i.postimg.cc/rw48gd3R/hillary.png">
</div>
You can consider animation-play-state and have the animation defined on the element initially but the duration need to be short because it won't work if the user rapidly move the mouse
#hill {
position: relative;
height: 100vh;
animation: fade 0.5s paused forwards;
}
#hill:hover {
animation-play-state:running;
}
#keyframes fade {
0% { opacity: 1; }
100% { opacity: 0; }
}
<img id="hill" src="https://i.postimg.cc/rw48gd3R/hillary.png">
When i click on the toggle button and it hides the div, it closes abruptly without the fading animation. What am I going wrong?
I would like to hide the div with a fading effect too. What is being missed?
CSS:
#-webkit-keyframes fadeIn { from { opacity:0; opacity: 1\9; /* IE9 only */ } to { opacity:1; } }
#-moz-keyframes fadeIn { from { opacity:0; opacity: 1\9; /* IE9 only */ } to { opacity:1; } }
#keyframes fadeIn { from { opacity:0; opacity: 1\9; /* IE9 only */ } to { opacity:1; } }
.fade-in {
opacity:0; /* make things invisible upon start */
-webkit-animation:fadeIn ease-in 1; /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
-moz-animation:fadeIn ease-in 1;
animation:fadeIn ease-in 1;
-webkit-animation-fill-mode:forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;
-webkit-animation-duration:1s;
-moz-animation-duration:1s;
animation-duration:1s;
}
.fade-in.one {
-webkit-animation-delay: 0.2s;
-moz-animation-delay: 0.2s;
animation-delay: 0.2s;
}
The HTML:
<a onclick="toggle_visibility('foo');">Toggle Foo</a>
<div id="foo" style="display:none;" class="fade-in one">
Here I am toggling the display text
</div>
Javascript:
<script type="text/javascript">
<!--
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'none')
e.style.display = 'block';
else
e.style.display = 'none';
}
//-->
</script>
If you want to have additional adjustments, let me know.
function toggle(id) {
var e = document.getElementById(id);
e.style.display = "block";
setTimeout(function(){ e.classList.toggle('visible') }, 1);
}
function transition(id){
var el = document.createElement("temp");
var transitions = {
'transition':'transitionend'
}
for(t in transitions){
if( el.style[t] !== undefined ){
return transitions[t];
}
}
}
document.getElementById("foo").addEventListener(transition("foo"), function() {
if(!this.classList.contains("visible")) {
this.style.display='none';
}
});
#foo.visible {
opacity: 1;
}
#foo {
opacity: 0;
-webkit-transition: opacity 2s;
transition: opacity 2s;
}
<a onclick="toggle('foo')" class="toggle">Toggle Foo</a>
<div id="foo">
Here I am toggling the display text
</div>
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>