Develop Reference

How can I change the function in this script from .click to .scroll (and still have the script working)

How can I change the function in this script from .click to .scroll (and still have the script working) so that the action is executed on scrolling instead of clicking?
The js code changes the posititon of 3 icons/images that are initially positioned behind another image/icon. Like this: https://prnt.sc/gCyTQDqS_dtD after a click on the image: https://prnt.sc/CjAbwM1D1Cvw
Thanks for your help :-)
<style>
.has-transform, .transform_target .et-pb-icon {
transition: all 400ms ease-in-out;
}
.toggle-transform-animation {
transform: none !important;
}
.transform_target {
cursor: pointer;
}
.toggle-active-target.et_pb_blurb .et-pb-icon {
background-color: transparent;
}
</style>
<script>
(function($) {
$(document).ready(function(){
$('.transform_target').click(function(){
$(this).toggleClass('toggle-active-target');
$('.has-transform').toggleClass('toggle-transform-animation');
});
});
})( jQuery );
</script>

Sadly I think the best solution is to change the entire approach. One option to react to scrolling is to use an intersection observer https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#result
See the little intersection observer demo below; the 2nd kitten will fade into view only when you scroll down
const one = document.querySelector(".one");
const two = document.querySelector(".two");
function handler(entries, observer) {
for (entry of entries) {
if (entry.isIntersecting) {
two.classList.add("show")
} else {
two.classList.remove("show")
}
}
}
let observer = new IntersectionObserver(handler);
observer.observe(two);
.kitten {
width: 100px;
height: 100px;
border-radius: 50%;
}
.two { opacity: 0; }
.two.show{
animation: fadeIn 5s;
animation-fill-mode: forwards;
}
#keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
#wrapper {
padding-top: 100vh;
padding-bottom: 100vh;
}
scroll me
<div id="wrapper">
<img class="kitten one" src="//placekitten.com/100/100">
<img class="kitten two" src="//placekitten.com/200/200">
</div>

How do I trigger a CSS keyframe animation by pressing a key on the keyboard? [duplicate]

Naturally, we can create a CSS animation using keyframes, and control it from there.
However, ideally, I would like to trigger this animation from a button click - so the button click would be an event...
#keyframes fade-in {
0% {opacity: 0;}
100% {opacity: 1;}
}
Now, on click, I want to trigger this animation; as opposed to from within the CSS animation property.

see here jsfiddle
if you want your animation to work every time you press the button use this code :
$('button').click(function() {
$(".fademe").addClass('animated');
setTimeout(function() {
$(".fademe").removeClass('animated');
}, 1500);
});
where 1500 is the animation-duration in this case, 1.5s
$('button').click(function() {
$(".fademe").addClass('animated');
setTimeout(function() {
$(".fademe").removeClass('animated');
}, 1500);
});
.fademe {
width: 100px;
height: 100px;
background: red;
}
.fademe.animated {
animation: fade-in 1.5s ease;
}
#keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="fademe">
</div>
<button>CLICK ME</button>
EXPLANATION :
on click on the button add class animated ( or any other class ) to the element you want to apply the animation to , .fademe
make a setTimeout(function() to delay the removeClass for the duration of the animation 1.5s or 1500ms
write in CSS the declaration of the animation , #keyframes, and add it to the element with the class added by the JQ .fademe.animated

$("#move-button").on("click", function(){
$("#ship").removeClass("moving");
$("#ship")[0].offsetWidth = $("#ship")[0].offsetWidth;
$("#ship").addClass("moving");
});//
#ship
{
background: green;
color: #fff;
height: 60px;
line-height: 60px;
text-align: center;
width: 100px;
}
#move-button
{
margin-top: 20px;
}
#ship.moving
{
animation: moving 2s ease;
}
#keyframes moving
{
0%{ transform: translate(0px);}
50%{ transform: translate(20px);}
100%{ transform: translate(0px);}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="ship">Ship</div>
<button id="move-button">Push</button>

If you want to make the animation happen and always end before allowing the event listener to trigger it again, I would suggest to control the behaviour like this:
// Add this to your event listener
if (!element.classList.contains("myClass")) {
element.className = "myClass";
setTimeout(function() {
element.classList.remove("myClass");
}, 1000); //At least the time the animation lasts
}

There is a toggle method that works just fine for this, hope it helps:
function Fade() {
document.getElementById("box").classList.toggle("animate");
}
#box {
background-color: black;
height: 50px;
width: 50px;
}
.animate {
animation: fademe 0.5s;
}
#keyframes fademe {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
<html>
<head>
<title>
Animation Trigger
</title>
</head>
<body>
<div id="box"></div>
<button onclick="Fade()"> Fade above Box</button>
</body>

How to play animation on div with javascript

Here is my script so far:
Html:
<head>
<link rel="stylesheet" type="text/css" href="mystyles.css">
</head>
<body>
<div id="test"></div>
</body>
</html>
Css:
#test {
background-color: blue;
width: 100px;
height: 100px;
}
/* Here is the animation (keyframes) */
#keyframes fading {
0% { opacity: 1; }
100% { opacity: 0; }
}
But how do i get the css animation (keyframes) to play on the div #test using some javascript?

Try to add 'animation' css property from js:
document.getElementById('test').style.animation = 'fading 2s infinite'

Add the animation to a class in CSS.
.fade {
animation: fading 1s forwards; // "fading" is the keyframe animation you created
}
[forwards][1] makes it so the element remains in the final state of the animation.
Then in Javascript when you want to animate your div, add the class to the element.
var el = document.getElementById('test'); // get a reference to the targeted element
el.classList.add('fade'); // add the class name to that element
document.getElementById('fader').addEventListener('click', function() {
var el = document.getElementById('test');
el.classList.add('fade');
});
#test {
background-color: blue;
width: 100px;
height: 100px;
}
.fade {
animation: fading 1s forwards;
}
/* Here is the animation (keyframes) */
#keyframes fading {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
<div id="test"></div>
<button type="button" id="fader">fade out</button>

You have to add the animation keyframe fading to the div.
Have a look at this
#test {
background-color: blue;
width: 100px;
height: 100px;
position: relative;
-webkit-animation: fading 5s infinite;
animation: fading 5s infinite;
}
/* Here is the animation (keyframes) */
#keyframes fading {
0% { opacity: 1; }
100% { opacity: 0; }
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyles.css">
</head>
<body>
<div id="test"></div>
</body>
</html>

.cube {
width:40px;
height:40px;
background:#000;
animation:spin 3s;
animation-iteration-count:infinite;
}
#keyframes spin {
from {
transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}
}
<div class="cube"><div>
Like this give youre animation name like me(spin) and use this variable in animation selector with css. :)

You just declared the animation and did not used. You have to call it with "animation" keyword:
#test {
background-color: blue;
width: 100px;
height: 100px;
animation: fading 1s;
}

There is no need to use JS when you use #keyframes css
To add the #keyframes faded animation to the div just add those additional 2 lines to #test css . This will create 5s animation
#test {
background-color: blue;
width: 100px;
height: 100px;
-webkit-animation: fading 5s; /* Safari 4.0 - 8.0 */
animation: fading 5s;
}
You can add 'infinite' to loop the animation
-webkit-animation: fading 5s infinite; /* Safari 4.0 - 8.0 */
animation: fading 5s infinite;

Make HTML element disappear with CSS animation

I want to know if there is a way to make an HTML element disappear with an animation of CSS. So when the element gets removed from the page by some script, an animation shall display before the element actually gets removed.
Is this possible in an easy way? Or do I need to set a timer to my script that starts the animation with a duration of X and removes the element after time X?

I would get fancy with keyframes
#keyframes myAnimation{
0%{
opacity: 1;
transform: rotateX(90deg);
}
50%{
opacity: 0.5;
transform: rotateX(0deg);
}
100%{
display: none;
opacity: 0;
transform: rotateX(90deg);
}
}
#myelement{
animation-name: myAnimation;
animation-duration: 2000ms;
animation-fill-mode: forwards;
}

If the script is actually removing the DOM element, I don't believe there's a way to fade it out. I think the timer is your only option.

I use jQuery to implement this.
//jQuery
$(document).ready(function() {
var target = $("#div");
$("#btn").click(function() {
removeElement(target);
});
});
function removeElement(target) {
target.animate({
opacity: "-=1"
}, 1000, function() {
target.remove();
});
}
div {
width: 100px;
height: 100px;
background-color: #000;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<div id="div"></div>
<input type="button" value="fadeout" id="btn">
</body>
</html>

Use transitions like this:
function waithide()
{
var obj = document.getElementById("thisone");
obj.style.opacity = '0';
window.setTimeout(
function removethis()
{
obj.style.display='none';
}, 300);
}
div
{
height:100px;
width :100px;
background:red;
display:block;
opacity:1;
transition : all .3s;
-wekit-transition : all .3s;
-moz-transition : all .3s;
}
<div id="thisone" onclick="waithide()"></div>

I think you would have to do it in two steps. first the animate. Then, after animate is done, remove the elem. See the function below. Perhaps it could be put in a jquery plugin?
<style>
#test{
background: red;
height: 100px;
width: 400px;
transition: height 1s;
}
#test.hide {
height: 0;
}
</style>
<div id="test"> </div>
<button>Hide the Div</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.js"></script>
<script>
$('button').click(function(){
removeWithAnimate('#test');
});
function removeWithAnimate(id){
$(id).addClass('hide');
setTimeout( function(){
$(id).remove()
},1000);;
}
</script>
$('button').click(function() {
removeWithAnimate('#test');
});
function removeWithAnimate(id) {
$(id).addClass('hide');
setTimeout(function() {
$(id).remove()
}, 1000);;
}
#test {
background: red;
height: 100px;
width: 400px;
transition: height 1s;
}
#test.hide {
height: 0;
}
<div id="test"> </div>
<button>Hide the Div</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.js"></script>

transition: .5s;
invisible:
opacity: 0;
visible:
opacity: 1;
transition will make it appear and disappear smoothly.

webkit animation play state: how to start/stop animation on demand with javascript

I'm working on a game and just found out about -webkit-animation-play-state CSS attribute. I want certain text to show itself as a short animation, then hide and show when called again (in javascript).
I figured out how to start animation when I want to in javascript, but after its finished, the text stays on the screen, which I don't want to.
HTML:
<p id="INFO">
TEST
</p>
CSS:
#-webkit-keyframes pulse {
from {
opacity: 0.0;
font-size: 100%;
}
to {
opacity: 1.0;
font-size: 400%;
}
}
#INFO {
position: absolute;
left: 400px;
top: 200px;
-webkit-animation-name: pulse;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-play-state:paused;
visibility: hidden;
}
JS:
var INFO = document.getElementById("INFO");
INFO.innerHTML = "WRONG";
INFO.style.color = "RED";
INFO.style.webkitAnimationPlayState = "running";
INFO.style.visibility = "visible";
I read some questions/answers about -webkit-animation-play-state on this site, but none regarding the issue I am having.
One thing I read about was that animation goes to its default values when its ended. But my default values say that animation is "hidden" ? source: how to stop my webkit frame animation?
If anyone can point me in the right direction I'd be grateful.
If I was not clear enough, ask for more info please.
Thank you

For what you are trying to do, you don't need to use -webkit-animation-play-state.
Instead, try starting the animation by applying a class with the animation properties set. Then use a JavaScript event listener to remove the class once the animation finishes.
You should also keep the element hidden with opacity instead of visibility:hidden since you are manipulating the opacity in the animation.
CSS:
#-webkit-keyframes pulse {
from {
opacity: 0.0;
font-size: 100%;
}
to {
opacity: 1.0;
font-size: 400%;
}
}
#INFO {
opacity:0;
position: absolute;
left: 400px;
top: 200px;
}
.pulse {
-webkit-animation-name: pulse;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in-out;
}
JS:
var INFO = document.getElementById("INFO");
INFO.innerHTML = "WRONG";
INFO.style.color = "RED";
INFO.addEventListener('webkitAnimationEnd', function (e) {
this.classList.remove('pulse');
});
DEMO >> CodePen