Develop Reference

i want to switch some code from code pen to visual studio code

I'm a beginner and wanted to add one button that I saw on YouTube, the author left a link to the codepen, I went in and copied all the code from there, and pasted it into my project in visual studio code, but the html code looked strange and didn't work at all.
[Link to the Codepen page][1]
$('.order').click(function(e) {
let button = $(this);
if(!button.hasClass('animate')) {
button.addClass('animate');
setTimeout(() => {
button.removeClass('animate');
}, 10000);
}
});
:root {
--primary: #275EFE;
--primary-light: #7699FF;
--dark: #1C212E;
--grey-dark: #3F4656;
--grey: #6C7486;
--grey-light: #CDD9ED;
--white: #FFF;
--green: #16BF78;
--sand: #DCB773;
--sand-light: #EDD9A9;
}
.order {
appearance: none;
border: 0;
background: var(--dark);
position: relative;
height: 63px;
width: 240px;
padding: 0;
outline: none;
cursor: pointer;
border-radius: 32px;
-webkit-mask-image: -webkit-radial-gradient(white, black);
-webkit-tap-highlight-color: transparent;
overflow: hidden;
transition: transform .3s ease;
span {
--o: 1;
position: absolute;
left: 0;
right: 0;
text-align: center;
top: 19px;
line-height: 24px;
color: var(--white);
font-size: 16px;
font-weight: 500;
opacity: var(--o);
transition: opacity .3s ease;
&.default {
transition-delay: .3s;
}
&.success {
--offset: 16px;
--o: 0;
svg {
width: 12px;
height: 10px;
display: inline-block;
vertical-align: top;
fill: none;
margin: 7px 0 0 4px;
stroke: var(--green);
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 16px;
stroke-dashoffset: var(--offset);
transition: stroke-dashoffset .3s ease;
}
}
}
&:active {
transform: scale(.96);
}
.lines {
opacity: 0;
position: absolute;
height: 3px;
background: var(--white);
border-radius: 2px;
width: 6px;
top: 30px;
left: 100%;
box-shadow: 15px 0 0 var(--white), 30px 0 0 var(--white), 45px 0 0 var(--white), 60px 0 0 var(--white), 75px 0 0 var(--white), 90px 0 0 var(--white), 105px 0 0 var(--white), 120px 0 0 var(--white), 135px 0 0 var(--white), 150px 0 0 var(--white), 165px 0 0 var(--white), 180px 0 0 var(--white), 195px 0 0 var(--white), 210px 0 0 var(--white), 225px 0 0 var(--white), 240px 0 0 var(--white), 255px 0 0 var(--white), 270px 0 0 var(--white), 285px 0 0 var(--white), 300px 0 0 var(--white), 315px 0 0 var(--white), 330px 0 0 var(--white);
}
.back,
.box {
--start: var(--white);
--stop: var(--grey-light);
border-radius: 2px;
background: linear-gradient(var(--start), var(--stop));
position: absolute;
}
.truck {
width: 60px;
height: 41px;
left: 100%;
z-index: 1;
top: 11px;
position: absolute;
transform: translateX(24px);
&:before,
&:after {
--r: -90deg;
content: '';
height: 2px;
width: 20px;
right: 58px;
position: absolute;
display: block;
background: var(--white);
border-radius: 1px;
transform-origin: 100% 50%;
transform: rotate(var(--r));
}
&:before {
top: 4px;
}
&:after {
--r: 90deg;
bottom: 4px;
}
.back {
left: 0;
top: 0;
width: 60px;
height: 41px;
z-index: 1;
}
.front {
overflow: hidden;
position: absolute;
border-radius: 2px 9px 9px 2px;
width: 26px;
height: 41px;
left: 60px;
&:before,
&:after {
content: '';
position: absolute;
display: block;
}
&:before {
height: 13px;
width: 2px;
left: 0;
top: 14px;
background: linear-gradient(var(--grey), var(--grey-dark));
}
&:after {
border-radius: 2px 9px 9px 2px;
background: var(--primary);
width: 24px;
height: 41px;
right: 0;
}
.window {
overflow: hidden;
border-radius: 2px 8px 8px 2px;
background: var(--primary-light);
transform: perspective(4px) rotateY(3deg);
width: 22px;
height: 41px;
position: absolute;
left: 2px;
top: 0;
z-index: 1;
transform-origin: 0 50%;
&:before,
&:after {
content: '';
position: absolute;
right: 0;
}
&:before {
top: 0;
bottom: 0;
width: 14px;
background: var(--dark);
}
&:after {
width: 14px;
top: 7px;
height: 4px;
position: absolute;
background: rgba(255, 255, 255, .14);
transform: skewY(14deg);
box-shadow: 0 7px 0 rgba(255, 255, 255, .14);
}
}
}
.light {
width: 3px;
height: 8px;
left: 83px;
transform-origin: 100% 50%;
position: absolute;
border-radius: 2px;
transform: scaleX(.8);
background: rgba(240, 220, 95, 1);
&:before {
content: '';
height: 4px;
width: 7px;
opacity: 0;
transform: perspective(2px) rotateY(-15deg) scaleX(.94);
position: absolute;
transform-origin: 0 50%;
left: 3px;
top: 50%;
margin-top: -2px;
background: linear-gradient(90deg, rgba(240, 220, 95, 1), rgba(240, 220, 95, .7), rgba(240, 220, 95, 0));
}
&.top {
top: 4px;
}
&.bottom {
bottom: 4px;
}
}
}
.box {
--start: var(--sand-light);
--stop: var(--sand);
width: 21px;
height: 21px;
right: 100%;
top: 21px;
&:before,
&:after {
content: '';
top: 10px;
position: absolute;
left: 0;
right: 0;
}
&:before {
height: 3px;
margin-top: -1px;
background: rgba(0, 0, 0, .1);
}
&:after {
height: 1px;
background: rgba(0, 0, 0, .15);
}
}
&.animate {
.default {
--o: 0;
transition-delay: 0s;
}
.success {
--offset: 0;
--o: 1;
transition-delay: 7s;
svg {
transition-delay: 7.3s;
}
}
.truck {
animation: truck 10s ease forwards;
&:before {
animation: door1 2.4s ease forwards .3s;
}
&:after {
animation: door2 2.4s ease forwards .6s;
}
.light {
&:before,
&:after {
animation: light 10s ease forwards;
}
}
}
.box {
animation: box 10s ease forwards;
}
.lines {
animation: lines 10s ease forwards;
}
}
}
#keyframes truck {
10%,
30% {
transform: translateX(-164px);
}
40% {
transform: translateX(-104px);
}
60% {
transform: translateX(-224px);
}
75%,
100% {
transform: translateX(24px);
}
}
#keyframes lines {
0%,
30% {
opacity: 0;
transform: scaleY(.7) translateX(0);
}
35%,
65% {
opacity: 1;
}
70% {
opacity: 0;
}
100% {
transform: scaleY(.7) translateX(-400px);
}
}
#keyframes light {
0%,
30% {
opacity: 0;
transform: perspective(2px) rotateY(-15deg) scaleX(.88);
}
40%,
100% {
opacity: 1;
transform: perspective(2px) rotateY(-15deg) scaleX(.94);
}
}
#keyframes door1 {
30%,
50% {
transform: rotate(32deg);
}
}
#keyframes door2 {
30%,
50% {
transform: rotate(-32deg);
}
}
#keyframes box {
8%,
10% {
transform: translateX(40px);
opacity: 1;
}
25% {
transform: translateX(112px);
opacity: 1;
}
26% {
transform: translateX(112px);
opacity: 0;
}
27%,
100% {
transform: translateX(0px);
opacity: 0;
}
}
html {
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
}
* {
box-sizing: inherit;
&:before,
&:after {
box-sizing: inherit;
}
}
// Center & dribbble
body {
min-height: 100vh;
font-family: Roboto, Arial;
display: flex;
justify-content: center;
align-items: center;
background: #E4ECFA;
.dribbble {
position: fixed;
display: block;
right: 20px;
bottom: 20px;
img {
display: block;
height: 28px;
}
}
}
button(class='order')
span(class='default') Complete Order
span(class='success') Order Placed
svg(viewbox='0 0 12 10')
polyline(points='1.5 6 4.5 9 10.5 1')
div(class='box')
div(class='truck')
div(class='back')
div(class='front')
div(class='window')
div(class='light top')
div(class='light bottom')
div(class='lines')
<!-- dribbble -->
a(class='dribbble' href='https://dribbble.com/shots/7112021-Order-confirm-animation' target='_blank')
img(src='https://cdn.dribbble.com/assets/dribbble-ball-mark-2bd45f09c2fb58dbbfb44766d5d1d07c5a12972d602ef8b32204d28fa3dda554.svg')
Can someone please help me???

Looks like Jade, not HTML. It's very easy to convert, just add arrow brackets and closing tags div(class="whatever") is <div class="whatever"></div>. The indentations matter as they are what is considered "in" a tag
div(class="whatever")
span hello
is
<div class="whatever">
<span>hello</span>
</div>
The code in the CSS block is Sass a CSS preprocessor.

Having a navigation bar onclick/href execute animation on a circle element then loading a new page - How?

I have a circle class element .circle and a navigation bar on a demo homepage home.html. I need clicking on one of the navigation's elements href to resume.html) to do an animation (growing its dimension) to have it matched in size to a similar element .circleRe on the linked page (resume.html) and only then move to that page. So, how to delay loading the second page while doing the animation?
P.S. The circle also response to hovering (and slightly enlarging it to have a text.)
I've tried using JavaScript and had partial success, but it seems that the href cancels the animation effect. #keyframes does not seem to be the right solution
nav {
overflow: hidden;
background-color: #333;
position: fixed;
z-index: 10
}
nav a {
font-family: DoubleBass;
font-weight: normal;
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
nav a:hover {
background-color: #ddd;
color: black;
}
.circle {
background: #D73309;
opacity: 0.7;
width: 37.5vmin;
height: 37.5vmin;
border-radius: 50%;
margin: 0 auto;
position: fixed;
z-index: 1;
top: -100px;
right: -70px;
-webkit-transition: width 1.2s, height 1.2s, box-shadow 1.2s;
/* Safari */
transition: width 1.2s, height 1.2s, box-shadow 1.2s;
}
.quotes {
opacity: 0;
font-size: .9em;
line-height: 120%;
padding: 70px 0px 0px 20px;
}
.circle:hover {
width: 60vmin;
height: 60vmin;
opacity: 1;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.circle:hover .quotes {
opacity: 1;
-webkit-transition: opacity 1.2s;
transition: opacity 1.2s;
}
.circleRe {
background: #D73309;
opacity: 1;
width: 140vmax;
height: 140vmax;
border-radius: 50%;
margin: 0 auto;
position: absolute;
z-index: 1;
top: -500px;
right: -400px;
}
<header>
<nav>
Home
Resume
Archive
Films
</nav>
</header>
<body>
<div class="circle">
<p class="quotes"></p>
</div>
</body>

$('.links').click(function(e) {
e.preventDefault();
//Show the UI Loader here
$('.loaders').show();
setTimeout(function() {
//Hide the UI Loader after 5 seconds
$('.loaders').hide();
}, 5000);
});
nav {
overflow: hidden;
background-color: #333;
position: fixed;
z-index: 10
}
nav a {
font-family: DoubleBass;
font-weight: normal;
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
nav a:hover {
background-color: #ddd;
color: black;
}
.circle {
background: #D73309;
width: 37.5vmin;
height: 37.5vmin;
border-radius: 50%;
margin: 0 auto;
position: fixed;
z-index: 100;
top: -100px;
right: -70px;
-webkit-transition: width 1.2s, height 1.2s, box-shadow 1.2s;
/* Safari */
transition: width 1.2s, height 1.2s, box-shadow 1.2s;
}
.quotes {
opacity: 0;
font-size: .9em;
line-height: 120%;
padding: 70px 0px 0px 20px;
}
.loaders {
border: 16px solid #f3f3f3;
border-top: 16px solid #3498db;
border-radius: 50%;
animation: spin 2s linear infinite;
position: fixed;
width: 100%;
height: 100%;
z-index: 1000;
top: 0px;
left: 0px;
opacity: .5;
/* in FireFox */
filter: alpha(opacity=50);
/* in IE */
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
<nav>
<a id='lnkHome' class='links' href="JavaScript:void(0);">Home</a>
<a id='lnkResume' class='links' href="JavaScript:void(0);">Resume</a>
<a id='lnkArchieve' class='links' href="JavaScript:void(0);">Archive</a>
<a id='lnkFilms' class='links' href="JavaScript:void(0);">Films</a>
</nav>
</header>
<body>
<div class="circle">
<p class="quotes">
</p>
</div>
<div class="loaders" style="display:none;"></div>
</body>
Note:- Show loader on click and after some times, you can hide that loader.
so the user will not be able to interact with DOM(UI).
Hope this helps!

jquery (this).parent.hasClass giving false positive while in animation

I use CSS animations and jQuery to open multiple flaps on a Calendar. That works great as long as the user waits for an animation to end and then clicks the next one. But the moment an opening animation is still running, and the user already starts the next, the script breaks and my class opend is removed from the .fenster div and window breaking the layout.
Does anybody see where my script is faulty?
$( document ).on("click" , '.flap' , function(){
if ($(this).parent(".fenster").hasClass("opend")) {
$(this).removeClass("flap_open" ).addClass("flap_close" );
$(this).one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(e) {
$(this).next().hide();
$(this).removeClass("flap_close");
$(this).parent(".fenster").removeClass("opend");
});
} else {
$(this).addClass("flap_open" );
$(this).parent(".fenster").addClass("opend");
//$(this).removeClass("flap_close" );
$(this).next().show();
}
});
.fenster {
width: 30%;
min-width: 130px;
max-width: 300px;
border: 1px solid rgba(212, 212, 212, 1);
position: relative;
left: 200px;
z-index: 200;
cursor: pointer;
}
.opend {
perspective: 1500px;
-webkit-perspective: 1500px;
box-shadow: inset 0px 0px 5px #2e2d2e;
cursor: auto;
-webkit-backface-visibility: hidden;
}
.flap {
width: 100%;
height: 100%;
z-index: 100;
background-color: red;
}
.flap:before {
content: "";
display: block;
padding-top: 75%;
}
.flap_open {
transform-origin: 0 50%;
-webkit-transform-origin: 0 50%;
background-size: cover;
width: 100%;
height: 100%;
z-index: 100;
cursor: alias;
animation: turn 4s forwards;
-webkit-animation: turn 4s forwards;
box-shadow: 5px 0px 5px 0px #2e2d2e;
}
.flap_close {
transform-origin: 0 50%;
-webkit-transform-origin: 0 50%;
-webkit-animation: zumachen 4s forwards;
animation: zumachen 4s forwards;
opacity: 0.8;
box-shadow: 5px 0px 5px 0px #2e2d2e;
transform: rotateY(-100deg);
}
.button{
position: absolute;
bottom: 2%;
left: 15%;
width: 70%;
height: 5vh;
min-width: 80px;
min-height: 28px;
max-height: 20px;
z-index: -1;
text-align: center;
display: table;
background-color: grey;
}
#keyframes turn {
to {
transform: rotateY(-100deg);
opacity: 0.8;
box-shadow: 5px 0px 5px 0px #2e2d2e;
visibility: visible;
}
}
#-webkit-keyframes turn {
to {
-webkit-transform: rotateY(-100deg);
-webkit-opacity: 0.8;
box-shadow: 5px 0px 5px 0px #2e2d2e;
visibility: visible;
}
}
#keyframes zumachen {
to {
transform: rotateY(0deg);
opacity: 1;
box-shadow: none;
visibility: visible;
}
}
#-webkit-keyframes zumachen {
to {
-webkit-transform: rotateY(0deg);
-webkit-opacity: 1;
box-shadow: none;
visibility: visible;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fenster f7 p3">
<div class="flap"></div>
<div class="button" style="display: none;"><span>Something</span></div>
</div>
<div class="fenster f3 p1">
<div class="flap"></div>
<div class="button" style="display: none;"><span>Something</span></div>
</div>

If you add a class indicating the animation is running, you can then run a check to make sure that any currently animating element will not be affected by the .removeClass() method called on any closing element.
Add a class to the animating element, indicating that it is in
animation
With an additional .one() method to the else code block of your initial
conditional statement you can remove this aforementioned class again
once the animation has completed
Insert another conditional check in the first .one() method of
your initial conditional check to verify that the element in
question has no class .animation-running, therefore indicating
that it should have the necessary classes removed.
$(document).on("click", ".flap", function() {
if ($(this).parent(".fenster").hasClass("opend")) {
$(this).removeClass("flap_open").addClass("flap_close");
$(this).one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(e) {
if (!$(this).parent(".fenster").hasClass("animation-running")) {
/* only step into next code block if condition is equal to true,
* i.e: parent does not have the class "animation-running", so animation is completed
*/
$(this).next().hide();
$(this).removeClass("flap_close");
$(this).parent(".fenster").removeClass("opend");
}
});
} else {
$(this).addClass("flap_open");
$(this).parent(".fenster").addClass("opend animation-running"); /* Additional class to indicate animation is running */
$(this).next().show();
/* Only once animation has completed should the indicating class be removed */
$(this).one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(e) {
$(this).parent(".fenster").removeClass("animation-running");
});
}
});
.fenster {
width: 30%;
min-width: 130px;
max-width: 300px;
border: 1px solid rgba(212, 212, 212, 1);
position: relative;
left: 200px;
z-index: 200;
cursor: pointer;
}
.opend {
perspective: 1500px;
-webkit-perspective: 1500px;
box-shadow: inset 0px 0px 5px #2e2d2e;
cursor: auto;
-webkit-backface-visibility: hidden;
}
.flap {
width: 100%;
height: 100%;
z-index: 100;
background-color: red;
}
.flap:before {
content: "";
display: block;
padding-top: 75%;
}
.flap_open {
transform-origin: 0 50%;
-webkit-transform-origin: 0 50%;
background-size: cover;
width: 100%;
height: 100%;
z-index: 100;
cursor: alias;
animation: turn 4s forwards;
-webkit-animation: turn 4s forwards;
box-shadow: 5px 0px 5px 0px #2e2d2e;
}
.flap_close {
transform-origin: 0 50%;
-webkit-transform-origin: 0 50%;
-webkit-animation: zumachen 4s forwards;
animation: zumachen 4s forwards;
opacity: 0.8;
box-shadow: 5px 0px 5px 0px #2e2d2e;
transform: rotateY(-100deg);
}
.button {
position: absolute;
bottom: 2%;
left: 15%;
width: 70%;
height: 5vh;
min-width: 80px;
min-height: 28px;
max-height: 20px;
z-index: -1;
text-align: center;
display: table;
background-color: grey;
}
#keyframes turn {
to {
transform: rotateY(-100deg);
opacity: 0.8;
box-shadow: 5px 0px 5px 0px #2e2d2e;
visibility: visible;
}
}
#-webkit-keyframes turn {
to {
-webkit-transform: rotateY(-100deg);
-webkit-opacity: 0.8;
box-shadow: 5px 0px 5px 0px #2e2d2e;
visibility: visible;
}
}
#keyframes zumachen {
to {
transform: rotateY(0deg);
opacity: 1;
box-shadow: none;
visibility: visible;
}
}
#-webkit-keyframes zumachen {
to {
-webkit-transform: rotateY(0deg);
-webkit-opacity: 1;
box-shadow: none;
visibility: visible;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fenster f7 p3">
<div class="flap"></div>
<div class="button" style="display: none;"><span>Something</span></div>
</div>
<div class="fenster f3 p1">
<div class="flap"></div>
<div class="button" style="display: none;"><span>Something</span></div>
</div>

I think its because you tell program - "on click, if this has class opend, do some, time-taking, work and remove opend class" Because you remove class at the end program doesn't go to that point if clicked again earlier. Way around could be to use other indicator top check the state. For ex:
$( document ).on("click" , '.flap' , function(){
if ($(this).parent(".fenster").hasClass("justEmptyClass")) {
$(this).parent(".fenster").removeClass("justEmptyClass");
Or use a variable - with false/rue to set and check state:
var open = true;
$( document ).on("click" , '.flap' , function(){
if (open) {
open = false;
// and rest your code

How can I make the underline change color every time the page loads?

I would like the underline under my text to change color randomly every time the page loads.
I have had success using this script before:
<script type="text/javascript">
var classes = ['red', 'blue', 'yellow'];
var random_class = classes[Math.floor(Math.random() * classes.length)];
var title = document.getElementById('decor');
classes.forEach((el) => {
title.classList.remove(el);
});
title.classList.add(random_class);
</script>
with this on my CSS:
.red {
box-shadow: inset 0 -1.3vw 0 0 ##FF0000;
}
.yellow {
box-shadow: inset 0 -1.3vw 0 0 #FFFF00;
}
.blue {
box-shadow: inset 0 -1.3vw 0 0 #0000FF;
}
But I cannot (newb here) rig it with my current code (see snippet below)
body {
background-color: #FFFFFF;
margin: 0px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.container {
display: block;
width: 85%;
/*center vertically & horizontally*/
position:absolute; top:50%; left:50%;
-webkit-transform:translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
-ms-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}
a, a:visited, a:hover {
-ms-text-align-last: justify;
-moz-text-align-last: justify;
text-align-last: justify;
text-decoration: none;
color: #000000;
}
#test1 {
display: inline-block;
height: auto;
width: auto;
visibility: visible;
font-family: "Times New Roman", Times, serif;
text-align: center;
line-height: 7.5vw;
margin: 0;
font-size: 7.7vw;
font-weight: bold;
position: relative;
}
#test1:before {
content: "";
box-shadow: inset 0 -1.3vw 0 0 #00f9ff;
position: absolute;
width: 100%;
height: 100%;
transform: scaleX(0);
transform-origin: left;
animation-name: stretchRight;
animation-duration: 0.8s;
animation-fill-mode: forwards;
animation-timing-function: ease-out;
z-index:-1;
}
#keyframes stretchRight {
0% {
transform: scaleX(0);
}
100% {
transform: scaleX(1);
}
}
<body>
<div class="container">
<div id="test1">hello darkness my old</div>
</div>
</div>
</body>
How can I rig them together to make it so that the underline changes color every time the page loads?

You can add the .red, .yellow, .blue,.etc... classes to your css and have javascript pick one of those classes and add it dynamically to test1. Since the number of colors to choose from is small, the colors might repeat very often. If you want to ensure that the colors are different, you might need to use a cookie to store then value.
function getRandomIntInclusive(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min;
}
var classes = ['red', 'blue', 'yellow','green','cyan','magenta','orange','black'];
var random_index = getRandomIntInclusive(0, classes.length -1);
var title = document.getElementById('test1');
var random_class= classes[random_index];
title.classList.add(random_class);
body {
background-color: #FFFFFF;
margin: 0px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.container {
display: block;
width: 85%;
/*center vertically & horizontally*/
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
a,
a:visited,
a:hover {
-ms-text-align-last: justify;
-moz-text-align-last: justify;
text-align-last: justify;
text-decoration: none;
color: #000000;
}
#test1 {
display: inline-block;
height: auto;
width: auto;
visibility: visible;
font-family: "Times New Roman", Times, serif;
text-align: center;
line-height: 7.5vw;
margin: 0;
font-size: 7.7vw;
font-weight: bold;
position: relative;
}
#test1:before {
content: "";
box-shadow: inset 0 -1.3vw 0 0 #00f9ff;
position: absolute;
width: 100%;
height: 100%;
transform: scaleX(0);
transform-origin: left;
animation-name: stretchRight;
animation-duration: 0.8s;
animation-fill-mode: forwards;
animation-timing-function: ease-out;
z-index: -1;
}
.red:before {
box-shadow: inset 0 -1.3vw 0 0 red !important;
}
.yellow:before {
box-shadow: inset 0 -1.3vw 0 0 yellow !important;
}
.blue:before {
box-shadow: inset 0 -1.3vw 0 0 blue !important;
}
.green:before {
box-shadow: inset 0 -1.3vw 0 0 green !important;
}
.cyan:before {
box-shadow: inset 0 -1.3vw 0 0 cyan !important;
}
.magenta:before {
box-shadow: inset 0 -1.3vw 0 0 magenta !important;
}
.orange:before {
box-shadow: inset 0 -1.3vw 0 0 orange !important;
}
.black:before {
box-shadow: inset 0 -1.3vw 0 0 black !important;
}
#keyframes stretchRight {
0% {
transform: scaleX(0);
}
100% {
transform: scaleX(1);
}
}
<body>
<div class="container">
<div id="test1">hello darkness my old
</div>
</div>
</body>

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>