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/
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 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);
}
I'm trying to coding this text animation effect (please see video) but i'm quite far from solution!!
Can you please help me? maybe is better using js?
h1.fadeinone { animation: fadeinone 10s;}
h1.fadeintwo { animation: fadeintwo 10s;}
h1.fadeinthree { animation: fadeinthree 10s;}
#keyframes fadeinone {
0% {
opacity: 0;
}
33% { /* 3s for fade in */
opacity: 1;
}
}
#keyframes fadeintwo {
0% {
opacity: 0;
}
66% { /* 3s for fade in */
opacity: 1;
}
}
#keyframes fadeinthree{
0% {
opacity: 0;
}
100% { /* 3s for fade in */
opacity: 1;
}
}
#claim h1 {
font-size: 40px;
line-height:40px;
margin:0px;
padding:0px;
color:#FFF;
}
#claim {background-color:red;}
<div id="claim">
<h1 class="fadeinone">DESIGN</h1>
<h1 class="fadeintwo">loren ipsum</h1>
<h1 class="fadeinthree">DOLOR SIT</h1>
</div>
I think you are looking for the animation-delay property. It's a bit tedious, because you'll have to separate out each letter of each line into its own element (I used span in this case), and then you'll have to manually assign each span its own delay, but the effect matches what you provided.
Also, by using this method, you only need one set of keyframes, because you'll be using the delay to determine when the animation starts, rather than using a percentage over multiple animations.
div span
{
opacity: 0;
animation-name: fadein;
animation-duration: 3s;
animation-fill-mode:forwards;
}
div span:nth-child(1){animation-delay:0s}
div span:nth-child(2){animation-delay:0.2s}
div span:nth-child(3){animation-delay:0.4s}
div span:nth-child(4){animation-delay:0.6s}
div span:nth-child(5){animation-delay:0.8s}
div span:nth-child(6){animation-delay:1s}
#keyframes fadein
{
0%{opacity: 0}
100%{opacity:1}
}
<div>
<span>D</span><span>E</span><span>S</span><span>I</span><span>G</span><span>N</span>
</div>
Of course, you could do this with Javascript and the solution would likely be more elegant and easier to modify; however, then you have to deal with compatibility issues. You're going to be better off just sticking with strict CSS whenever possible.
is it possible to detect where a user scrolls on a page to trigger a keyframe using pure javascript ?
.animations {
opacity: 0;
animation: animations-keyframes 2s ease forwards;
-webkit-animation: animations-keyframes 2s ease forwards;
animation-delay: 0.5s;
-webkit-animation-delay: 0.5s;
}
#keyframes animations-keyframes {
to {
opacity: 1;
}
}
#-webkit-keyframes animations-keyframes {
to {
opacity: 1;
}
}
I want javascript to trigger this event when the user gets to a certain part of a page for example a content section. I don't know where to start
Using javascript, you could add the class animations to an element on mouseenter event and remove the class on mouseleave. Since you didn't mention jQuery, I will use simple JS, but I recommend using jQuery if you plan on doing a bunch of DOM manipulation since it is easier to maintain.
EXAMPLE:
http://jsfiddle.net/dirtyd77/z6xmuwse/2/
JAVASCRIPT:
var el = document.getElementById("animation");
el.onmouseenter = function (){
this.classList.add("animations");
};
el.onmouseleave = function (){
this.classList.remove("animations");
};
However, you can also accomplish this using just CSS and the pseudo :hover.
EXAMPLE:
http://jsfiddle.net/dirtyd77/z6xmuwse/3/
CSS:
.animations:hover {
opacity: 0;
animation: animations-keyframes 2s ease forwards;
-webkit-animation: animations-keyframes 2s ease forwards;
animation-delay: 0.5s;
-webkit-animation-delay: 0.5s;
}
#keyframes animations-keyframes {
to {
opacity: 1;
}
}
#-webkit-keyframes animations-keyframes {
to {
opacity: 1;
}
}
Hope this helps and let me know if you have any questions!
Waypoints can be used to trigger events when scrolling to certain parts of a page.
http://imakewebthings.com/waypoints/
In simple terms, event listeners are created for scroll events - The distance scrolled down the page and distance of the element from the top of the page are compared. Events are triggered if the user has scrolled beyond the element ( distance scrolled > distance of element from top of page )
I am trying to animate a text opacity with jQuery animate. I've noticed that when opacity value is set to 1, a bad anti-aliasing effect appears after animation in Chrome (version 35.0.1916.153): see image below.
$('#good').animate({
opacity:'0.99'
}, 2000);
$('#bad').animate({
opacity:'1'
}, 2000);
jsFiddle
I've tested it in Safari (version 5.1.7), Firefox (version 18.0.1) and it works well. I've tried to add the font smoothing filter suggested here but it doesn't seem to work. Is it a known issue?
JSFIDDLE with div
$( document ).ready(function() {
$('#good').animate({opacity: 0.4}, 2000, false, null);
$('#bad').animate({opacity: 1}, 2000, false, null);
});
JSFIDDLE with <p>
Your mistake is you dont use ready event
I recomended use css animation without JS
CSS ANIMATION JSFIDDLE
.pick-opacity_1 {
-webkit-animation: opacity_1 2s;
-webkit-animation-direction: alternate;
-webkit-animation-iteration-count: 1;
}
#-webkit-keyframes opacity_1 {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.pick-opacity_2 {
-webkit-animation: opacity_2 5s;
-webkit-animation-direction: alternate;
-webkit-animation-iteration-count: 1;
}
#-webkit-keyframes opacity_2 {
0% {
opacity: 1;
}
25% {
opacity: 0.1;
}
50% {
opacity: 0.3;
}
75% {
opacity: 0.6;
}
100% {
opacity: 1;
}
}
UPDATED:
TEST 0.99 JSFIDDLE ANIMATION OPACITY