Develop Reference

How Can I Trigger a CSS keyframe animation in pseudo-element with Pure JavaScript?

I have a pseudo-element in my CSS and a keyframe animation I can run it using this:
.bottle:after
{
z-index: -500;
content: "";
position: absolute;
bottom: -95%;
left: -60%;
height: 130%;
width: 240%;
background: blue;
border-radius: 45%;
animation: spin 6s ease-in-out;
animation-fill-mode: forwards;
}
#keyframes spin
{
0% {transform: translateY(0) rotate(0deg);}
100% {transform: translateY(-50%) rotate(500deg);}
}
But I want this animation to be when the button is clicked.

An CSS pseudo element :active is what you need, no JavaScript is needed.
.button:active::after {
content: '';
position: absolute;
bottom: -95%;
left: -60%;
height: 130%;
width: 240%;
background: blue;
border-radius: 45%;
animation: spin 6s ease-in-out;
animation-fill-mode: forwards;
z-index: -500;
}
#-webkit-keyframes spin {
0% {
transform: translate(0, 0) rotate(0deg);
}
100% {
transform: translate(0, -50%) rotate(500deg);
}
}
#keyframes spin {
0% {
transform: translate(0, 0) rotate(0deg);
}
100% {
transform: translate(0, -50%) rotate(500deg);
}
}

add "active" to the button you want , also it's "::after" not ":after" .
.button:active::after {
z-index: -500;
content: "";
position: absolute;
bottom: -95%;
left: -60%;
height: 130%;
width: 240%;
background: blue;
border-radius: 45%;
animation: spin 6s ease-in-out;
animation-fill-mode: forwards;
}
#keyframes spin {
0% {
transform: translateY(0) rotate(0deg);
}
100% {
transform: translateY(-50%) rotate(500deg);
}
}

See an example below.
button = document.querySelector(".button");
// Add event listener to button
button.addEventListener("click", () => {
// Find first element with class = cl
bottle = document.querySelector(".cl");
// Add CSS class to first element with class = cl
bottle.classList.add("bottle");
});
.bottle:after {
z-index: -500;
content: "";
position: absolute;
bottom: -95%;
left: -60%;
height: 130%;
width: 240%;
background: blue;
border-radius: 45%;
animation: spin 6s ease-in-out;
animation-fill-mode: forwards;
}
#keyframes spin {
0% {
transform: translateY(0) rotate(0deg);
}
100% {
transform: translateY(-50%) rotate(500deg);
}
}
<div class="cl">Bottle</div>
<button class="button">Click</button>

If you really want this with "Pure JavaScript", then have a look at the Web Animation API:
document.querySelector("button").onclick = (evt) => {
// we can't target a pseudo element through DOM
// so we target its "owner"
const el = document.querySelector(".bottle");
el.animate(
[ // keyframes
{ transform: "translateY(0) rotate(0)" },
{ transform: "translateY(-50%) rotate(500deg)" }
],
{ // settings
pseudoElement: "::after", // target the pseudo element
duration: 6000,
easing: "ease-in-out",
fill: "forwards"
}
);
};
.bottle:after
{
z-index: -500;
content: "";
position: absolute;
bottom: -95%;
left: -60%;
height: 130%;
width: 240%;
background: blue;
border-radius: 45%;
}
<button>animate</button>
<div class="bottle"></div>

How to hide the scroll indicator on scroll?

Dear people of the Internet,
I have this css & html code to add an scroll indicator to my landing page.
My goal is; As soon as you scroll down, the indicator disappears and only appears again after reloading the page.
My jquery seems not to work, any help much appreciated!
$(window).scroll(function() {
if ($(this).scrollTop()>0)
{
$('.scrolli').fadeOut();
}
});
body{
margin: 0;
padding: 0;
background: #000;
}
.scrolli{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.scrolli span{
display: block;
width: 20px;
height: 20px;
border-bottom: 1px solid #FFF;
border-right: 1px solid #FFF;
transform: rotate(45deg);
margin: -10px;
animation: animate 2s infinite;
}
.scrolli span:nth-child(2){
animation-delay: -0.2s;
}
.scrolli span:nth-child(3){
animation-delay: -0.4s;
}
#keyframes animate{
0%{
opacity: 0;
transform: rotate(45deg) translate(-20px,-20px);
}
50%{
opacity: 1;
}
100%{
opacity: 0;
transform: rotate(45deg) translate(20px,20px);
}
}
<div class="scrolli">
<span></span>
<span></span>
<span></span>
</div>

Your code is fine, it doesn't work because there isn't any available scroll, so $(this).scrollTop() can't ever be greater than zero.
You can see it working by making the body taller:
$(window).scroll(function() {
if ($(this).scrollTop()>0)
{
$('.scrolli').fadeOut();
}
});
body{
margin: 0;
padding: 0;
background: #000;
height: 200vh;
}
.scrolli{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.scrolli span{
display: block;
width: 20px;
height: 20px;
border-bottom: 1px solid #FFF;
border-right: 1px solid #FFF;
transform: rotate(45deg);
margin: -10px;
animation: animate 2s infinite;
}
.scrolli span:nth-child(2){
animation-delay: -0.2s;
}
.scrolli span:nth-child(3){
animation-delay: -0.4s;
}
#keyframes animate{
0%{
opacity: 0;
transform: rotate(45deg) translate(-20px,-20px);
}
50%{
opacity: 1;
}
100%{
opacity: 0;
transform: rotate(45deg) translate(20px,20px);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="scrolli">
<span></span>
<span></span>
<span></span>
</div>

Hide loading icon after 3 sec, when we click on a link <a

I have a loading icon in CSS, when someone clicks on a link the problem is in the mobile version I have a slide menu that open with one tag, or link, and the CSS icon is showing and never disappear.
I need to hide the CSS icon after 3 sec, this is my code.
$('a').click(function(){
$('.loadingDiv').fadeIn('slow', function(){
$('.loadingDiv').delay(3000).fadeOut();
});
$('<div class="loadingDiv mobileShow"></div>').prependTo(document.body);
});
.loadingDiv {
position: fixed;
left: 45%;
top: 30%;
width: 100%;
height: 100%;
z-index: 9999;
opacity: .5;
width: 40px;
height: 40px;
background-color: #333;
width: 40px;
height: 40px;
background-color: #333;
margin: 100px auto;
-webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
animation: sk-rotateplane 1.2s infinite ease-in-out;
}
#-webkit-keyframes sk-rotateplane {
0% { -webkit-transform: perspective(120px) }
50% { -webkit-transform: perspective(120px) rotateY(180deg) }
100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg) }
}
#keyframes sk-rotateplane {
0% {
transform: perspective(120px) rotateX(0deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
} 50% {
transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
} 100% {
transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
}
}
But is not working, any help will be great, because the

Don't forget about setTimeout.
You can simply:
setTimeout(function () {
... do the fading out here ...
}, 3000);
I always prefer vanila-js solution over jQuery one. ;)
Cheers!

Why isn't this :after element working?

I have a preloader on my page which should be displaying an animation. The animation should be showing on top of the dark black background before the page has loaded... but the animation is not displaying.
http://www.samnorris.net/portfolio-ss/
The animation works if I put it's CSS into #windowloader, but because I need it to be on top of a solid background (to hide unloaded content...) I thought to put it into an :after pseudo-class to load it on top of the #windowloader div... but for some reason this is not working.
is my CSS incorrect, or something else...?
Here is the Codepen which shows the animation that should be displaying:
http://codepen.io/devilishalchemist/pen/emOVYQ
HTML:
<div id="windowloader">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
Relevant CSS from my page:
/* ==========================================================================
PAGE LOADER
========================================================================== */
.nonscroll {
overflow: hidden;
}
#windowloader {
overflow: auto;
top:0;
left: 0;
width: 100%;
height: 100%;
position: fixed;
z-index: 999998;
display: table;
background: $black;
}
#windowloader {
&:after {
content: '';
display: block;
position: absolute;
z-index: 999999;
top: 50%;
left: 50%;
width: 80px;
height: 80px;
transform: translate(-50%, -50%) rotate(45deg) translate3d(0, 0, 0);
animation: loader 1.2s infinite ease-in-out;
span {
position: absolute;
display: block;
width: 40px;
height: 40px;
background-color: #EE4040;
animation: loaderBlock 1.2s infinite ease-in-out both;
&:nth-child(1) {
top: 0;
left: 0;
}
&:nth-child(2) {
top: 0;
right: 0;
animation: loaderBlockInverse 1.2s infinite ease-in-out both;
}
&:nth-child(3) {
bottom: 0;
left: 0;
animation: loaderBlockInverse 1.2s infinite ease-in-out both;
}
&:nth-child(4) {
bottom: 0;
right: 0;
}
}
/*LOAD FINISH*/
.loaded {
top: -100%;
}
}
}
#keyframes loader {
0%, 10%, 100% {
width: 80px;
height: 80px;
}
65% {
width: 150px;
height: 150px;
}
}
#keyframes loaderBlock {
0%, 30% {
transform: rotate(0);
}
55% {
background-color: #F37272;
}
100% {
transform: rotate(90deg);
}
}
#keyframes loaderBlockInverse {
0%, 20% {
transform: rotate(0);
}
55% {
background-color: #F37272;
}
100% {
transform: rotate(-90deg);
}
}
FWIW, I have also tried:
#windowloader:after { }
Javascript:
///////////////////////////////////////////////////////////////////////////
// Window Loader
///////////////////////////////////////////////////////////////////////////
$("#windowloader").transitioncss("transitionEndOpen","loaded",{duration:2000,delay:1000});
$("#windowloader").off("transitionEndOpen").on( "transitionEndOpen", function(){
$("body").removeClass('nonscroll');
$("#windowloader").remove();
$("#portfoliogrid").isotope('layout');
$("#isotopeMembers").isotope('layout');
$(".isotopeBlog").isotope('layout');
});

Bah, nevermind - I just put the animation in a separate div inside the #windowloader div which probably works well enough I guess..

get #keyframe current value in css3 with javascript

See the demo here:
http://jsfiddle.net/hamidrezabstn/fgcPa/5/
When I click on the middle raindrop , I would like it to rotate to the current position of the spinning circle! I tried below the JS code but it doesn't work! The next thing I want to do is the raindrop rotate with spining circle!
$(function() {
$('#center').click(function() {
var pos = $('#circle').css('transform')
$(this).css('transform', 'pos')
});
});

$(function() {
$('#center').click(function() {
var obj, matrix;
obj = document.getElementById('circle');
matrix = getComputedStyle(obj).getPropertyValue('transform');
console.log(matrix);
//$(this).css('transform', matrix)
});
});
read more here http://dev.opera.com/articles/view/understanding-3d-transforms/

EDITED: I said that it is not posible to get the current status of the transform in an animation, but I was wrong. Sorry about that !
To do what you want, any way, you don't need really to get it; just use it.
I have changed slightly your HTML to put the raindrop inside the rotating div.
Then, with this CSS:
.raindrop {
background:center blue;
width:50px;
height:50px;
border-radius: 100%;
border-top-left-radius: 0;
position: absolute;
margin: auto;
left: 75px;
top: 75px;
animation: ccircle 5s infinite linear;
-webkit-animation: ccircle 5s infinite linear;
}
.raindrop:hover {
animation: none;
-webkit-animation: none;
}
.axis {
width: 200px;
height: 200px;
transform: scaleX(2);
background-color: none;
border: 1px solid black;
left: 50px;
position: absolute;
top: 50px;
border-radius: 50%;
}
.rotate {
width: 100%;
height: 100%;
top: 0px;
animation: circle 5s infinite linear;
-webkit-animation: circle 5s infinite linear;
transform-origin: 50% 50%;
-webkit-transform-origin: 50% 50%;
position: absolute;
}
.counterrotate {
width: 50px;
height: 50px;
animation: ccircle 5s infinite linear;
-webkit-animation: ccircle 5s infinite linear;
}
.planet {
width: 50px;
height: 50px;
position: absolute;
border-radius : 50px;
left: 0px;
top: 0px;
background-color: red;
display: block;
}
#keyframes circle {
from { transform: rotateZ(0deg) }
to { transform: rotateZ(360deg) }
}
#-webkit-keyframes circle {
0% { -webkit-transform: rotateZ(0deg) }
100% { -webkit-transform: rotateZ(360deg) }
}
#keyframes ccircle {
from { transform: rotateZ(360deg) }
to { transform: rotateZ(0deg) }
}
#-webkit-keyframes ccircle {
from { -webkit-transform: rotateZ(360deg) }
to { -webkit-transform: rotateZ(0deg) }
}
You got this fiddle
In it, the raindrop is always rotating with the axis div. But it is also counter-rotating, so it appears to be static.
When you hover it, the count-rotation is disabled, and it points to red circle. And will continue to do so as long as you hover it.
To do that thru a click, just asociate the :hover properties to a class, and set this class in the click.