CSS3 Keyframe Animation issue with "timelines" - javascript
In the following example I have 3 divs they need to be animated using CSS3 Keyframe Animation with the following rules (when I mention hidden/show in the text below actually use opacity 0.1/1 in the CSS):
A) When the page load
ladyDefault is shown
ladyCorrect is hidden
ladyWrong is hidden
B) When User click btnCorrect
ladyDefault is hidden
ladyCorrect is shown
ladyWrong is hidden
C) When User click btnWrong
ladyDefault is hidden
ladyCorrect is hidden
ladyWrong is shown
Currently:
Sequence case A) and B) work fine.
Sequence case A) and C) work fine.
But I am not able to fix the following cases:
Sequence case A) and B) and C) does not work(ladyWrong is not shown).
Sequence case A) and C) and B) does not work (ladyCorrect is not shown).
I would like to know how to fix it possibly using only CSS 3.
Test the following example using only Google Chrome.
var btnCorrect = document.getElementById('btnCorrect');
var btnWrong = document.getElementById('btnWrong');
var ladyDefault = document.getElementById('ladyDefault');
var ladyCorrect = document.getElementById('ladyCorrect');
var ladyWrong = document.getElementById('ladyWrong');
btnCorrect.addEventListener('click', function(event) {
ladyDefault.classList.add('hideLadyDefault');
ladyWrong.classList.add('hideLadyWrong');
ladyCorrect.classList.add('showLadyCorrect');
});
btnWrong.addEventListener('click', function(event) {
ladyDefault.classList.add('hideLadyDefault');
ladyCorrect.classList.add('hideLadyCorrect');
ladyWrong.classList.add('showLadyWrong');
});
#ladyDefault,
#ladyCorrect,
#ladyWrong {
width: 100px;
height: 150px;
display: inline-block;
margin: 5px;
}
#ladyDefault {
background-color: blue;
}
#ladyCorrect {
background-color: green;
opacity: 0.1;
}
#ladyWrong {
background-color: red;
opacity: 0.1;
}
#btnCorrect,
#btnWrong {
height: 50px;
width: 100px;
display: inline-block;
margin: 5px;
}
#btnCorrect {
background-color: lime;
}
#btnWrong {
background-color: darkred;
}
/*
--------------------------- lady default
*/
#keyframes hideLadyDefault {
0% {
opacity: 1;
}
100% {
opacity: 0.1;
}
}
.hideLadyDefault {
animation-name: hideLadyDefault;
animation-duration: 0;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: forwards;
animation-delay: 0;
}
/*
--------------------------- lady correct
*/
#keyframes showLadyCorrect {
0% {
opacity: 0.1;
}
100% {
opacity: 1;
}
}
.showLadyCorrect {
animation-name: showLadyCorrect;
animation-duration: 1s;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: forwards;
animation-delay: 0;
}
#keyframes hideLadyCorrect {
0% {
opacity: 1;
}
100% {
opacity: 0.1;
}
}
.hideLadyCorrect {
animation-name: hideLadyCorrect;
animation-duration: 0;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: both
animation-delay: 0;
}
/*
--------------------------- lady wrong
*/
#keyframes showLadyWrong {
0% {
opacity: 0.1;
}
100% {
opacity: 1;
}
}
.showLadyWrong {
animation-name: showLadyWrong;
animation-duration: 1s;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: forwards;
animation-delay: 0;
}
#keyframes hideLadyWrong {
0% {
opacity: 1;
}
100% {
opacity: 0.1;
}
}
.hideLadyWrong {
animation-name: hideLadyWrong;
animation-duration: 0;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: both;
animation-delay: 0;
}
<div id="ladyDefault">ladyDefault</div>
<div id="ladyCorrect">ladyCorrect</div>
<div id="ladyWrong">ladyWrong</div>
<div id="btnCorrect">btnCorrect</div>
<div id="btnWrong">btnWrong</div>
Original Answer:
You need to remove the previous classes also before adding the new ones. When you don't remove the other class before adding a new one, each of them try to set an animation on the same element and as is always the case with CSS, the selector (class) which is defined later in the CSS wins.
var btnCorrect = document.getElementById('btnCorrect');
var btnWrong = document.getElementById('btnWrong');
var ladyDefault = document.getElementById('ladyDefault');
var ladyCorrect = document.getElementById('ladyCorrect');
var ladyWrong = document.getElementById('ladyWrong');
btnCorrect.addEventListener('click', function(event) {
ladyDefault.classList.add('hideLadyDefault');
ladyWrong.classList.remove('showLadyWrong');
ladyWrong.classList.add('hideLadyWrong');
ladyCorrect.classList.remove('hideLadyCorrect');
ladyCorrect.classList.add('showLadyCorrect');
});
btnWrong.addEventListener('click', function(event) {
ladyDefault.classList.add('hideLadyDefault');
ladyCorrect.classList.remove('showLadyCorrect');
ladyCorrect.classList.add('hideLadyCorrect');
ladyWrong.classList.remove('hideLadyWrong');
ladyWrong.classList.add('showLadyWrong');
});
#ladyDefault,
#ladyCorrect,
#ladyWrong {
width: 100px;
height: 150px;
display: inline-block;
margin: 5px;
}
#ladyDefault {
background-color: blue;
}
#ladyCorrect {
background-color: green;
opacity: 0.1;
}
#ladyWrong {
background-color: red;
opacity: 0.1;
}
#btnCorrect,
#btnWrong {
height: 50px;
width: 100px;
display: inline-block;
margin: 5px;
}
#btnCorrect {
background-color: lime;
}
#btnWrong {
background-color: darkred;
}
/*
--------------------------- lady default
*/
#keyframes hideLadyDefault {
0% {
opacity: 1;
}
100% {
opacity: 0.1;
}
}
.hideLadyDefault {
animation-name: hideLadyDefault;
animation-duration: 0;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: forwards;
animation-delay: 0;
}
/*
--------------------------- lady correct
*/
#keyframes showLadyCorrect {
0% {
opacity: 0.1;
}
100% {
opacity: 1;
}
}
.showLadyCorrect {
animation-name: showLadyCorrect;
animation-duration: 1s;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: forwards;
animation-delay: 0;
}
#keyframes hideLadyCorrect {
0% {
opacity: 1;
}
100% {
opacity: 0.1;
}
}
.hideLadyCorrect {
animation-name: hideLadyCorrect;
animation-duration: 0;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: both animation-delay: 0;
}
/*
--------------------------- lady wrong
*/
#keyframes showLadyWrong {
0% {
opacity: 0.1;
}
100% {
opacity: 1;
}
}
.showLadyWrong {
animation-name: showLadyWrong;
animation-duration: 1s;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: forwards;
animation-delay: 0;
}
#keyframes hideLadyWrong {
0% {
opacity: 1;
}
100% {
opacity: 0.1;
}
}
.hideLadyWrong {
animation-name: hideLadyWrong;
animation-duration: 0;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: both;
animation-delay: 0;
}
<div id="ladyDefault">ladyDefault</div>
<div id="ladyCorrect">ladyCorrect</div>
<div id="ladyWrong">ladyWrong</div>
<div id="btnCorrect">btnCorrect</div>
<div id="btnWrong">btnWrong</div>
Solution with only one keyframe rule:
You can also achieve the same effect with a single #keyframes rule instead of using multiple. All that would be needed is to set the animation-direction as reverse for the hide. But the old class must still be removed because once an animation is set on the element, the UA remembers its execution as mentioned in this answer of mine.
var btnCorrect = document.getElementById('btnCorrect');
var btnWrong = document.getElementById('btnWrong');
var ladyDefault = document.getElementById('ladyDefault');
var ladyCorrect = document.getElementById('ladyCorrect');
var ladyWrong = document.getElementById('ladyWrong');
btnCorrect.addEventListener('click', function(event) {
ladyDefault.classList.add('hideLadyDefault');
ladyWrong.classList.remove('showLadyWrong');
ladyWrong.classList.add('hideLadyWrong');
ladyCorrect.classList.remove('hideLadyCorrect');
ladyCorrect.classList.add('showLadyCorrect');
});
btnWrong.addEventListener('click', function(event) {
ladyDefault.classList.add('hideLadyDefault');
ladyCorrect.classList.remove('showLadyCorrect');
ladyCorrect.classList.add('hideLadyCorrect');
ladyWrong.classList.remove('hideLadyWrong');
ladyWrong.classList.add('showLadyWrong');
});
#ladyDefault,
#ladyCorrect,
#ladyWrong {
width: 100px;
height: 150px;
display: inline-block;
margin: 5px;
}
#ladyDefault {
background-color: blue;
}
#ladyCorrect {
background-color: green;
opacity: 0.1;
}
#ladyWrong {
background-color: red;
opacity: 0.1;
}
#btnCorrect,
#btnWrong {
height: 50px;
width: 100px;
display: inline-block;
margin: 5px;
}
#btnCorrect {
background-color: lime;
}
#btnWrong {
background-color: darkred;
}
/*
--------------------------- lady default
*/
.hideLadyDefault {
animation-name: show;
animation-duration: 0;
animation-iteration-count: 1;
animation-direction: reverse;
animation-fill-mode: forwards;
animation-delay: 0;
}
/*
--------------------------- lady correct
*/
#keyframes show {
0% {
opacity: 0.1;
}
100% {
opacity: 1;
}
}
.showLadyCorrect {
animation-name: show;
animation-duration: 1s;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: forwards;
animation-delay: 0;
}
.hideLadyCorrect {
animation-direction: reverse;
}
/*
--------------------------- lady wrong
*/
.showLadyWrong {
animation-name: show;
animation-duration: 1s;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: forwards;
animation-delay: 0;
}
.hideLadyWrong {
animation-direction: reverse;
}
<div id="ladyDefault">ladyDefault</div>
<div id="ladyCorrect">ladyCorrect</div>
<div id="ladyWrong">ladyWrong</div>
<div id="btnCorrect">btnCorrect</div>
<div id="btnWrong">btnWrong</div>
Solution with transition: (might be better fit)
The better option would be to use transition if you could instead of animation. Here you could just set the opacity via inline style attributes and let the transition property handle the rest. Unlike the animations, transitions can execute the reverse state by default. (This is the best bet if it only a simple change of opacity from 0.1 to 1, if it is a complex multi-step change the transitions are out of scope.)
var btnCorrect = document.getElementById('btnCorrect');
var btnWrong = document.getElementById('btnWrong');
var ladyDefault = document.getElementById('ladyDefault');
var ladyCorrect = document.getElementById('ladyCorrect');
var ladyWrong = document.getElementById('ladyWrong');
btnCorrect.addEventListener('click', function(event) {
ladyDefault.style["opacity"] = "0.1";
ladyWrong.style["opacity"] = "0.1";
ladyCorrect.style["opacity"] = "1";
});
btnWrong.addEventListener('click', function(event) {
ladyDefault.style["opacity"] = "0.1";
ladyCorrect.style["opacity"] = "0.1";
ladyWrong.style["opacity"] = "1";
});
#ladyDefault,
#ladyCorrect,
#ladyWrong {
width: 100px;
height: 150px;
display: inline-block;
margin: 5px;
}
#ladyDefault {
background-color: blue;
transition: all 1s ease;
}
#ladyCorrect {
background-color: green;
opacity: 0.1;
transition: all 1s ease;
}
#ladyWrong {
background-color: red;
opacity: 0.1;
transition: all 1s ease;
}
#btnCorrect,
#btnWrong {
height: 50px;
width: 100px;
display: inline-block;
margin: 5px;
}
#btnCorrect {
background-color: lime;
}
#btnWrong {
background-color: darkred;
}
<div id="ladyDefault">ladyDefault</div>
<div id="ladyCorrect">ladyCorrect</div>
<div id="ladyWrong">ladyWrong</div>
<div id="btnCorrect">btnCorrect</div>
<div id="btnWrong">btnWrong</div>
You are adding all classes correctly, but you are not removing the added classes later, thats the issue. Change your listeners to
btnCorrect.addEventListener('click', function(event) {
ladyDefault.classList.add('hideLadyDefault');
ladyWrong.classList.add('hideLadyWrong');
ladyCorrect.classList.add('showLadyCorrect');
ladyCorrect.classList.remove('hideLadyCorrect'); //added
});
btnWrong.addEventListener('click', function(event) {
ladyDefault.classList.add('hideLadyDefault');
ladyCorrect.classList.add('hideLadyCorrect');
ladyWrong.classList.add('showLadyWrong');
ladyWrong.classList.remove('hideLadyWrong'); //added
});
var btnCorrect = document.getElementById('btnCorrect');
var btnWrong = document.getElementById('btnWrong');
var ladyDefault = document.getElementById('ladyDefault');
var ladyCorrect = document.getElementById('ladyCorrect');
var ladyWrong = document.getElementById('ladyWrong');
btnCorrect.addEventListener('click', function(event) {
ladyDefault.classList.add('hideLadyDefault');
ladyWrong.classList.add('hideLadyWrong');
ladyCorrect.classList.add('showLadyCorrect');
ladyCorrect.classList.remove('hideLadyCorrect');
});
btnWrong.addEventListener('click', function(event) {
ladyDefault.classList.add('hideLadyDefault');
ladyCorrect.classList.add('hideLadyCorrect');
ladyWrong.classList.add('showLadyWrong');
ladyWrong.classList.remove('hideLadyWrong');
});
#ladyDefault,
#ladyCorrect,
#ladyWrong {
width: 100px;
height: 150px;
display: inline-block;
margin: 5px;
}
#ladyDefault {
background-color: blue;
}
#ladyCorrect {
background-color: green;
opacity: 0.1;
}
#ladyWrong {
background-color: red;
opacity: 0.1;
}
#btnCorrect,
#btnWrong {
height: 50px;
width: 100px;
display: inline-block;
margin: 5px;
}
#btnCorrect {
background-color: lime;
}
#btnWrong {
background-color: darkred;
}
/*
--------------------------- lady default
*/
#keyframes hideLadyDefault {
0% {
opacity: 1;
}
100% {
opacity: 0.1;
}
}
.hideLadyDefault {
animation-name: hideLadyDefault;
animation-duration: 0;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: forwards;
animation-delay: 0;
}
/*
--------------------------- lady correct
*/
#keyframes showLadyCorrect {
0% {
opacity: 0.1;
}
100% {
opacity: 1;
}
}
.showLadyCorrect {
animation-name: showLadyCorrect;
animation-duration: 1s;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: forwards;
animation-delay: 0;
}
#keyframes hideLadyCorrect {
0% {
opacity: 1;
}
100% {
opacity: 0.1;
}
}
.hideLadyCorrect {
animation-name: hideLadyCorrect;
animation-duration: 0;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: both
animation-delay: 0;
}
/*
--------------------------- lady wrong
*/
#keyframes showLadyWrong {
0% {
opacity: 0.1;
}
100% {
opacity: 1;
}
}
.showLadyWrong {
animation-name: showLadyWrong;
animation-duration: 1s;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: forwards;
animation-delay: 0;
}
#keyframes hideLadyWrong {
0% {
opacity: 1;
}
100% {
opacity: 0.1;
}
}
.hideLadyWrong {
animation-name: hideLadyWrong;
animation-duration: 0;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: both;
animation-delay: 0;
}
<div id="ladyDefault">ladyDefault</div>
<div id="ladyCorrect">ladyCorrect</div>
<div id="ladyWrong">ladyWrong</div>
<div id="btnCorrect">btnCorrect</div>
<div id="btnWrong">btnWrong</div>
Related
changing the width of h1
I have this code below that allows the text to fade in nicely. However, as you can see when I run it below, it doesn't show the entire text specified in the h1. So i am a little confused on how to fix this, because looking at the css, it is not specifying where the width of the div or h1 actually is.
var spanText = function spanText(text) {
var string = text.innerText;
var spaned = '';
for (var i = 0; i < string.length; i++) {
if(string.substring(i, i + 1) === ' ') spaned += string.substring(i, i + 1);
else spaned += '<span>' + string.substring(i, i + 1) + '</span>';
}
text.innerHTML = spaned;
}
var headline = document.querySelector("h1");
spanText(headline);
#import url('https://fonts.googleapis.com/css?family=Oswald:300,400,500,600,700&display=swap');
body {
margin: 0;
padding: 0;
}
.container {
display: flex;
justify-content: center;
align-items: center;
font-family: 'Oswald', helvetica;
background-color: #333;
color: #fff;
height: 100vh;
font-size: 30px;
}
.container h1 span {
letter-spacing: 3px;
font-weight: 300;
display: inline-block;
opacity: 0;
text-transform: uppercase;
animation-duration: 1.5s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
transition-timing-function: ease-out;
}
.container h1 span:nth-child(1) {
animation-delay: 0.2s;
animation-name: fadeInLeft;
}
.container h1 span:nth-child(2) {
animation-delay: 0.4s;
animation-name: fadeInLeft;
}
.container h1 span:nth-child(3) {
animation-delay: 0.6s;
animation-name: fadeInLeft;
}
.container h1 span:nth-child(4) {
animation-delay: 0.8s;
animation-name: fadeInLeft;
}
.container h1 span:nth-child(5) {
animation-delay: 1s;
animation-name: fadeInLeft;
}
.container h1 span:nth-child(10) {
animation-delay: 0s;
animation-name: fadeInRight;
}
.container h1 span:nth-child(9) {
animation-delay: 0.2s;
animation-name: fadeInRight;
}
.container h1 span:nth-child(8) {
animation-delay: 0.4s;
animation-name: fadeInRight;
}
.container h1 span:nth-child(7) {
animation-delay: 0.6s;
animation-name: fadeInRight;
}
.container h1 span:nth-child(6) {
animation-delay: 0.8s;
animation-name: fadeInRight;
}
#keyframes fadeInRight {
0% {
opacity: 0;
transform: translate3d(10%, 30%, 0);
}
100% {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
#keyframes fadeInLeft {
0% {
opacity: 0;
transform: translate3d(-10%, -30%, 0);
}
100% {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
<div class="container">
<h1>
Superrr Coool
</h1>
</div>
does anybody have any ideas how to possibly fix this?
This has nothing to do with the width of the h1, but with your CSS animations: You are defining fade-ins for 10 spans, but you have 12 of them, so the 11th and 12th remain invisible - see below, where I added selectors for them to the rule for the 10th child span:
var spanText = function spanText(text) {
var string = text.innerText;
var spaned = '';
for (var i = 0; i < string.length; i++) {
if(string.substring(i, i + 1) === ' ') spaned += string.substring(i, i + 1);
else spaned += '<span>' + string.substring(i, i + 1) + '</span>';
}
text.innerHTML = spaned;
}
var headline = document.querySelector("h1");
spanText(headline);
#import url('https://fonts.googleapis.com/css?family=Oswald:300,400,500,600,700&display=swap');
body {
margin: 0;
padding: 0;
}
.container {
display: flex;
justify-content: center;
align-items: center;
font-family: 'Oswald', helvetica;
background-color: #333;
color: #fff;
height: 100vh;
font-size: 30px;
}
.container h1 span {
letter-spacing: 3px;
font-weight: 300;
display: inline-block;
opacity: 0;
text-transform: uppercase;
animation-duration: 1.5s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
transition-timing-function: ease-out;
}
.container h1 span:nth-child(1) {
animation-delay: 0.2s;
animation-name: fadeInLeft;
}
.container h1 span:nth-child(2) {
animation-delay: 0.4s;
animation-name: fadeInLeft;
}
.container h1 span:nth-child(3) {
animation-delay: 0.6s;
animation-name: fadeInLeft;
}
.container h1 span:nth-child(4) {
animation-delay: 0.8s;
animation-name: fadeInLeft;
}
.container h1 span:nth-child(5) {
animation-delay: 1s;
animation-name: fadeInLeft;
}
.container h1 span:nth-child(10),
.container h1 span:nth-child(11),
.container h1 span:nth-child(12) {
animation-delay: 0s;
animation-name: fadeInRight;
}
.container h1 span:nth-child(9) {
animation-delay: 0.2s;
animation-name: fadeInRight;
}
.container h1 span:nth-child(8) {
animation-delay: 0.4s;
animation-name: fadeInRight;
}
.container h1 span:nth-child(7) {
animation-delay: 0.6s;
animation-name: fadeInRight;
}
.container h1 span:nth-child(6) {
animation-delay: 0.8s;
animation-name: fadeInRight;
}
#keyframes fadeInRight {
0% {
opacity: 0;
transform: translate3d(10%, 30%, 0);
}
100% {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
#keyframes fadeInLeft {
0% {
opacity: 0;
transform: translate3d(-10%, -30%, 0);
}
100% {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
<div class="container">
<h1>
Superrr Coool
</h1>
</div>
You did not include enough :nth-child elements in your animation. I changed the last one you had, I believe was 10, to the proper number -> 12.
I figured this out by inspecting the browser inspector and looking at how many span tags were being created by your JS function. I then went back and replaced the last span CSS animation from 10 to 12 and worked backward down the line changing each one down the line...
I also added the proper amount of animations and animation duration for 5, 6 and 7 respectively though you may want to play around with those on your end.
var spanText = function spanText(text) {
var string = text.innerText;
var spaned = '';
for (var i = 0; i < string.length; i++) {
if (string.substring(i, i + 1) === ' ') spaned += string.substring(i, i + 1);
else spaned += '<span>' + string.substring(i, i + 1) + '</span>';
}
text.innerHTML = spaned;
}
var headline = document.querySelector("h1");
spanText(headline);
#import url('https://fonts.googleapis.com/css?family=Oswald:300,400,500,600,700&display=swap');
body {
margin: 0;
padding: 0;
}
.container {
display: flex;
justify-content: center;
align-items: center;
font-family: 'Oswald', helvetica;
background-color: #333;
color: #fff;
height: 100vh;
font-size: 30px;
}
.container h1 span {
letter-spacing: 3px;
font-weight: 300;
display: inline-block;
opacity: 0;
text-transform: uppercase;
animation-duration: 1.5s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
transition-timing-function: ease-out;
}
.container h1 span:nth-child(1) {
animation-delay: 0.2s;
animation-name: fadeInLeft;
}
.container h1 span:nth-child(2) {
animation-delay: 0.3s;
animation-name: fadeInLeft;
}
.container h1 span:nth-child(3) {
animation-delay: 0.4s;
animation-name: fadeInLeft;
}
.container h1 span:nth-child(4) {
animation-delay: 0.6s;
animation-name: fadeInLeft;
}
.container h1 span:nth-child(5) {
animation-delay: .7s;
animation-name: fadeInLeft;
}
.container h1 span:nth-child(6) {
animation-delay: .9s;
animation-name: fadeInLeft;
}
.container h1 span:nth-child(7) {
animation-delay: 1s;
animation-name: fadeInLeft;
}
.container h1 span:nth-child(12) {
animation-delay: 0s;
animation-name: fadeInRight;
}
.container h1 span:nth-child(11) {
animation-delay: 0.2s;
animation-name: fadeInRight;
}
.container h1 span:nth-child(10) {
animation-delay: 0.4s;
animation-name: fadeInRight;
}
.container h1 span:nth-child(9) {
animation-delay: 0.6s;
animation-name: fadeInRight;
}
.container h1 span:nth-child(8) {
animation-delay: 0.8s;
animation-name: fadeInRight;
}
#keyframes fadeInRight {
0% {
opacity: 0;
transform: translate3d(10%, 30%, 0);
}
100% {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
#keyframes fadeInLeft {
0% {
opacity: 0;
transform: translate3d(-10%, -30%, 0);
}
100% {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
<div class="container">
<h1>
Superrr Coool
</h1>
</div>
How to stop loading animation after 2 seconds?
I want to make a loading screen and a fading up page like here: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_loader5. The problem is that I don't know how to end the loading loop and make that fading.
Codes
<body>
<div class="sk-chase">
<div class="sk-chase-dot"></div>
<div class="sk-chase-dot"></div>
<div class="sk-chase-dot"></div>
<div class="sk-chase-dot"></div>
<div class="sk-chase-dot"></div>
<div class="sk-chase-dot"></div>
</div>
</body>
body {
background-color: #636e72;
}sk-chase {
width: 40px;
height: 40px;
animation: sk-chase 2.5s infinite linear both;
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
top: 50%;
left: 50%;
position: absolute;
}
.sk-chase-dot {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
animation: sk-chase-dot 2.0s infinite ease-in-out both;
}.sk-chase-dot:before {
content: '';
display: block;
width: 25%;
height: 25%;
background-color: #fff;
border-radius: 100%;
animation: sk-chase-dot-before 2.0s infinite ease-in-out both;
}
.sk-chase-dot:nth-child(1) { animation-delay: -1.1s; }
.sk-chase-dot:nth-child(2) { animation-delay: -1.0s; }
.sk-chase-dot:nth-child(3) { animation-delay: -0.9s; }
.sk-chase-dot:nth-child(4) { animation-delay: -0.8s; }
.sk-chase-dot:nth-child(5) { animation-delay: -0.7s; }
.sk-chase-dot:nth-child(6) { animation-delay: -0.6s; }
.sk-chase-dot:nth-child(1):before { animation-delay: -1.1s; }
.sk-chase-dot:nth-child(2):before { animation-delay: -1.0s; }
.sk-chase-dot:nth-child(3):before { animation-delay: -0.9s; }
.sk-chase-dot:nth-child(4):before { animation-delay: -0.8s; }
.sk-chase-dot:nth-child(5):before { animation-delay: -0.7s; }
.sk-chase-dot:nth-child(6):before { animation-delay: -0.6s; }
#keyframes sk-chase {
100% { transform: rotate(360deg); }
}
#keyframes sk-chase-dot {
80%, 100% { transform: rotate(360deg); }
}
#keyframes sk-chase-dot-before {
50% {
transform: scale(0.4);
} 100%, 0% {
transform: scale(1.0);
}
}
You need the JavaScript that tells the browser when to hide the loader and show the content. See snippet below
var myVar;
function myFunction() {
myVar = setTimeout(showPage, 3000);
}
function showPage() {
document.querySelector("#loader").style.display = "none";
document.querySelector("#myDiv").style.display = "block";
document.querySelector("body").style.backgroundColor = "white";
}
body {
background-color: #636e72;
}
.sk-chase {
width: 40px;
height: 40px;
animation: sk-chase 2.5s infinite linear both;
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
top: calc(50% - 20px);
left: calc(50% - 20px);
position: absolute;
}
.sk-chase-dot {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
animation: sk-chase-dot 2.0s infinite ease-in-out both;
}
.sk-chase-dot:before {
content: '';
display: block;
width: 25%;
height: 25%;
background-color: #fff;
border-radius: 100%;
animation: sk-chase-dot-before 2.0s infinite ease-in-out both;
}
.sk-chase-dot:nth-child(1) {
animation-delay: -1.1s;
}
.sk-chase-dot:nth-child(2) {
animation-delay: -1.0s;
}
.sk-chase-dot:nth-child(3) {
animation-delay: -0.9s;
}
.sk-chase-dot:nth-child(4) {
animation-delay: -0.8s;
}
.sk-chase-dot:nth-child(5) {
animation-delay: -0.7s;
}
.sk-chase-dot:nth-child(6) {
animation-delay: -0.6s;
}
.sk-chase-dot:nth-child(1):before {
animation-delay: -1.1s;
}
.sk-chase-dot:nth-child(2):before {
animation-delay: -1.0s;
}
.sk-chase-dot:nth-child(3):before {
animation-delay: -0.9s;
}
.sk-chase-dot:nth-child(4):before {
animation-delay: -0.8s;
}
.sk-chase-dot:nth-child(5):before {
animation-delay: -0.7s;
}
.sk-chase-dot:nth-child(6):before {
animation-delay: -0.6s;
}
#keyframes sk-chase {
100% {
transform: rotate(360deg);
}
}
#keyframes sk-chase-dot {
80%,
100% {
transform: rotate(360deg);
}
}
#keyframes sk-chase-dot-before {
50% {
transform: scale(0.4);
}
100%,
0% {
transform: scale(1.0);
}
}
<body onload="myFunction()">
<div id="loader" class="sk-chase">
<div class="sk-chase-dot"></div>
<div class="sk-chase-dot"></div>
<div class="sk-chase-dot"></div>
<div class="sk-chase-dot"></div>
<div class="sk-chase-dot"></div>
<div class="sk-chase-dot"></div>
</div>
<div style="display:none;" id="myDiv" class="animate-bottom">
<h2>Tada!</h2>
<p>Some text in my newly loaded page..</p>
</div>
</body>
animation: sk-chase 2.5s infinite linear both; Word infinite is your problem. Use a number of reps instead infinite. In your case is 1.
Delay on keyframe animation
I want to had a delay with a keyframe animation, but it doesn't work.
It's a div with an opacity animation on a click button. The problem is that the opacity is 100% before the animation start.
$('button').click(function() {
if ($(this).hasClass("clicked")) {
$('div').removeClass('In');
$('div').addClass('Out');
$(this).text("Open ↓");
$(this).removeClass("clicked");
} else {
$('div').addClass('In');
$('div').removeClass('Out');
$(this).text("Close ↑");
$(this).addClass("clicked");
}
});
body {
text-align: center
}
div {
display: inline-block;
background: pink;
height: 300px;
width: 300px;
opacity: 0;
}
button {
font-size: 16px;
}
#keyframes In {
0% {
opacity: 0;
height: 0
}
100% {
opacity: 1;
height: 300px
}
}
#keyframes Out {
0% {
opacity: 1;
height: 300px
}
100% {
opacity: 0;
height: 0
}
}
.In {
animation-duration: 800ms;
animation-name: In;
animation-delay: 0.3s;
opacity: 1;
}
.Out {
animation-duration: 800ms;
animation-name: Out;
animation-delay: 0.3s;
opacity: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Open ↓ </button> <br>
<div> </div>
Here's MY JSFIDDLE with a problem.
Use transition instead of animation and you will also have an easier code:
$('button').click(function() {
if ($(this).hasClass("clicked")) {
$(this).text("Open ↓");
} else {
$(this).text("Close ↑");
}
$('div.box').toggleClass('In');
$(this).toggleClass("clicked");
});
body {
text-align: center
}
div.box {
display: inline-block;
background: pink;
height: 0;
width: 300px;
opacity: 0;
transition: .8s .3s;
}
button {
font-size: 16px;
}
div.In {
opacity: 1;
height: 300px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Open ↓ </button> <br>
<div class="box"> </div>
Considering your code you may correct it like this:
$('button').click(function() {
if ($(this).hasClass("clicked")) {
$('div').removeClass('In');
$('div').addClass('Out');
$(this).text("Open ↓");
$(this).removeClass("clicked");
} else {
$('div').addClass('In');
$('div').removeClass('Out');
$(this).text("Close ↑");
$(this).addClass("clicked");
}
});
body {
text-align: center
}
div {
display: inline-block;
background: pink;
height: 300px;
width: 300px;
opacity: 0;
}
button {
font-size: 16px;
}
#keyframes In {
0% {
opacity: 0;
height: 0
}
100% {
opacity: 1;
height: 300px
}
}
#keyframes Out {
0% {
opacity: 1;
height: 300px
}
100% {
opacity: 0;
height: 0
}
}
.In {
animation-duration: 800ms;
animation-name: In;
animation-delay: 0.3s;
animation-fill-mode:forwards; /*Added this*/
/* opacity:0; removed*/
}
.Out {
animation-duration: 800ms;
animation-name: Out;
animation-delay: 0.3s;
animation-fill-mode:forwards; /*Added this*/
opacity:1;
height:300px; /*Added this*/
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Open ↓ </button> <br>
<div> </div>
Image Display on Hover
Code is for displaying an image during a hover.
In addition to not getting the images to display while hovering, I am getting a white border on the top (about 17px) and right side of the image.
Any suggestions as to why this is happening?
http://jsfiddle.net/wfpzLv8n/
.nav-wrap {
width: 100%;
height: 770px;
background: #111;
position: relative;
}
.nav-wrap .img-place {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0;
z-index: 5;
}
.nav-wrap .nav li {
font-family: 'HelveticaNeue';
position: relative;
z-index: 6;
list-style: none;
}
.nav-wrap .nav li a {
display: block;
color: #FFFFFF;
text-decoration: none;
font-size: 48px;
text-transform: uppercase;
font-weight: "Thin";
letter-spacing: 0px;
margin: -12px;
padding: 0px 0px 0px 70px;
transition: all 0.5s ease-in-out;
}
.nav-wrap .nav:hover li a {
opacity: 0.3;
}
.nav-wrap .nav li a:hover {
opacity: 1;
padding-left: 95px;
font-weight: 600;
}
.nav-wrap .bg1 {
background-image: url("http://www.photography-match.com/views/images/gallery/Ghandrung_Village_and_Annapurna_South_Nepal_Himalaya.jpg");
background-size: 120%;
opacity: 0.3;
-webkit-animation: fadein 2s forwards;
-moz-animation: fadein 2s forwards;
-ms-animation: fadein 2s forwards;
-o-animation: fadein 2s forwards;
animation: fadein 2s forwards;
-webkit-animation: mymove 11s forwards ease-out;
animation: mymove 11s forwards ease-out;
}
` #keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#-moz-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#-webkit-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#-ms-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#-o-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#-webkit-keyframes mymove {
0% {
top: -12px;
}
100% {
top: -240px;
}
}
#keyframes mymove {
0% {
top: -12px;
}
100% {
top: -240px;
}
}
.nav-wrap .bg2 {
background-image: url("http://travspire.com/wp-content/uploads/2013/06/Glimpse_of_hampi_main.jpg");
background-size: 125%;
opacity: 0.4;
animation: bgani 7s linear forwards;
}
.nav-wrap .bg3 {
background-image: url("http://lh5.ggpht.com/_nFOgRvQfbY4/SqDwU31NB8I/AAAAAAAAATE/Jo1zuHhJaDA/s1600/IMG_4278.JPG");
background-size: 130%;
-webkit-animation: fadein 3s forwards ease-out;
-moz-animation: fadein 3s forwards ease-out;
-ms-animation: fadein 3s forwards ease-out;
-o-animation: fadein 3s forwards ease-out;
animation: fadein 3s forwards ease-out;
}
#keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#-moz-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#-webkit-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#-ms-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#-o-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#keyframes bgani {
0% {
opacity: 0;
background-size: 100%;
}
15% {
opacity: 0.3;
}
100% {
background-size: 125%;
}
</style>
Your jsFiddle was messed up, that's all. You shouldn't put the <style></style> tags in the CSS area, and you shouldn't put the <script></script> tags in the JavaScript area. Also, to include jQuery, you need to include it as an external resource, which is a section in the left sidebar. You put your resource URL in the text box, and click the plus button at its right. Here's a fixed version, with your HTML cleaned up too. http://jsfiddle.net/xchrt5db/
I'm guessing you're new to jsfiddle? I've formatted it correctly now, is that working?
$('.nav li a').hover(function() {
$('.img-place').toggleClass($(this).data('target'));
});
$('.nav-wrap .img-place, .nav-wrap').height($(window).height());
http://jsfiddle.net/link2twenty/wfpzLv8n/2/
HSL random color applying it to a function
I am really new to jquery and am trying to have it such that the color generated for the word blink would always be a different color each time but can't figure out how to do so. Please look at my code below or check out the jsfiddle.
http://jsfiddle.net/schan01/2d8Rr/
<!doctype html>
<html>
<head>
<style>
html{
height:100%;
overflow:hidden;
}
p{
font-family: "Helvetica";
font-size: 10px;
float:left;
margin:10px;
}
.box {
width: 10px;
height: 10px;
float:left;
margin:10px;
}
.hovered{
color: blue;
-webkit-animation-name: blinker;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-name: blinker;
-moz-animation-duration: 1s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
animation-name: blinker;
animation-duration: 1s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
#-moz-keyframes blinker {
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
#-webkit-keyframes blinker {
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
#keyframes blinker {
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
</style>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
var g = 0;
$(function() {
for(var i=0; i<1000; i++){
$("body").append("<p>blink</p>");
}
$("p").hover(function() {
//hovered on
$(this).addClass("hovered")({
"color":"hsl(" + g + ",100%,50%)"
});
});
});
</script>
</head>
<body>
</body>
</html>
Appreciate any help or advice given. Thanks.
You've missed the call for .css() after .addClass()
$(this).addClass("hovered").css({
"color": "hsl(" + g + ",100%,50%)"
});
fiddle