I have page with form, that loads quite long after submit. That is why I decide to place spinner over button.
Instead if submit button I have div, that make:
$submit_btn.click(function(e){
if ($submit_btn.attr("data-send") == "yes"){
e.preventDefault();
}
else {
$('#reg').html('<div id="spin_reg" class="spinner-icon"></div>');
$new_try_now.submit();
}
});
In div spinner I have CSS3 animation.
Problem is that animation works well in Chrome, but in Safari it doesn't start.
I think the problem is that Safari kill all processes on page.
How I can avoid it without AJAX?
Edit:
Animation:
#-webkit-keyframes nprogress-spinner {
0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
#-moz-keyframes nprogress-spinner {
0% { -moz-transform: rotate(0deg); transform: rotate(0deg); }
100% { -moz-transform: rotate(360deg); transform: rotate(360deg); }
}
#-o-keyframes nprogress-spinner {
0% { -o-transform: rotate(0deg); transform: rotate(0deg); }
100% { -o-transform: rotate(360deg); transform: rotate(360deg); }
}
#-ms-keyframes nprogress-spinner {
0% { -ms-transform: rotate(0deg); transform: rotate(0deg); }
100% { -ms-transform: rotate(360deg); transform: rotate(360deg); }
}
#keyframes nprogress-spinner {
0% { transform: rotate(0deg); transform: rotate(0deg); }
100% { transform: rotate(360deg); transform: rotate(360deg); }
}
.spinner-icon {
display: block;
width: 16px;
height: 16px;
border: solid 2px transparent;
border-top-color: #158FD2;
border-left-color: #158FD2;
border-radius: 100%;
-webkit-animation: nprogress-spinner 900ms linear infinite;
-moz-animation: nprogress-spinner 900ms linear infinite;
-ms-animation: nprogress-spinner 900ms linear infinite;
-o-animation: nprogress-spinner 900ms linear infinite;
animation: nprogress-spinner 900ms linear infinite;
}
A bit late to answer this, but may still help somebody. :)
Safari stops running scripts/gifs and etc. after submit. You need to submit the form after the spinner is shown already.
$('#spinner').show(function() {
$('#form').submit();
});
In my case #spinner was already rendered with style='display:none'.
If you don't want to render it before you need it, you can add display:none to your #spin_reg CSS, and then write JS like this:
$('#reg')
.html('<div id="spin_reg" class="spinner-icon"></div>')
.show(function() { $new_try_now.submit(); });
Related
Hello I've created simple infinite animation using css, but there are a simple problem that I need the animation is loop for ever smoothly.
.rotate{
width:200px;
height:200px;
margin:50px auto;
background-color:#00e95a;
animation-name:rotate;
animation-duration:1s;
animation-iteration-count:infinite;
animation-fill-mode:both;
}
#keyframes rotate {
from {
-moz-transform: rotate(0);
-ms-transform: rotate(0);
-o-transform: rotate(0);
-webkit-transform: rotate(0);
transform: rotate(0);
}
to {
-moz-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
transform: rotate(-360deg);
}
}
<div class="rotate">
</div>
Just add animation-timing-function: linear;.
Note: The problem was caused by the default timing state, which is ease.
.rotate {
width: 200px;
height: 200px;
margin: 50px auto;
background-color: #00e95a;
animation-name: rotate;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-fill-mode: both;
animation-timing-function: linear;
}
#keyframes rotate {
from {
-moz-transform: rotate(0);
-ms-transform: rotate(0);
-o-transform: rotate(0);
-webkit-transform: rotate(0);
transform: rotate(0);
}
to {
-moz-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
transform: rotate(-360deg);
}
}
<div class="rotate"></div>
As #Kind user has mentioned you should hard reset animation-timing-function to linear, because the intial value of animation-timing-function is ease.
reference: https://developer.mozilla.org/en/docs/Web/CSS/animation-timing-function
so i have been through multiple answers already on stack overflow but due to me not being that experienced with JS i am here asking for some direct help with my question. I would like to keep the :hover state active even after my mouse has left the area of the element triggering the :hover.
At the moment i have an animation using css which is trigged using :hover selectors, now the problem i am having with the other answers provided i think is because the hover is trigged on one element while another element animates.
Below is my css and html,
css
#offerblock4:hover+#rotategiggles {
animation: animationFrames9 linear 0.5s;
animation-iteration-count: 1;
transform-origin: 100% 100%;
animation-fill-mode: forwards;
/*when the spec is finished*/
-webkit-animation: animationFrames9 linear 0.5s;
-webkit-animation-iteration-count: 1;
-webkit-transform-origin: 100% 100%;
-webkit-animation-fill-mode: forwards;
/*Chrome 16+, Safari 4+*/
-moz-animation: animationFrames9 linear 0.5s;
-moz-animation-iteration-count: 1;
-moz-transform-origin: 100% 100%;
-moz-animation-fill-mode: forwards;
/*FF 5+*/
-o-animation: animationFrames9 linear 0.5s;
-o-animation-iteration-count: 1;
-o-transform-origin: 100% 100%;
-o-animation-fill-mode: forwards;
/*Not implemented yet*/
-ms-animation: animationFrames9 linear 0.5s;
-ms-animation-iteration-count: 1;
-ms-transform-origin: 100% 100%;
-ms-animation-fill-mode: forwards;
/*IE 10+*/
}
#keyframes animationFrames9 {
0% {
transform: translate(1px, 1px) scaleY(NaN);
}
100% {
transform: translate(5px, 0px) rotate(45deg) scaleY(1.00);
}
}
#-moz-keyframes animationFrames9 {
0% {
-moz-transform: translate(1px, 1px) scaleY(NaN);
}
100% {
-moz-transform: translate(5px, 0px) rotate(45deg) scaleY(1.00);
}
}
#-webkit-keyframes animationFrames9 {
0% {
-webkit-transform: translate(1px, 1px) scaleY(NaN);
}
100% {
-webkit-transform: translate(5px, 0px) rotate(45deg) scaleY(1.00);
}
}
#-o-keyframes animationFrames9 {
0% {
-o-transform: translate(1px, 1px) scaleY(NaN);
}
100% {
-o-transform: translate(5px, 0px) rotate(45deg) scaleY(1.00);
}
}
#-ms-keyframes animationFrames9 {
0% {
-ms-transform: translate(1px, 1px) scaleY(NaN);
}
100% {
-ms-transform: translate(5px, 0px) rotate(45deg) scaleY(1.00);
}
}
HTML
<div class="row">
<div class="column">
<a id="offerblock4" href="#">
<div class = "offer4 fullpic">
<img src="sm1611_offer4.jpg" style=" position:absolute; z-index:12;"></img>
</a>
<div id="rotategiggles" style="width:160px; height:auto; padding-left:80px; padding-top:338px;">
<img src="GIGGLES_1.png"></img>
</div>
</div>
BONUS POINTS i believe what i asked for is pretty standard and isn't too difficult and i wish i would do it myself so i will also challenege everyone by asking to even go one step further and if it would be possible to have js (or css) which would trigger the original animation on hover as is and then as the mouse leaves the element trigger another animation on the same element, basically allowing me to reverse the animation as the mouse leaves the area :)
Thank you all!
JS FIDDLE : https://jsfiddle.net/sLqf2zbh/
EDIT
I have seem to of over complicated with poor instructions; at the moment my animation works fine when #offerblock4 is hovered over making #rotategiggles animate . What i would wish to do is include JS so when the mouse leaves #offerblock4 then #rotategiggles keeps it's end of animation position and doesn't cut back too its original starting position.
The bonus points request was referring to when the mouse leaves the area of #offerblocks4 then the animation reverses back to its original position. I don't need help with the css animation itself more so something which will trigger a second animation when the mouse 'hovers off' #offerblocks4.
I have no idea what you were asking - but I think part of it was something like this?
How many bonus points do I get? (better be a lot)
#offerblock4+#rotategiggles {
animation: animationFrames8 linear 0.5s;
animation-iteration-count: 1;
transform-origin: 00 00;
transform: scale(-1.0, -1.0);
animation-fill-mode: forwards;
/*when the spec is finished*/
-webkit-animation: animationFrames8 linear 0.5s;
-webkit-animation-iteration-count: 1;
-webkit-transform-origin: 00 00;
-webkit-animation-fill-mode: forwards;
/*Chrome 16+, Safari 4+*/
-moz-animation: animationFrames8 linear 0.5s;
-moz-animation-iteration-count: 1;
-moz-transform-origin: 0 00;
-moz-animation-fill-mode: forwards;
/*FF 5+*/
-o-animation: animationFrames8 linear 0.5s;
-o-animation-iteration-count: 1;
-o-transform-origin: 100 100;
-o-animation-fill-mode: forwards;
/*Not implemented yet*/
-ms-animation: animationFrames8 linear 0.5s;
-ms-animation-iteration-count: 1;
-ms-transform-origin: 00 0;
-ms-animation-fill-mode: forwards;
/*IE 10+*/
}
#offerblock4:hover+#rotategiggles {
animation: animationFrames9 linear 0.5s;
animation-iteration-count: 1;
transform-origin: 00 00;
animation-fill-mode: forwards;
/*when the spec is finished*/
-webkit-animation: animationFrames9 linear 0.5s;
-webkit-animation-iteration-count: 1;
-webkit-transform-origin: 00 00;
-webkit-animation-fill-mode: forwards;
/*Chrome 16+, Safari 4+*/
-moz-animation: animationFrames9 linear 0.5s;
-moz-animation-iteration-count: 1;
-moz-transform-origin: 0 00;
-moz-animation-fill-mode: forwards;
/*FF 5+*/
-o-animation: animationFrames9 linear 0.5s;
-o-animation-iteration-count: 1;
-o-transform-origin: 100 100;
-o-animation-fill-mode: forwards;
/*Not implemented yet*/
-ms-animation: animationFrames9 linear 0.5s;
-ms-animation-iteration-count: 1;
-ms-transform-origin: 00 0;
-ms-animation-fill-mode: forwards;
/*IE 10+*/
}
#keyframes animationFrames9 {
0% {
transform: translate(1px, 1px);
}
100% {
transform: translate(5px, 0px) rotate(45deg) scaleY(1.00);
}
}
#-moz-keyframes animationFrames9 {
0% {
-moz-transform: translate(1px, 1px);
}
100% {
-moz-transform: translate(5px, 0px) rotate(45deg) scaleY(1.00);
}
}
#-webkit-keyframes animationFrames9 {
0% {
-webkit-transform: translate(1px, 1px);
}
100% {
-webkit-transform: translate(5px, 0px) rotate(45deg) scaleY(1.00);
}
}
#-o-keyframes animationFrames9 {
0% {
-o-transform: translate(1px, 1px);
}
100% {
-o-transform: translate(5px, 0px) rotate(45deg) scaleY(1.00);
}
}
#-ms-keyframes animationFrames9 {
0% {
-ms-transform: translate(1px, 1px);
}
100% {
-ms-transform: translate(5px, 0px) rotate(45deg) scaleY(1.00);
}
}
#keyframes animationFrames8 {
100% {
transform: translate(1px, 1px);
}
0% {
transform: translate(5px, 0px) rotate(45deg) scaleY(1.00);
}
}
#-moz-keyframes animationFrames8 {
100% {
-moz-transform: translate(1px, 1px);
}
0% {
-moz-transform: translate(5px, 0px) rotate(45deg) scaleY(1.00);
}
}
#-webkit-keyframes animationFrames8 {
100% {
-webkit-transform: translate(1px, 1px);
}
0% {
-webkit-transform: translate(5px, 0px) rotate(45deg) scaleY(1.00);
}
}
#-o-keyframes animationFrames8 {
100% {
-o-transform: translate(1px, 1px);
}
0% {
-o-transform: translate(5px, 0px) rotate(45deg) scaleY(1.00);
}
}
#-ms-keyframes animationFrames8 {
100% {
-ms-transform: translate(1px, 1px);
}
0% {
-ms-transform: translate(5px, 0px) rotate(45deg) scaleY(1.00);
}
}
<div class="row">
<div class="column">
<a id="offerblock4" href="#">
<div class="offer4 fullpic">
<img src="sm1611_offer4.jpg" style=" position:absolute; z-index:12;"></img>
</a>
<div id="rotategiggles" style="width:160px; height:auto; padding-left:80px; padding-top:3px;">
<img src="GIGGLES_1.png"></img>
</div>
</div>
I'm looking for a workaround for safari's buggy rendering of inner SVG with CSS Animations.
Here it is on codepen.
Chrome does this perfectly well, but in Safari the transitioning within the animation doesn't render until it jumps between states.
What is causing it?
Relevant CSS3
.avatar {
z-index: 800;
}
.avatar path {
stroke: #e1afff;
stroke-width: 0.15;
-webkit-transform-origin: center center;
transform-origin: center center;
-webkit-transition: all 6s ease;
transition: all 6s ease;
-webkit-transform: translate(0);
transform: translate(0);
}
.avatar path:nth-of-type(4n+1) {
-webkit-animation: p1 3s ease 1;
animation: p1 3s ease 1;
}
.avatar path:nth-of-type(4n+2) {
-webkit-animation: p2 3s ease 1;
animation: p2 3s ease 1;
}
.avatar path:nth-of-type(4n+3) {
-webkit-animation: p3 3s ease 1;
animation: p3 3s ease 1;
}
.avatar path:nth-of-type(4n+4) {
-webkit-animation: p4 3s ease 1;
animation: p4 3s ease 1;
}
.hover {
position: absolute;
width: 40%;
height: 40vw;
top: 50%;
left: 30%;
margin-top: -20vw;
border-radius: 50%;
cursor: pointer;
z-index: 1000;
background: rgba(0,0,0,0);
-webkit-animation: waitforit 0 ease-in 3s 1 forwards;
animation: waitforit 0 ease-in 3s 1 forwards;
}
.hover:hover + .avatar path:nth-of-type(4n+1) {
-webkit-transform: translate(800%, 400%) rotate(-690deg) translateZ(0);
transform: translate(800%, 400%) rotate(-690deg) translateZ(0);
}
.hover:hover + .avatar path:nth-of-type(4n+2) {
-webkit-transform: translate(-700%, 600%) rotate(-720deg) translateZ(0);
transform: translate(-700%, 600%) rotate(-720deg) translateZ(0);
}
.hover:hover + .avatar path:nth-of-type(4n+3) {
-webkit-transform: translate(-900%, -500%) rotate(-820deg) translateZ(0);
transform: translate(-900%, -500%) rotate(-820deg) translateZ(0);
}
.hover:hover + .avatar path:nth-of-type(4n+4) {
-webkit-transform: translate(700%, -800%) rotate(-950deg) translateZ(0);
transform: translate(700%, -800%) rotate(-950deg) translateZ(0);
}
#-webkit-keyframes p1 {
0% {
-webkit-transform: translate(-300%, -700%) rotate(520deg) translateZ(0);
transform: translate(-300%, -700%) rotate(520deg) translateZ(0);
}
100% {
-webkit-transform: translate(0);
transform: translate(0);
}
}
#keyframes p1 {
0% {
-webkit-transform: translate(-300%, -700%) rotate(520deg) translateZ(0);
transform: translate(-300%, -700%) rotate(520deg) translateZ(0);
}
100% {
-webkit-transform: translate(0);
transform: translate(0);
}
}
#-webkit-keyframes p2 {
0% {
-webkit-transform: translate(400%, -900%) rotate(850deg) translateZ(0);
transform: translate(400%, -900%) rotate(850deg) translateZ(0);
}
100% {
-webkit-transform: translate(0);
transform: translate(0);
}
}
#keyframes p2 {
0% {
-webkit-transform: translate(400%, -900%) rotate(850deg) translateZ(0);
transform: translate(400%, -900%) rotate(850deg) translateZ(0);
}
100% {
-webkit-transform: translate(0);
transform: translate(0);
}
}
#-webkit-keyframes p3 {
0% {
-webkit-transform: translate(500%, 900%) rotate(325deg) translateZ(0);
transform: translate(500%, 900%) rotate(325deg) translateZ(0);
}
100% {
-webkit-transform: translate(0);
transform: translate(0);
}
}
#keyframes p3 {
0% {
-webkit-transform: translate(500%, 900%) rotate(325deg) translateZ(0);
transform: translate(500%, 900%) rotate(325deg) translateZ(0);
}
100% {
-webkit-transform: translate(0);
transform: translate(0);
}
}
#-webkit-keyframes p4 {
0% {
-webkit-transform: translate(-500%, 900%) rotate(748deg) translateZ(0);
transform: translate(-500%, 900%) rotate(748deg) translateZ(0);
}
100% {
-webkit-transform: translate(0);
transform: translate(0);
}
}
#keyframes p4 {
0% {
-webkit-transform: translate(-500%, 900%) rotate(748deg) translateZ(0);
transform: translate(-500%, 900%) rotate(748deg) translateZ(0);
}
100% {
-webkit-transform: translate(0);
transform: translate(0);
}
}
#-webkit-keyframes waitforit {
0% {
display: none;
}
100% {
display: block;
}
}
#keyframes waitforit {
0% {
display: none;
}
100% {
display: block;
}
}
The vendor prefix -webkit- applies to both Chrome & Safari. Safari is known to be buggy in rendering inner SVG animations, however there is usually a happy medium. Can anyone think of a workaround of sorts? Maybe an easy js fix?
I'm new to this and hope I'm asking politely/correctly?!
(I have included the code I have so far below.)
I am trying to apply the hover of the '#blueBar' by hovering over the '#spiral' div.
I've tried using CSS, JQuery and Javascript for some time, but to no avail.
The end result is I'd like to have 2 'blueBars' crossing each other behind the Badge.png.
Upon hovering over the 'spiral' I'd like the badge to spin and the 2 'blueBars' increase in scale protruding from behind the badge.png.
Many thanks.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!doctype HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#spiral{
border-radius: 50%;
background-image: url(badge.png);
position: absolute;
top: 50%;
left: 50%;
width: 350px;
height: 350px;
transition:all 1s ease-out;
transform:rotate(0deg) infinite;
-webkit-transform:rotate(0deg) infinite;
-moz-animation: rotate(0deg) infinite;
-ms-animation: rotate(0deg) infinite;
-o-animation: rotate(0deg) infinite;
animation: rotate(0deg) infinite;/* Safari and Chrome */
}
#spiral:hover, #blueBar.hovered {
display: block;
width:350px;
height:350px;
border-radius: 50%;
background-image: url(badge.png);
-webkit-animation: spin 1s linear infinite;
-moz-animation: spin 1s linear infinite;
-ms-animation: spin 1s linear infinite;
-o-animation: spin 1s linear infinite;
animation: spin 1s linear infinite;
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
#-webkit-keyframes spin {
0% {-webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
#-ms-keyframes spin {
0% {-ms-transform: rotate(0deg); }
100% { -ms-transform: rotate(360deg); }
}
#-moz-keyframes spin {
0% { -moz-transform: rotate(0deg); }
100% { -moz-transform: rotate(360deg); }
}
#-o-keyframes spin {
0% { -o-transform: rotate(0deg); }
100% { -o-transform: rotate(360deg); }
}
#blueBar {
width: 28px;
height: 28px;
background: #25cadb;
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#blueBar:hover, .blueBar.hover{
width: 28px;
height: 28px;
background: #25cadb;
-moz-transform: rotate(45deg) scale(1, 10);
-webkit-transform: rotate(45deg) scale(1, 10);
-ms-transform: rotate(45deg) scale(1, 10);
-o-transform: rotate(45deg) scale(1, 10);
transform: rotate(45deg) scale(1, 10);
}
</style>
<meta HTTP-equiv="Content-Type" content="text/HTML; char-set=UTF-8">
<title>Animated Features</title>
<link rel="stylesheet" href="style.css">
<link rel="shortcut icon" href="almost.ico" type="image/x-icon">
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" yahoo="fix" style="font-family: Georgia, Times, serif">
<center>
<div style="height: 350px"> </div>
<script>
$('#spiral').on('mouseenter mouseleave', function(e) {
$('#blueBar:hover').trigger(e.type);
})
</script>
<div width="800px">
<div id="spiral">
<div id="spiral1">
</div>
</div>
<div id="blueBar" > </div>
</div>
</center>
</body>
</html>
You can use the sibling selector.
#spiral:hover ~ #blueBar {
background: red;
}
#blueBar will become red when #spiral is hovered over.
You can see an example on JSFiddle here. Hover over the "spiral" div and notice that the "blue bar" div becomes red.
If the elements won't always be siblings as in James Monger's answer, you could transfer the CSS in your #blueBar:hover to a class called .hover. Then, in your JQuery you'd write:
$('#spiral').on('mouseenter mouseout', function(){
$('#blueBar').toggleClass('hover');
});
Fiddle: https://jsfiddle.net/xk9ckcrk/2/
I modified the CSS a bit to show more easily what's going on. You should be able to add whatever animations and transformations you want to the .hover class and have it work.
So i'm a little new to rails and javascript,
I love the look of this, http://codepen.io/msisto/pen/LntJe
Heres the codepen code:
#-webkit-keyframes rotate-forever {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#-moz-keyframes rotate-forever {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes rotate-forever {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.loading-spinner {
-webkit-animation-duration: 0.75s;
-moz-animation-duration: 0.75s;
animation-duration: 0.75s;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-name: rotate-forever;
-moz-animation-name: rotate-forever;
animation-name: rotate-forever;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
animation-timing-function: linear;
height: 30px;
width: 30px;
border: 8px solid #ffffff;
border-right-color: transparent;
border-radius: 50%;
display: inline-block;
}
body {
background: #774CFF;
}
.loading-spinner {
position: absolute;
top: 50%;
right: 0;
bottom: 0;
left: 50%;
margin: -15px 0 -15px;
}
<body>
<div class="loading-spinner"></div>
</body>
However i'm not sure how i can get this into my application. I'm wanting to have it so that this spins before each page loads.
Any ideas what i can do? any gems for this or?
Rails 4+ comes with Turbolinks gem.
You use this events to show/hide the loading before page loads.