Develop Reference

Controlling CSS animation counts form input [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
I have been trying to control the rate of drops per minute. is it possible to control the rate of drops depending on the Drops in each minute: input? Like when the input value is 60, there will be 60 water drops in each minute (animation: drop 1s). What would be best way to achieve that?
Thanks in advance for your suggestion.
Fiddle link to the code is here.
body {
background: #e8e5ea;
}
.wrap {
position: absolute;
width: 100px;
height: 200px;
left: 50%;
margin-left: -50px;
top: 50%;
margin-top: -100px;
}
.drop {
width: 40px;
height: 40px;
left: 50%;
margin-left: -20px;
position: absolute;
animation: drop 2s cubic-bezier(0.55, 0.085, 0.68, 0.53) 0s infinite;
}
.drop circle {
fill: #2a96ed;
}
.drop-outer {
position: absolute;
box-sizing: border-box;
/* border: 1px solid #333; */
width: 100px;
height: 200px;
overflow: hidden;
border-bottom-right-radius: 50px;
border-bottom-left-radius: 50px;
backface-visibility: hidden;
transform: translate3d(0, 0, 0);
background-clip: padding-box;
-webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
}
.ripple {
position: absolute;
box-sizing: border-box;
width: 240px;
height: 240px;
top: 68px;
left: -70px;
perspective: 100;
transform: rotateX(65deg);
}
.ripple .ripple-svg {
position: absolute;
width: 240px;
height: 240px;
opacity: 0;
}
.ripple .ripple-svg circle {
fill: none;
stroke: #2a96ed;
stroke-width: 10px;
stroke-alignment: inner;
}
.ripple-1 {
animation: ripple 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s infinite;
}
.ripple-1 .ripple-svg {
animation: fade-in-out 2s linear 0s infinite;
}
.ripple-1 .ripple-svg circle {
animation: border 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s infinite;
}
.ripple-2 {
animation: ripple 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s infinite;
}
.ripple-2 .ripple-svg {
animation: fade-in-out 2s linear 0.2s infinite;
}
.ripple-2 .ripple-svg circle {
animation: border 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s infinite;
}
.ripple-3 {
animation: ripple 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.35s infinite;
}
.ripple-3 .ripple-svg {
animation: fade-in-out 2s linear 0.35s infinite;
}
.ripple-3 .ripple-svg circle {
animation: border 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.35s infinite;
}
#keyframes drop {
0% {
transform: scale3d(0.01,0.01,0.01) translateY(0)
}
10% {
transform: scale3d(1,1,1)
}
44% {
transform: scale3d(1,1,1) translateY(200px)
}
100% {
transform: scale3d(1,1,1) translateY(200px)
}
}
#keyframes fade-in-out {
0% {opacity: 0}
42% {opacity: 0}
52% {opacity: 1}
65% {opacity: 1}
100% {opacity: 0}
}
#keyframes ripple {
0% { transform: rotateX(65deg) scale3d(0.2, 0.2, 0.2) }
42% { transform: rotateX(65deg) scale3d(0.2, 0.2, 0.2) }
100% { transform: rotateX(65deg) scale3d(0.9, 0.9, 0.9) }
}
#keyframes border {
0% { stroke-width: 6px }
42% { stroke-width: 6px }
100% {stroke-width: 2px }
}
Drops in each minute: <input type="number" id="number"/><br>
<div class="wrap">
<div class="drop-outer">
<svg class="drop" viewBox="0 0 40 40" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<circle cx="20" cy="20" r="20"/>
</svg>
</div>
<div class="ripple ripple-1">
<svg class="ripple-svg" viewBox="0 0 60 60" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<circle cx="30" cy="30" r="24"/>
</svg>
</div>
<div class="ripple ripple-2">
<svg class="ripple-svg" viewBox="0 0 60 60" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<circle cx="30" cy="30" r="24"/>
</svg>
</div>
<div class="ripple ripple-3">
<svg class="ripple-svg" viewBox="0 0 60 60" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<circle cx="30" cy="30" r="24"/>
</svg>
</div>
</div>

Only if you specify the relevant styles via JavaScript.
Your example is rather complex and not really minimal, so here is a simplified example that shows the idea:
const animateInner = document.querySelector('#animate .inner');
const input = document.querySelector('input');
document.querySelector('button').addEventListener('click', function() {
console.log('update to', `${input.value || 0}s`);
animateInner.style.animationDuration = `${input.value || 0}s`;
});
#animate {
position: relative;
width: 200px;
height: 200px;
border: 1px solid #000;
}
#animate .inner {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
background: #F00;
animation-name: fill;
animation-iteration-count: infinite;
}
#keyframes fill {
from {
top: 100%;
}
to {
top: 0;
}
}
<label>Duration in seconds: <input /></label>
<button>Update</button>
<div id="animate"><div class="inner"></div></div>
In a nutshell, you're going to want to control the "animation-duration" property. This will affect how quickly it happens. Since you want "drops per minute", you'll have to do a little math to convert that to a duration.
Since it looks like your animation has several things working in unison, you'll want to update them all at the same time.

So you can use
animation-iteration-count CSS3 property, the secret is you get the number and update the css
$(function(){
$('#number').on('change', function(){
var count = $(this).val();
$('.drop').css('animation-iteration-count', count);
$('.ripple-1').css('animation-iteration-count', count);
$('.ripple-1 .ripple-svg').css('animation-iteration-count', count);
$('.ripple-1 .ripple-svg circle').css('animation-iteration-count', count);
$('.ripple-2').css('animation-iteration-count', count);
$('.ripple-2 .ripple-svg').css('animation-iteration-count', count);
$('.ripple-2 .ripple-svg circle').css('animation-iteration-count', count);
$('.ripple-3').css('animation-iteration-count', count);
$('.ripple-3 .ripple-svg').css('animation-iteration-count', count);
$('.ripple-3 .ripple-svg circle').css('animation-iteration-count', count);
});
});
JSfiddle

Safari pauses CSS3 Animation on submission of a form or redirect

I am developing a simple web page where I want to show a spinner in the center of the page when the form is submitted. It works in Chrome but, in Safari the CSS animation stops as soon as the form is submitted. Since the animation is 2 seconds longs it does not perform the animation at all.
This is the entire HTML, CSS and JS to replicate the issue. Save the contents in a HTML file and open it in Chrome first to see how it should behave and then open in Safari to see the issue.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.circular {
display: inline-block;
height: 60px;
left: 50%;
margin-left: -30px;
margin-top: -30px;
position: fixed;
top: 50%;
transform: rotate(-90deg);
width: 60px;
}
.circle {
animation: circular-indeterminate-bar-rotate 2s linear infinite;
box-sizing: border-box;
height: 100%;
width: 100%;
}
.path {
animation: circular-indeterminate-bar-dash 1.5s ease-in-out infinite;
fill: none;
stroke: rgba(12,18,28, 0.87);
stroke-dasharray: 1.25, 250;
stroke-dashoffset: 0;
stroke-linecap: round;
stroke-miterlimit: 20;
stroke-width: 4;
transition: stroke-dasharray .35s cubic-bezier(.4, 0, .2, 1);
}
#keyframes circular-indeterminate-bar-rotate {
to {
transform: rotate(1turn);
}
}
#keyframes circular-indeterminate-bar-dash {
0% {
stroke-dasharray: 1.25, 250;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 111.25, 250;
stroke-dashoffset: -43.75;
}
to {
stroke-dasharray: 111.25, 250;
stroke-dashoffset: -155;
}
}
</style>
</head>
<body>
<div class="circular">
<svg class="circle" viewBox="0 0 60 60"><circle class="path" cx="30" cy="30" r="25"></circle></svg>
</div>
<script>
window.location.href = 'http://httpbin.org/delay/100';
</script>
</body>
</html>

This is working Fine in safari also.
.circular {
display: inline-block;
height: 60px;
left: 50%;
margin-left: -30px;
margin-top: -30px;
position: fixed;
top: 50%;
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
width: 60px;
}
.circle {
-webkit-animation: circular-indeterminate-bar-rotate 2s linear infinite;
animation: circular-indeterminate-bar-rotate 2s linear infinite;
-webkit-box-sizing: border-box;
box-sizing: border-box;
height: 100%;
width: 100%;
}
.path {
-webkit-animation: circular-indeterminate-bar-dash 1.5s ease-in-out infinite;
animation: circular-indeterminate-bar-dash 1.5s ease-in-out infinite;
fill: none;
stroke: rgba(12,18,28, 0.87);
stroke-dasharray: 1.25, 250;
stroke-dashoffset: 0;
stroke-linecap: round;
stroke-miterlimit: 20;
stroke-width: 4;
-webkit-transition: stroke-dasharray .35s cubic-bezier(.4, 0, .2, 1);
-o-transition: stroke-dasharray .35s cubic-bezier(.4, 0, .2, 1);
transition: stroke-dasharray .35s cubic-bezier(.4, 0, .2, 1);
}
#-webkit-keyframes circular-indeterminate-bar-rotate {
to {
-webkit-transform: rotate(1turn);
transform: rotate(1turn);
}
}
#keyframes circular-indeterminate-bar-rotate {
to {
-webkit-transform: rotate(1turn);
transform: rotate(1turn);
}
}
#-webkit-keyframes circular-indeterminate-bar-dash {
0% {
stroke-dasharray: 1.25, 250;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 111.25, 250;
stroke-dashoffset: -43.75;
}
to {
stroke-dasharray: 111.25, 250;
stroke-dashoffset: -155;
}
}
#keyframes circular-indeterminate-bar-dash {
0% {
stroke-dasharray: 1.25, 250;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 111.25, 250;
stroke-dashoffset: -43.75;
}
to {
stroke-dasharray: 111.25, 250;
stroke-dashoffset: -155;
}
}
<div class="circular">
<svg class="circle" viewBox="0 0 60 60"><circle class="path" cx="30" cy="30" r="25"></circle></svg>
</div>

On click trigger not keeping full animation

I am triggering an svg checmark with a button. The way I am doing it is setting the checkmark to opacity:0; and then once the button is clicked, adding a class fadeIn and putting the opacity to opacity:1;.
My issue is when the opacity is set to 0 the animation is altered. The full animation isn't showing. You can see this by taking the opacity:0 out of the chechmark class and running the fiddle again.
My question is, how can I get this checkmark to trigger/display with the button while keeping the full animation sequence.
Here is a fiddle. The snippet isn't producing the checkmark, not sure why.
$('#trigger').on('click', function () {
$('.checkmark').addClass('fadeIn');
});
.checkmark {
width: 200px;
height: 200px;
border-radius: 50%;
display: block;
stroke-width: 5;
stroke: #fff;
stroke-miterlimit: 10;
margin: 10% auto;
box-shadow: inset 0px 0px 0px #0783a7;
animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
opacity: 0;
z-index: 2;
}
.checkmark-circle {
stroke-dasharray: 166;
stroke-dashoffset: 166;
stroke-width: 5;
stroke-miterlimit: 10;
stroke: #0783a7;
fill: none;
animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}
.checkmark-check {
transform-origin: 50% 50%;
stroke-dasharray: 70;
stroke-dashoffset: 70;
animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}
#keyframes stroke {
100% {
stroke-dashoffset: 0;
}
}
#keyframes scale {
0%, 100% {
transform: none;
}
50% {
transform: scale3d(1.1, 1.1, 1);
}
}
#keyframes fill {
100% {
box-shadow: inset 0px 0px 0px 100px #0783a7;
}
}
.fadeIn {
opacity: 1;
transition: all 0.8s ease;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="trigger">Trigger</button>
<div id="wrap">
<div id="checkmark-text">All Templates Selected</div>
<svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
<circle class="checkmark-circle" cx="26" cy="26" r="25" fill="none"/>
<path class="checkmark-check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8"/>
</svg>
</div>

You can fix this by running the animation rule on the required elements based on the addition of the .fadeIn class instead of placing it on the classes the elements have when they load. Try this:
.checkmark {
width: 200px;
height: 200px;
border-radius: 50%;
display: block;
stroke-width: 5;
stroke: #fff;
stroke-miterlimit: 10;
margin: 10% auto;
box-shadow: inset 0px 0px 0px #0783a7;
z-index: 2;
opacity: 0;
}
.checkmark-circle {
stroke-dasharray: 166;
stroke-dashoffset: 166;
stroke-width: 5;
stroke-miterlimit: 10;
stroke: #0783a7;
fill: none;
}
.checkmark-check {
transform-origin: 50% 50%;
stroke-dasharray: 70;
stroke-dashoffset: 70;
}
.checkmark.fadeIn {
opacity: 1;
transition: all 0.8s ease;
animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
}
.checkmark.fadeIn .checkmark-circle {
animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}
.checkmark.fadeIn .checkmark-check {
animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}
#keyframes stroke {
100% {
stroke-dashoffset: 0;
}
}
#keyframes scale {
0%,
100% {
transform: none;
}
50% {
transform: scale3d(1.1, 1.1, 1);
}
}
#keyframes fill {
100% {
box-shadow: inset 0px 0px 0px 100px #0783a7;
}
}
Updated fiddle

How can I set a svg path starting point?

I'm developing the loading animation below but I'm running into problems.
I can't get the heart's stroke-dashoffset animation to start at the crack, top center of the heart. To clarify, the red "border" animation is the problem. It's starting at the wrong place.
I am creating the heart shape in Illustrator.
I make the shape http://imgur.com/a/3wziI
Next I convert the svg primitives <circle> and <rectangle> to <path> so they can be animated. http://imgur.com/a/sm1bG
I union the circles and rectangle to make the heart shape. http://imgur.com/a/31utR
How can I get the red "border" animation to start at the crack of the heart?
body { margin: 0 }
main {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
h1 {
font-family: 'Cabin Sketch', cursive;
font-size: 4vw;
}
svg {
width: 25vw;
position: relative;
overflow: visible;
}
.circleLeft {
fill: transparent;
stroke: #585858;
stroke-width: 0.5;
stroke-dasharray: 312;
stroke-dashoffset: 312;
transform-origin: 59% 97%;
animation: leftCircleAnim 6s infinite;
animation-timing-function: cubic-bezier(0.4, -0.03, 0.82, 0.42);
}
.circleRight {
fill: transparent;
stroke: #585858;
stroke-width: 0.5;
stroke-dasharray: 312;
stroke-dashoffset: 312;
transform-origin: 14% 54%;
transition: 1s ease all;
animation: rightCircleAnim 6s infinite;
animation-timing-function: cubic-bezier(0.4, -0.03, 0.82, 0.42);
}
.rect {
fill: transparent;
stroke: #585858;
stroke-width: 0.5;
transition: 1s ease all;
transform-origin: 64% 57%;
stroke-dasharray: 303;
stroke-dashoffset: 303;
animation: rectAnim 6s infinite;
animation-timing-function: cubic-bezier(0.4, -0.03, 0.82, 0.42);
}
.heart {
stroke-dasharray: 332;
stroke-dashoffset: 332;
transition: 1s ease-in all;
stroke: #E21A39;
stroke-width: 0.5;
fill: transparent;
animation: heartAnim 6s infinite;
animation-timing-function: cubic-bezier(0.4, -0.03, 0.82, 0.42);
}
#keyframes rectAnim {
0% { stroke-dashoffset: 312; }
10% { stroke-dashoffset: 122; }
35% { transform: rotate(0deg); }
37% { stroke: #585858; }
45% { transform: rotate(-45deg); stroke: #e8e8e8; }
74% { opacity: 1 }
75% { opacity: 0 }
100% {
stroke-dashoffset: 122;
transform: rotate(-45deg);
stroke: #e8e8e8;
opacity: 0;
}
}
#keyframes leftCircleAnim {
10% { stroke-dashoffset: 312; }
25% { stroke-dashoffset: 122; transform: translateY(0); }
35% { transform: translateY(-22px); }
37% { stroke: #585858; }
45% { transform: translateY(-22px) rotate(-45deg); stroke: #e8e8e8; }
74% { opacity: 1 }
75% { opacity: 0 }
100% {
stroke-dashoffset: 122;
transform: translateY(-22px) rotate(-45deg);
stroke: #e8e8e8;
opacity: 0;
}
}
#keyframes rightCircleAnim {
10% { stroke-dashoffset: 312; }
25% { stroke-dashoffset: 122; transform: translateX(0); }
35% { transform: translateX(22px); }
37% { stroke: #585858; }
45% { transform: translateX(22px) rotate(-45deg); stroke: #e8e8e8; }
74% { opacity: 1 }
75% { opacity: 0 }
100% {
stroke-dashoffset: 122;
stroke: #e8e8e8;
transform: translateX(22px) rotate(-45deg);
opacity: 0
}
}
#keyframes heartAnim {
45% { stroke-dashoffset: 332; }
55% { stroke-dashoffset: 102; }
58% { fill: transparent; }
65% { fill: #E21A39; }
85% { opacity: 1; }
95% { opacity: 0; }
100% {
stroke-dashoffset: 102;
fill: #E21A39;
opacity: 0;
}
}
<link href="https://fonts.googleapis.com/css?family=Cabin+Sketch" rel="stylesheet">
<main>
<h1>Heart Creation Loading Animation</h1>
<svg viewBox="-0.5 -0.5 77.95 71.6">
<title>heart</title>
<path class="rect" d="M61.05,56H15.94V10.87H61.05V56Z"/>
<path class="circleLeft" d="M15.94,33.43A22.55,22.55,0,0,0,55.85,47.84,22.56,22.56,0,0,0,34.12,11.29,22.53,22.53,0,0,0,15.94,33.43Z"/>
<path class="circleRight" d="M15.94,33.43A22.55,22.55,0,0,0,55.85,47.84,22.56,22.56,0,0,0,34.12,11.29,22.53,22.53,0,0,0,15.94,33.43Z"/>
<path class="heart" d="M180.09,6.55a22.89,22.89,0,0,0-25.74-4.38,22,22,0,0,0-6.11,4.4l0,0,0,0A22.54,22.54,0,0,0,110.52,25a22.64,22.64,0,0,0,5.85,13.35l0,0,31.9,31.9,31.9-31.9,0,0a21.77,21.77,0,0,0,1.65-1.8A22.83,22.83,0,0,0,180.09,6.55Z" transform="translate(-109.95 0.5)"/>
</svg>
</main>
I have a dev version where it's easier to mess with the heart's stroke-dasharray and stroke-dashoffset here http://codepen.io/tryggvigy/pen/rWjZOE

Running JavaScript on ASP.NET MVC FileResult

I would like to toggle a spinner on a form submission that returns a FileResult from the server after some processing. However, since I do not refresh the page, the spinner does not get disabled automatically with my current implementation.
How can I detect the successful response with JavaScript to download my file normally, and disable the spinner after it is generated?
I would like to avoid roundabout methods that involve refreshing the page or downloading the file using JavaScript, if possible.
Below is a modified version of my page as a code snippet. In my actual code, I use #using (Html.BeginForm()) instead of a raw HTML form.
window.onload = function() {
$("form").on("submit", function() {
startSpinner();
});
};
window.onbeforeunload = function() {
stopSpinner();
};
function startSpinner() {
$(".overlay").css("display", "initial");
}
function stopSpinner() {
$(".overlay").css("display", "none");
}
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.3);
z-index: 9999;
}
.loader {
position: fixed;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
width: 100px;
}
.loader:before {
content: '';
display: block;
padding-top: 100%;
}
.circular {
-webkit-animation: rotate 2s linear infinite;
animation: rotate 2s linear infinite;
height: 100%;
-webkit-transform-origin: center center;
transform-origin: center center;
width: 100%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.path {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
-webkit-animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
stroke-linecap: round;
}
#-webkit-keyframes rotate {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes rotate {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#-webkit-keyframes dash {
0% {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 89, 200;
stroke-dashoffset: -35px;
}
100% {
stroke-dasharray: 89, 200;
stroke-dashoffset: -124px;
}
}
#keyframes dash {
0% {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 89, 200;
stroke-dashoffset: -35px;
}
100% {
stroke-dasharray: 89, 200;
stroke-dashoffset: -124px;
}
}
#-webkit-keyframes color {
100%, 0% {
stroke: #d62d20;
}
40% {
stroke: #0057e7;
}
66% {
stroke: #008744;
}
80%,
90% {
stroke: #ffa700;
}
}
#keyframes color {
100%, 0% {
stroke: #d62d20;
}
40% {
stroke: #0057e7;
}
66% {
stroke: #008744;
}
80%,
90% {
stroke: #ffa700;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="overlay" style="display: none;">
<div class="loader">
<svg class="circular" viewBox="25 25 50 50">
<circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="5" stroke-miterlimit="10" />
</svg>
</div>
</div>
<!-- Some fields... -->
<form>
<button type="submit" class="btn btn-primary" id="analysis-submit-btn">Submit</button>
</form>
Typical controller method:
var myPackage = myFunction(myParameters);
var myFileName = "filename";
return File(myPackage, MediaTypeNames.Application.Octet, myFileName);

Since you are doing a full POST, instead of an ajax call and are returning a file, instead of refreshing the view, you are somewhat limited to what you can do.
Looks like someone came up with a fairly innovative solution to this very problem:
http://dejanstojanovic.net/jquery-javascript/2015/march/detect-when-file-download-request-is-finished-with-jquery/
It involves setting a cookie from the controller that returns the file. Then when you submit the form, you start checking to see if you have that cookie. If you have that cookie, it means the request has been sent down to the user.