Continue CSS3 Keyframes Animation on Hover / Stop Repeat on Hover - javascript

I have a CSS3 animation set up and I just want to change the box-shadow color on hover. However, when I do it, the animation abruptly resets. Is there any way to continue the seamless animation on hover with no jumping? If I need to use javascript or jquery, that's fine, but I'd prefer if there was a CSS3 solution. Any help is appreciated.
table {
max-width:1000px!important;
padding:15px;
word-wrap:
break-word;
background-color:#ffffff;
border: 7px solid #454ce9;
animation: glowing 5000ms infinite;
}
table:hover {
animation: glowing2 5000ms infinite;
}
#keyframes glowing {
0% { box-shadow: 0 0 -10px #e9458a; }
40% { box-shadow: 0 0 20px #e9458a; }
60% { box-shadow: 0 0 20px #e9458a;}
100% { box-shadow: 0 0 -10px #e9458a;}
}
#-webkit-keyframes glowing {
0% { box-shadow: 0 0 -10px #e9458a; }
40% { box-shadow: 0 0 20px #e9458a; }
60% { box-shadow: 0 0 20px #e9458a;}
100% { box-shadow: 0 0 -10px #e9458a;}
}
#keyframes glowing2 {
0% { box-shadow: 0 0 -10px #ad45e9; }
40% { box-shadow: 0 0 20px #ad45e9; }
60% { box-shadow: 0 0 20px #ad45e9;}
100% { box-shadow: 0 0 -10px #ad45e9;}
}
#-webkit-keyframes glowing2 {
0% { box-shadow: 0 0 -10px #ad45e9; }
40% { box-shadow: 0 0 20px #ad45e9; }
60% { box-shadow: 0 0 20px #ad45e9;}
100% { box-shadow: 0 0 -10px #ad45e9;}
}
<table border="10"><tr><td colspan="2">Hover over me</td></tr></table>


To do hover animations, transition is a great feature that reverse the animation when unhover.
table {
max-width:1000px!important;
padding:15px;
word-wrap:
break-word;
background-color:#ffffff;
border: 7px solid #454ce9;
box-shadow: 0 0 -10px #e9458a;
transition: box-shadow 2500ms;
}
table:hover {
box-shadow: 0 0 20px #e9458a;
}
<table border="10"><tr><td colspan="2">Hover over me</td></tr></table>
If to still use animation, use animation-play-state and animation-fill-mode: forwards to make it run when hovered and keep state when unhovered
In below sample I used their longhand properties, though they can be added to the shorthand, i.e. like this for the animation-fill-mode animation: glowing 5000ms infinite forwards;.
I would keep animation-play-state as longhand, as it won't work on IE (and, if I remember correct, on older versions of Edge).
Note, negative <blur-radius> values on box-shadow is not allowed (and I noticed it won't work on IE/Edge but it did on Chrome)
table {
max-width:1000px!important;
padding:15px;
word-wrap:
break-word;
background-color:#ffffff;
border: 7px solid #454ce9;
animation: glowing 5000ms infinite;
animation-fill-mode: forwards; /* persist state */
animation-play-state: paused; /* pause the animation */
}
table:hover {
animation-play-state: running; /* play the animation */
}
#keyframes glowing {
0% { box-shadow: 0 0 0px #e9458a; }
40% { box-shadow: 0 0 20px #e9458a; }
60% { box-shadow: 0 0 20px #e9458a;}
100% { box-shadow: 0 0 0px #e9458a;}
}
#-webkit-keyframes glowing {
0% { box-shadow: 0 0 0px #e9458a; }
40% { box-shadow: 0 0 20px #e9458a; }
60% { box-shadow: 0 0 20px #e9458a;}
100% { box-shadow: 0 0 0px #e9458a;}
}
<table border="10"><tr><td colspan="2">Hover over me</td></tr></table>
Updated based on a comment
It is also possible to change color during the animation
table {
max-width:1000px!important;
padding:15px;
word-wrap: break-word;
background-color:#ffffff;
border: 7px solid #454ce9;
animation: glowing 5000ms infinite forwards;
animation-play-state: paused;
}
table:hover {
animation-play-state: running;
}
#keyframes glowing {
0% { box-shadow: 0 0 0px red; }
25% { box-shadow: 0 0 20px blue; }
50% { box-shadow: 0 0 20px green;}
75% { box-shadow: 0 0 20px yellow;}
100% { box-shadow: 0 0 0px red;}
}
<table border="10"><tr><td colspan="2">Hover over me</td></tr></table>


Sure, use this to stop it from jumping back once the animation is complete
animation-fill-mode: forwards;
Also seems to have been answered here - CSS Keyframe Animations on Hover - Animation Resetting with Mouse Movement

Related

How to make the loading screen disappear? html css js

I can't make the loading screen disappear i tried js but still the content is just for testing Here is the whole code any help would be appreciated be easy on me iam new to html css js
I can't make the loading screen disappear i tried js but still the content is just for testing Here is the whole code any help would be appreciated be easy on me iam new to html css js
I can't make the loading screen disappear i tried js but still the content is just for testing Here is the whole code any help would be appreciated be easy on me iam new to html css js
I can't make the loading screen disappear i tried js but still the content is just for testing Here is the whole code any help would be appreciated be easy on me iam new to html css js
body {
width: 100%;
height: 100%;
background: wheat;
}
.content {
display: flex;
position: absolute;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
#gif-wraper {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
}
#gif {
display: flex;
background: black;
padding: 10px;
height: 80px;
width: 80px;
border-radius: 50%;
position: fixed;
top: calc(50% - 40px);
left: calc(50% - 40px);
box-shadow: 178px 0 0 -25px black, 178px 0 0 -20px white, -178px 0 0 -25px black, -178px 0 0 -20px white, 0 0 0 20px black, 0 0 0 30px white, 0 0 0 130px black, 0 0 0 135px white;
-webkit-animation: rotate 3s linear infinite;
animation: rotate 3s linear infinite;
transition: opacity 0.3s linear;
}
#text {
font-family: 'Times New Roman', Times, serif;
position: fixed;
display: block;
top: calc(52% - 10px);
left: calc(50% - 10px);
right: calc(50% - 1px);
transform: translate(-50%, -50%);
/*box-shadow: black, white;*/
font-size: 30px;
}
#gif::before {
content: " ";
position: fixed;
height: 50px;
width: 50px;
border-radius: 50%;
top: -155px;
left: 20px;
background: black;
border: 5px solid white;
box-shadow: 0 355px 0 -5px black, 0 355px 0 0px white;
-webkit-animation: reverseRotate 3s linear infinite;
animation: reverseRotate 3s linear infinite;
}
#gif::after {
/* Segmented circle code goes here */
content: " ";
position: fixed;
height: 280px;
width: 280px;
left: -90px;
top: -90px;
background-image: url("data:image/svg+xml;base64, PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSAiaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmlld0JveD0iMCAwIDEwMCAxMDAiID4NCiAgICA8Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiByPSI0MCIgc3Ryb2tlLWRhc2hhcnJheT0iMC45NTIiIHN0cm9rZS13aWR0aD0iOCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJ3aGl0ZSIvPg0KPC9zdmc+");
background-repeat: no-repeat;
z-index: 2;
-webkit-animation: segmentRotate 300s linear infinite;
animation: segmentRotate 300s linear infinite;
}
#keyframes rotate {
0% {
transform: rotate( 0deg);
}
10%,
15%,
35%,
40%,
60%,
65%,
85%,
90% {
background: black;
box-shadow: 178px 0 0 -25px black, 178px 0 0 -20px white, -178px 0 0 -25px black, -178px 0 0 -20px white, 0 0 0 20px black, 0 0 0 30px white, 0 0 0 130px black, 0 0 0 135px white;
}
12.5%,
37.5%,
62.5%,
87.5% {
background: white;
box-shadow: 178px 0 0 -25px white, 178px 0 0 -20px white, -178px 0 0 -25px white, -178px 0 0 -20px white, 0 0 0 20px black, 0 0 0 30px white, 0 0 0 130px black, 0 0 0 135px white;
}
100% {
transform: rotate(360deg);
}
}
#keyframes reverseRotate {
0% {
transform: translateY(178px) rotate(0deg) translateY(-178px) rotate(0deg);
}
10%,
15%,
35%,
40%,
60%,
65%,
85%,
90% {
background: black;
box-shadow: 0 355px 0 -5px black, 0 355px 0 0px white;
}
12.5%,
37.5%,
62.5%,
87.5% {
background: white;
box-shadow: 0 355px 0 -5px white, 0 355px 0 0px white;
}
100% {
transform: translateY(178px) rotate(-720deg) translateY(-178px) rotate(0deg);
}
}
#keyframes segmentRotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(-32000deg);
}
}
#-webkit-keyframes rotate {
0% {
-webkit-transform: rotate( 0deg);
}
10%,
15%,
35%,
40%,
60%,
65%,
85%,
90% {
background: black;
box-shadow: 178px 0 0 -25px black, 178px 0 0 -20px white, -178px 0 0 -25px black, -178px 0 0 -20px white, 0 0 0 20px black, 0 0 0 30px white, 0 0 0 130px black, 0 0 0 135px white;
}
12.5%,
37.5%,
62.5%,
87.5% {
background: white;
box-shadow: 178px 0 0 -25px white, 178px 0 0 -20px white, -178px 0 0 -25px white, -178px 0 0 -20px white, 0 0 0 20px black, 0 0 0 30px white, 0 0 0 130px black, 0 0 0 135px white;
}
100% {
-webkit-transform: rotate(360deg);
}
}
#-webkit-keyframes reverseRotate {
0% {
-webkit-transform: translateY(178px) rotate(0deg) translateY(-178px) rotate(0deg);
}
10%,
15%,
35%,
40%,
60%,
65%,
85%,
90% {
background: black;
box-shadow: 0 355px 0 -5px black, 0 355px 0 0px white;
}
12.5%,
37.5%,
62.5%,
87.5% {
background: white;
box-shadow: 0 355px 0 -5px white, 0 355px 0 0px white;
}
100% {
-webkit-transform: translateY(178px) rotate(-720deg) translateY(-178px) rotate(0deg);
}
}
#-webkit-keyframes segmentRotate {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(-32000deg);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<script>
var loader = document.getElementById("gif-wraper");
window.onload = function() {
loader.style.display = 'none';
}
var x = 0;
function changeColor() {
var txtclr = document.getElementById("text");
var clr = ["black", "white"];
txtclr.style.color = clr[x];
x = (x + 1) % clr.length;
}
setInterval(changeColor, 300);
</script>
<body>
<div class="content">
<img src="https://picsum.photos/300/?random" />
</div>
<div id="gif-wraper">
<div id='gif'></div>
<div id="text">MK</div>
</div>
</body>
</html>

You should move var loader = document.getElementById("gif-wraper"); into onload event function like this:
window.onload = function () {
var loader = document.getElementById("gif-wraper");
loader.style.display = 'none';
}

The code you have returns this error:
Uncaught TypeError: Cannot read property 'style' of null
It is because document.getElementById("gif-wraper"); returns null
To fix this you need to place your script tag below the body tag, so that the script will be able to find the DOM element.

As you can see from the console, you have an error: "Uncaught TypeError: Cannot read property 'style' of null". This happens because you are trying to select the loader before it actually exists. You simply have to move the line var loader = document.getElementById("gif-wraper"); inside the window.onload function.
body {
width: 100%;
height: 100%;
background: wheat;
}
.content {
display: flex;
position: absolute;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
#gif-wraper {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
}
#gif {
display: flex;
background: black;
padding: 10px;
height: 80px;
width: 80px;
border-radius: 50%;
position: fixed;
top: calc(50% - 40px);
left: calc(50% - 40px);
box-shadow: 178px 0 0 -25px black, 178px 0 0 -20px white, -178px 0 0 -25px black, -178px 0 0 -20px white, 0 0 0 20px black, 0 0 0 30px white, 0 0 0 130px black, 0 0 0 135px white;
-webkit-animation: rotate 3s linear infinite;
animation: rotate 3s linear infinite;
transition: opacity 0.3s linear;
}
#text {
font-family: 'Times New Roman', Times, serif;
position: fixed;
display: block;
top: calc(52% - 10px);
left: calc(50% - 10px);
right: calc(50% - 1px);
transform: translate(-50%, -50%);
/*box-shadow: black, white;*/
font-size: 30px;
}
#gif::before {
content: " ";
position: fixed;
height: 50px;
width: 50px;
border-radius: 50%;
top: -155px;
left: 20px;
background: black;
border: 5px solid white;
box-shadow: 0 355px 0 -5px black, 0 355px 0 0px white;
-webkit-animation: reverseRotate 3s linear infinite;
animation: reverseRotate 3s linear infinite;
}
#gif::after {
/* Segmented circle code goes here */
content: " ";
position: fixed;
height: 280px;
width: 280px;
left: -90px;
top: -90px;
background-image: url("data:image/svg+xml;base64, PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSAiaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmlld0JveD0iMCAwIDEwMCAxMDAiID4NCiAgICA8Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiByPSI0MCIgc3Ryb2tlLWRhc2hhcnJheT0iMC45NTIiIHN0cm9rZS13aWR0aD0iOCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJ3aGl0ZSIvPg0KPC9zdmc+");
background-repeat: no-repeat;
z-index: 2;
-webkit-animation: segmentRotate 300s linear infinite;
animation: segmentRotate 300s linear infinite;
}
#keyframes rotate {
0% {
transform: rotate( 0deg);
}
10%,
15%,
35%,
40%,
60%,
65%,
85%,
90% {
background: black;
box-shadow: 178px 0 0 -25px black, 178px 0 0 -20px white, -178px 0 0 -25px black, -178px 0 0 -20px white, 0 0 0 20px black, 0 0 0 30px white, 0 0 0 130px black, 0 0 0 135px white;
}
12.5%,
37.5%,
62.5%,
87.5% {
background: white;
box-shadow: 178px 0 0 -25px white, 178px 0 0 -20px white, -178px 0 0 -25px white, -178px 0 0 -20px white, 0 0 0 20px black, 0 0 0 30px white, 0 0 0 130px black, 0 0 0 135px white;
}
100% {
transform: rotate(360deg);
}
}
#keyframes reverseRotate {
0% {
transform: translateY(178px) rotate(0deg) translateY(-178px) rotate(0deg);
}
10%,
15%,
35%,
40%,
60%,
65%,
85%,
90% {
background: black;
box-shadow: 0 355px 0 -5px black, 0 355px 0 0px white;
}
12.5%,
37.5%,
62.5%,
87.5% {
background: white;
box-shadow: 0 355px 0 -5px white, 0 355px 0 0px white;
}
100% {
transform: translateY(178px) rotate(-720deg) translateY(-178px) rotate(0deg);
}
}
#keyframes segmentRotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(-32000deg);
}
}
#-webkit-keyframes rotate {
0% {
-webkit-transform: rotate( 0deg);
}
10%,
15%,
35%,
40%,
60%,
65%,
85%,
90% {
background: black;
box-shadow: 178px 0 0 -25px black, 178px 0 0 -20px white, -178px 0 0 -25px black, -178px 0 0 -20px white, 0 0 0 20px black, 0 0 0 30px white, 0 0 0 130px black, 0 0 0 135px white;
}
12.5%,
37.5%,
62.5%,
87.5% {
background: white;
box-shadow: 178px 0 0 -25px white, 178px 0 0 -20px white, -178px 0 0 -25px white, -178px 0 0 -20px white, 0 0 0 20px black, 0 0 0 30px white, 0 0 0 130px black, 0 0 0 135px white;
}
100% {
-webkit-transform: rotate(360deg);
}
}
#-webkit-keyframes reverseRotate {
0% {
-webkit-transform: translateY(178px) rotate(0deg) translateY(-178px) rotate(0deg);
}
10%,
15%,
35%,
40%,
60%,
65%,
85%,
90% {
background: black;
box-shadow: 0 355px 0 -5px black, 0 355px 0 0px white;
}
12.5%,
37.5%,
62.5%,
87.5% {
background: white;
box-shadow: 0 355px 0 -5px white, 0 355px 0 0px white;
}
100% {
-webkit-transform: translateY(178px) rotate(-720deg) translateY(-178px) rotate(0deg);
}
}
#-webkit-keyframes segmentRotate {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(-32000deg);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<script>
window.onload = function() {
var loader = document.getElementById("gif-wraper");
loader.style.display = 'none';
}
var x = 0;
function changeColor() {
var txtclr = document.getElementById("text");
var clr = ["black", "white"];
txtclr.style.color = clr[x];
x = (x + 1) % clr.length;
}
setInterval(changeColor, 300);
</script>
<body>
<div class="content">
<img src="https://picsum.photos/300/?random" />
</div>
<div id="gif-wraper">
<div id='gif'></div>
<div id="text">MK</div>
</div>
</body>
</html>

Unable to reuse SASS #mixin: Previous parameter value being used again

I have 3x circle icons (based on font-awesome icons) and I am trying to add a glow effect using sass #mixin.
_mixins.scss
#mixin textGlow($glowColor: 0){
#keyframes glow{
from {
text-shadow: 0 0 1px $glowColor, 0 0 2px $glowColor, 0 0 3px $glowColor;
}
to {
text-shadow: 0 0 3px lighten($glowColor, 5%), 0 0 4px lighten($glowColor, 15%), 0 0 5px lighten($glowColor, 30%);
}
}
#-webkit-keyframes glow{
from {
text-shadow: 0 0 1px $glowColor, 0 0 2px $glowColor, 0 0 3px $glowColor;
}
to {
text-shadow: 0 0 3px lighten($glowColor, 5%), 0 0 4px lighten($glowColor, 15%), 0 0 5px lighten($glowColor, 30%);
}
}
-webkit-animation: glow 1s ease-in-out infinite alternate;
-moz-animation: glow 1s ease-in-out infinite alternate;
animation: glow 1s ease-in-out infinite alternate;
}
app.component.scss
#import '../styles/variables';
#import '../styles/mixins';
i.fa-circle.good{
color: $my-green;
#include textGlow($my-green);
}
i.fa-circle.bad{
color: $my-red;
#include textGlow($my-red);
}
_variables.scss
$my-green: #00BB9C;
$my-red: #FB4D62;
However, as you can see, there's a red glow around the green icons even though I have passed in $my-red for .bad class.
The last color parameter passed in to the #mixin will always cause all the glows to have that same last colour.
I have read a few tutorials on #mixin so far to try and figure out if I have used #mixin incorrectly, but I couldn't figure out my mistake. I have tried re-assigning to a local $local-colour variable in the mixin but to no avail.
Isn't the purpose of mixin to allow a bunch of css properties to be reused? Could someone please point out how am I using #mixin wrongly? Or if I shouldn't even be using #mixin in this situation?
I have recreated a Stackblitz example

The problem is with the keyframe name that you are using. The following change should help you.
mixins.scss
#mixin textGlow($name, $glowColor){
#keyframes #{$name}{
from {
text-shadow: 0 0 1px $glowColor, 0 0 2px $glowColor, 0 0 3px $glowColor;
}
to {
text-shadow: 0 0 3px lighten($glowColor, 5%), 0 0 4px lighten($glowColor, 15%), 0 0 5px lighten($glowColor, 30%);
}
}
#-webkit-keyframes #{$name}{
from {
text-shadow: 0 0 1px $glowColor, 0 0 2px $glowColor, 0 0 3px $glowColor;
}
to {
text-shadow: 0 0 3px lighten($glowColor, 5%), 0 0 4px lighten($glowColor, 15%), 0 0 5px lighten($glowColor, 30%);
}
}
-webkit-animation: $name 1s ease-in-out infinite alternate;
-moz-animation: $name 1s ease-in-out infinite alternate;
animation: $name 1s ease-in-out infinite alternate;
}
app.component.scss
i.fa-circle.good{
color: $my-green;
#include textGlow('greenglow', $my-green);
}
i.fa-circle.bad{
color: $my-red;
#include textGlow('redglow', $my-red);
}

Is there a way to make a CSS animation not run till the object animated isn't visible?

So, I have some animations running on a page that I'm working on, and I'd like to know if there's a way to make the animations NOT run 'till the animated element(s) are visible on-screen
I've already done some research but the things I have tried (a couple of scripts, actually) didn't work..
Sorry for the size of the CSS code, it's the animation and I left the comment there because I didn't write the animation code.
.text-pop-up-top {
-webkit-animation: text-pop-up-top 0.5s cubic-bezier(0.600, -0.280, 0.735, 0.045) 1s both;
animation: text-pop-up-top 0.5s cubic-bezier(0.600, -0.280, 0.735, 0.045) 1s both;
}
/* ----------------------------------------------
* Generated by Animista on 2019-10-22 1:23:40
* Licensed under FreeBSD License.
* See http://animista.net/license for more info.
* w: http://animista.net, t: #cssanimista
* ---------------------------------------------- */
#-webkit-keyframes text-pop-up-top {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
text-shadow: none;
}
100% {
-webkit-transform: translateY(-50px);
transform: translateY(-50px);
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
text-shadow: 0 1px 0 #cccccc, 0 2px 0 #cccccc, 0 3px 0 #cccccc, 0 4px 0 #cccccc, 0 5px 0 #cccccc, 0 6px 0 #cccccc, 0 7px 0 #cccccc, 0 8px 0 #cccccc, 0 9px 0 #cccccc, 0 50px 30px rgba(0, 0, 0, 0.3);
}
}
#keyframes text-pop-up-top {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
text-shadow: none;
}
100% {
-webkit-transform: translateY(-50px);
transform: translateY(-50px);
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
text-shadow: 0 1px 0 #cccccc, 0 2px 0 #cccccc, 0 3px 0 #cccccc, 0 4px 0 #cccccc, 0 5px 0 #cccccc, 0 6px 0 #cccccc, 0 7px 0 #cccccc, 0 8px 0 #cccccc, 0 9px 0 #cccccc, 0 50px 30px rgba(0, 0, 0, 0.3);
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" rel="stylesheet"/>
<i class="fas fa-at text-pop-up-top" style="font-size: 100px; color: #1f8293;"></i>
The expected results are, like above, for the animation to begin once the user has scrolled down enough so the element being animated is visible on the screen. Right now the problems I have seen arise are that the animation just starts once the page loads, without the icon being visible, and 2, the animation not happening at all.

Since I'm guessing you're new to code of all sorts, here's a quick example using wowjs and since you stated you tried and it didn't work I can only guess you didn't initialize it, or the file path to the js file you should have saved locally is not correct. Either way, run the snippet attached and cheers!
new WOW().init();
.text-pop-up-top {
-webkit-animation: text-pop-up-top 0.5s cubic-bezier(0.600, -0.280, 0.735, 0.045) 1s both;
animation: text-pop-up-top 0.5s cubic-bezier(0.600, -0.280, 0.735, 0.045) 1s both;
}
/* ----------------------------------------------
* Generated by Animista on 2019-10-22 1:23:40
* Licensed under FreeBSD License.
* See http://animista.net/license for more info.
* w: http://animista.net, t: #cssanimista
* ---------------------------------------------- */
#-webkit-keyframes text-pop-up-top {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
text-shadow: none;
}
100% {
-webkit-transform: translateY(-50px);
transform: translateY(-50px);
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
text-shadow: 0 1px 0 #cccccc, 0 2px 0 #cccccc, 0 3px 0 #cccccc, 0 4px 0 #cccccc, 0 5px 0 #cccccc, 0 6px 0 #cccccc, 0 7px 0 #cccccc, 0 8px 0 #cccccc, 0 9px 0 #cccccc, 0 50px 30px rgba(0, 0, 0, 0.3);
}
}
#keyframes text-pop-up-top {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
text-shadow: none;
}
100% {
-webkit-transform: translateY(-50px);
transform: translateY(-50px);
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
text-shadow: 0 1px 0 #cccccc, 0 2px 0 #cccccc, 0 3px 0 #cccccc, 0 4px 0 #cccccc, 0 5px 0 #cccccc, 0 6px 0 #cccccc, 0 7px 0 #cccccc, 0 8px 0 #cccccc, 0 9px 0 #cccccc, 0 50px 30px rgba(0, 0, 0, 0.3);
}
}
<script src="https://wowjs.uk/dist/wow.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" rel="stylesheet"/>
<h1>scroll down....</h1>
PS, notice we don't care about any animate.css stuff at all..
<br/><br/><br/>
<br/><br/><br/>
<br/><br/><br/>
<br/><br/><br/>
<br/><br/><br/>
<br/><br/><br/>
<br/><br/><br/>
<br/><br/><br/>
<br/><br/><br/>
<br/><br/><br/>
<br/><br/><br/>
<br/><br/><br/>
<br/><br/><br/>
<br/><br/><br/>
<br/><br/><br/>
<br/><br/><br/>
<br/><br/><br/>
<br/><br/><br/>
<br/><br/><br/>
<br/><br/><br/>
<br/><br/><br/>
<br/><br/><br/>
<i class="fas fa-at wow text-pop-up-top" style="font-size: 100px; color: #1f8293;"></i>

How to smoothly insert box shadow efffect on mouseover?

How to create a smooth text input box shadow effect like on this website

Use the CSS3:
#element {
/* all your styles.. */
-webkit-transition:0.2s linear;
-moz-transition:0.2s linear;
-o-transition:0.2s linear;
transition:0.2s linear;
}
#element:hover {
-webkit-box-shadow:0 0 5px blue;
-moz-box-shadow:0 0 5px blue;
-o-box-shadow:0 0 5px blue;
box-shadow:0 0 5px blue;
}

Try using Firebug or similar tool there.
You declare some initial "invisible" box shadow and its visible counterpart and declare some transition in addition:
.elem {
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
transition: box-shadow 0.2s linear 0s;
}
.elem:hover {
box-shadow: 0 0 8px rgba(82, 168, 236, 0.6);
}
This styling is extracted from that site.
EDIT: You wanted mouseover rather than focusing.

.element
{
background-color: #fff;
border: 1px solid #ccc;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
-webkit-transition: border linear .2s,box-shadow linear .2s;
-moz-transition: border linear .2s,box-shadow linear .2s;
-o-transition: border linear .2s,box-shadow linear .2s;
transition: border linear .2s,box-shadow linear .2s;
}
.elem:hover
{
box-shadow: 0 0 8px rgba(82, 168, 236, 0.6);
}

jQuery + CSS: Creating a pulsating heart

I have done s simple heart using pure CSS.
It consists of two pieces, so one piece has a white box-shadow, the other one has a red one.
An example can be found here: JsFiddle (it has a simplified styling with no gradients, so it may not look beautiful :)
So, the question is: how to create animated shadows? All I need is to make white and red shadows pulsating to create an effect of heartbeat.
I have followed through some similar questions already, but they won't work, unfortunately, just because in my case I use :after and :before pseudo-classes, which can not been manipulated via jQuery.

I set it to infinite so it beats non-stop (which is a good thing, so the heart doesn't die right?) But you can change it to n number of times instead. Also, you can change the 5 seconds to longer or shorter obviously. And if you don't want the box shadow going to 0, you can always change that to like 10px or something too.
#b:before {
animation: heartbeat 5s infinite;
}
#keyframes heartbeat {
0% { box-shadow: 0 0 50px #fff; }
25% { box-shadow: 0 0 0 #fff; }
50% { box-shadow: 0 0 50px #fff; }
75% { box-shadow: 0 0 0 #fff; }
100% { box-shadow: 0 0 50px #fff; }
}
body {
width:100%;
margin:0;
background: #000;
}
#b {
position:relative;
width:500px;
height:90px;
margin: 100px auto;
font-size: 12px;
}
#b:before {
position: absolute;
content:"";
left: 208px;
top: 10px;
width: 208px;
height: 320px;
background: red;
border-radius: 200px 200px 0 0;
box-shadow: 0 0 50px #fff;
animation: heartbeat 5s infinite;
}
#b:before {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
#b:after {
position:absolute;
content:"BlaBla!";
color: #fff;
left:0;
top:10px;
width:208px;
height:320px;
background: red;
border-radius:200px 200px 0 0;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-ms-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
-webkit-transform-origin:100% 100%;
-moz-transform-origin:100% 100%;
-ms-transform-origin:100% 100%;
-o-transform-origin:100% 100%;
transform-origin:100% 100%;
box-shadow: 10px 10px 100px #6d0019;
}
#keyframes heartbeat {
0% { box-shadow: 0 0 50px #fff; }
25% { box-shadow: 0 0 0 #fff; }
50% { box-shadow: 0 0 50px #fff; }
75% { box-shadow: 0 0 0 #fff; }
100% { box-shadow: 0 0 50px #fff; }
}
<div class="a">
<div id="b"></div>
</div>

Categories

Resources