Develop Reference

CSS Animation not working as expected, only after saving my file

I have a CSS animation for a group of spans that make out a word. I am having trouble getting them to work properly. It seems on page load or refresh, they don't work. They only work after I manually save my project file.
Here is the CSS:
.word {
margin: 2rem;
}
.word span {
cursor: pointer;
display: inline-block;
font-size: 4vw;
user-select: none;
line-height: 0.8;
animation-iteration-count: 1;
}
.word span:nth-child(1).active {
animation: balance 1.5s ease-out;
transform-origin: bottom left;
}
#keyframes balance {
0%,
100% {
transform: rotate(100deg);
}
30%,
60% {
transform: rotate(-45deg);
}
}
.word span:nth-child(2).active {
animation: shrinkjump 1s ease-in-out;
transform-origin: bottom center;
}
#keyframes shrinkjump {
10%,
35% {
transform: scale(2, 0.2) translate(0, 0);
}
45%,
50% {
transform: scale(1) translate(0, -150px);
}
80% {
transform: scale(1) translate(0, 0);
}
}
.word span:nth-child(3).active {
animation: falling 2s ease-out;
transform-origin: bottom center;
}
#keyframes falling {
12% {
transform: rotateX(240deg);
}
24% {
transform: rotateX(150deg);
}
36% {
transform: rotateX(200deg);
}
48% {
transform: rotateX(175deg);
}
60%,
85% {
transform: rotateX(180deg);
}
100% {
transform: rotateX(0deg);
}
}
.word span:nth-child(4).active {
animation: rotate 1s ease-out;
}
#keyframes rotate {
20%,
80% {
transform: rotateY(180deg);
}
100% {
transform: rotateY(360deg);
}
}
.word span:nth-child(5).active {
animation: shrinkjump 1s ease-in-out;
transform-origin: bottom center;
}
.word span:nth-child(6).active {
animation: falling 2s ease-out;
transform-origin: bottom center;
}
.word span:nth-child(7).active {
animation: toplong 1.5s linear;
}
.word span:nth-child(8).active {
animation: balance 1.5s ease-out;
transform-origin: top left;
}
#keyframes toplong {
10%,
40% {
transform: translateY(-48vh) scaleY(1);
}
90% {
transform: translateY(-48vh) scaleY(4);
}
}
And here is the JavaScript to change the className:
const spans = document.querySelectorAll(".word span");
spans.forEach((span, idx) => {
span.addEventListener("click", (e) => {
e.target.classList.add("active");
});
span.addEventListener("animationend", (e) => {
e.target.classList.remove("active");
});
});
Does anyone have any idea why the css is behaving this way? I have experimented with a timeout and with the JavaScript to udpate the className. Thanks!

positioning of an SVG based on the animation SVG

I'm trying to make a submarine (SVG) seem as if it's floating on top of a
wave (also SVG).
Since the wave is constantly going up and down, I want the submarine to be centered vertically (x), but be moving horizontally on top of the wave.
This is the code for the wave
// best seen at 1500px or less
html, body { height: 100%; }
body {
background:radial-gradient(ellipse at center, rgba(255,254,234,1) 0%, rgba(255,254,234,1) 35%, #B7E8EB 100%);
overflow: hidden;
}
.ocean {
height: 5%;
width:100%;
position:absolute;
bottom:0;
left:0;
background: #015871;
}
.wave {
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/85486/wave.svg) repeat-x;
position: absolute;
top: -198px;
width: 6400px;
height: 198px;
animation: wave 7s cubic-bezier( 0.36, 0.45, 0.63, 0.53) infinite;
transform: translate3d(0, 0, 0);
}
.wave:nth-of-type(2) {
top: -175px;
animation: wave 7s cubic-bezier( 0.36, 0.45, 0.63, 0.53) -.125s infinite, swell 7s ease -1.25s infinite;
opacity: 1;
}
#keyframes wave {
0% {
margin-left: 0;
}
100% {
margin-left: -1600px;
}
}
#keyframes swell {
0%, 100% {
transform: translate3d(0,-25px,0);
}
50% {
transform: translate3d(0,5px,0);
}
}
<div class="ocean">
<div class="wave"></div>
<div class="wave"></div>
</div>

I added a class called 'sub' to get your picture formatted and also to add the animation. Notice I added the 'ease-out' as the animation timing function so that it goes down fast but up slower to keep up with the wave timing. But this is also just a result of tweaking the parameters and the animation 'updown' just right so that its working in the opposite direction to the wave based on how it starts. This is one way to do it, if you want to tweak the height or the ease out just change the seconds on ease-out in the 'sub' class or tweak the pixel count in the updown function. Hope this helps!
// best seen at 1500px or less
html, body { height: 100%; }
body {
background:radial-gradient(ellipse at center, rgba(255,254,234,1) 0%, rgba(255,254,234,1) 35%, #B7E8EB 100%);
overflow: hidden;
}
.sub{
position: absolute;
top: 85%;
left: 50%;
width: 100px;
height: 100px;
margin-top: -100px; /* Start height margin */
margin-left: -50px; /* Half the width */
animation: updown 7s cubic-bezier(0.42, 0, 0.58, 1) infinite;
animation-timing-function:ease-in-out;
transform: translate3d(0, 0, 0);
}
.ocean {
height: 5%;
width:100%;
position:absolute;
bottom:0;
left:0;
background: #015871;
}
.wave {
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/85486/wave.svg) repeat-x;
position: absolute;
top: -198px;
width: 6400px;
height: 198px;
animation: wave 7s cubic-bezier(0.36, 0.48, 0.63, 0.53) infinite;
transform: translate3d(0, 0, 0);
}
.wave:nth-of-type(2) {
top: -175px;
animation: wave 7s cubic-bezier( 0.36, 0.45, 0.63, 0.53) -.125s infinite,
swell 7s ease -1.25s infinite;
opacity: 1;
}
#keyframes wave {
0% {
margin-left: 0;
}
100% {
margin-left: -1600px;
}
}
#keyframes swell {
0%, 100% {
transform: translate3d(0,-25px,0);
}
50% {
transform: translate3d(0,5px,0);
}
}
#keyframes updown {
0%, 100% {
transform: translate3d(0,-40px,0);
}
70% {
transform: translate3d(0,45px,0);
}
}
<img class = "sub" src = "https://image.flaticon.com/icons/svg/447/447773.svg">
<div class="ocean">
<div class="wave"></div>
<div class="wave"></div>
</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!

Reverse backward animation doesn't apply properly on mouseout event

I'm trying to apply animation on mouseover event (works fine) and the same animation with reverse and backwards properties, to play it back on mouseleave. But the second part doesn't work properly. Finally i want the animation plays forward on mouseover and backward on mouseleave. And if there is a way to apply next animation from that point, where the previous was stopped, please, include it in your answer. Here is my code:
const target = document.getElementById("animated");
target.addEventListener("mouseover", animateForward);
target.addEventListener("mouseout", animateBackward);
function animateForward() {
target.style.animation = 'custom 1.6s forwards';
}
function animateBackward() {
target.style.animation = 'custom 1.6s reverse backwards';
}
/* Safari 4.0 - 8.0 */
#-webkit-keyframes custom {
25% {
border-radius: 50% 0 0 0;
}
50% {
border-radius: 50% 50% 0 0;
}
75% {
border-radius: 50% 50% 50% 0;
}
100% {
border-radius: 50% 50% 50% 50%;
background-color: violet;
}
}
/* Standard syntax */
#keyframes custom {
25% {
border-radius: 50% 0 0 0;
}
50% {
border-radius: 50% 50% 0 0;
}
75% {
border-radius: 50% 50% 50% 0;
}
100% {
border-radius: 50% 50% 50% 50%;
background-color: violet;
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
}
div {
border: 1px black solid;
width: 100px;
height: 100px;
margin: 50px;
}
<div id="animated"></div>
And here is JsFiddle.

For a CSS only solution, leave the #keyframes, and use transitions instead. When dealing with :hover, transitions are almost always what you really need.
E.g, all the properties of your animation can be set independently, and thus they can have their own transition rules.
So your animation could be converted by the following transition, where each keyframe has been replaced by a trio transition-property-transtion-duration-transition-delay.
div {
border: 1px black solid;
width: 100px;
height: 100px;
margin: 50px;
/* define all the props */
transition-property:
transform,
background-color,
border-top-left-radius,
border-top-right-radius,
border-bottom-right-radius,
border-bottom-left-radius;
/* set their duration independently */
transition-duration: 1.6s, 1.6s, 0.4s, 0.4s, 0.4s, 0.4s;
/* same for delays */
transition-delay: 0s, 0s, 0s, 0.4s, 0.8s, 1.2s;
}
div:hover{
border-radius: 50%;
background-color: violet;
transform: rotate(180deg);
}
<div id="animated"></div>

You need to play with the animation-iteration-count in order to fix this:
const target = document.getElementById("animated");
target.addEventListener("mouseover", animateForward);
target.addEventListener("mouseout", animateBackward);
function animateForward() {
target.style.animation = '';
setTimeout(function() {
target.style.animation = 'custom 1.6s forwards';
target.style.animationIterationCount = '1';
}, 0)
}
function animateBackward() {
target.style.animation = 'custom 1.6s reverse backwards';
target.style.animationIterationCount = '2';
}
/* Safari 4.0 - 8.0 */
#-webkit-keyframes custom {
25% {
border-radius: 50% 0 0 0;
}
50% {
border-radius: 50% 50% 0 0;
}
75% {
border-radius: 50% 50% 50% 0;
}
100% {
border-radius: 50% 50% 50% 50%;
background-color: violet;
}
}
/* Standard syntax */
#keyframes custom {
25% {
border-radius: 50% 0 0 0;
}
50% {
border-radius: 50% 50% 0 0;
}
75% {
border-radius: 50% 50% 50% 0;
}
100% {
border-radius: 50% 50% 50% 50%;
background-color: violet;
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
}
div {
border: 1px black solid;
width: 100px;
height: 100px;
margin: 50px;
}
<div id="animated"></div>

Bouncing arrow css - does not work?

I'm trying to do a mixture of three different things. A menu that appears half way down a screen after scrolling, a bouncing arrow and a side menu that opens once clicked.
This is an example page with all of these "attempts" are being made: http://www.new.techmoney360.com/youll-never-look-at-an-rpg-the-same-again/
(it is made in wordpress btw)
If you scroll half way down, you will see the menu appear on the left.
There are tons of issues with this I can see, but I will fix them as I go. Currently the one that is driving me nuts is a bouncing arrow.
This is what I am trying to replicate: https://codepen.io/dodozhang21/pen/siKtp
The arrow does not bounce, and I am not sure why? I got a new image for the arrow to the left, positioned it correctly and such. Can anyone give me some advice?
Here is the code for what I have done trying to implement this:
html:
<div id="sliderr" >
<div class="arrow bounce">
</div>
<span style="font-size:30px;cursor:pointer;" onclick="openNav()">Explore More</span>
</div>
css (regarding the bouncing arrow):
#import "compass/css3";
#include keyframes(bounce) {
0%, 20%, 50%, 80%, 100% {
#include transform(translateY(0));
}
40% {
#include transform(translateY(-30px));
}
60% {
#include transform(translateY(-15px));
}
}
.arrow {
position: fixed;
bottom: 40%;
left: 0;
margin-left:-20px;
width: 40px;
height: 40px;
background-image: url("http://www.new.techmoney360.com/wp-content/uploads/2016/06/left-arrow-a.png");
background-size: contain;
}
.bounce {
#include animation(bounce 2s infinite);
}
css with apearing menu:
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s
}
.sidenav a:hover, .offcanvas a:focus{
color: #f1f1f1;
}
.closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px !important;
margin-left: 50px;
}
#sliderr {
position:fixed;
top: 100px;
left: 0px;
height: 300px;
width: 130px;
background: #FFF;
margin-left: -200px;
z-index:9;
}
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}

More than likely your issue is that you are using the CSS from the example codepen link as is but you are not using the same kind of preprocessor for your CSS. Give this a try change your .bouncs and #keyframes css to the following:
.bounce {
-moz-animation: bounce 2s infinite;
-webkit-animation: bounce 2s infinite;
animation: bounce 2s infinite;
}
#-moz-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-moz-transform: translateY(0);
transform: translateY(0);
}
40% {
-moz-transform: translateY(-30px);
transform: translateY(-30px);
}
60% {
-moz-transform: translateY(-15px);
transform: translateY(-15px);
}
}
#-webkit-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
40% {
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
60% {
-webkit-transform: translateY(-15px);
transform: translateY(-15px);
}
}
#keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-webkit-transform: translateY(0);
transform: translateY(0);
}
40% {
-moz-transform: translateY(-30px);
-ms-transform: translateY(-30px);
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
60% {
-moz-transform: translateY(-15px);
-ms-transform: translateY(-15px);
-webkit-transform: translateY(-15px);
transform: translateY(-15px);
}
}
If it works now then you are not using SASS or SCSS or any kind of CSS preprocessor. To see the css you need to use make sure to press the "View Compiled" button at the top right of the css window on codepen. It will spit out CSS you can use wihtout passing it through a compiler. Also note that this css includes vendor prefixes so it works cross browser.