Using jQuery to restart an animation that is already hidden and transparent - javascript

I have a CSS animation which goes from Visible to hidden and solid to transparent at the same time. My problem is, this is an animation which I need to display when a button is clicked. How do I trigger the event on click, when the actual hiding and fading is performed by CSS and not jQuery? For example, when Div 'One' is clicked, I want the overlay to play once. Same when the other divs are clicked. I can't seem to work it out, and help would be great!
$(".btn").click(function() {
var el = $(".overlay"),
newone = el.clone(true);
el.before(newone);
$("." + el.attr("class") + ":last").remove();
});
.overlay {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
display: table;
background-color:rgb(39, 174, 96);
z-index: 10;
}
h1.thank-you-message { font-size:12.0rem;display: table-cell; color:#fff; text-align: center;
vertical-align: middle;-webkit-perspective: 1000;-webkit-font-smoothing: antialiased;}
.animated-thank-you {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
#-webkit-keyframes fadeOutScale {
0% {visibility:visible; opacity: 1;transform: scale(1); /* CSS3 */
-moz-transform: scale(1); /* Firefox */
-webkit-transform: scale(1); /* Webkit */
-o-transform: scale(1); /* Opera */
-ms-transform: scale(1); /* IE 9 */}
40% {opacity: 1;transform: transform: scale(0.75); /* CSS3 */
-moz-transform: scale(0.75); /* Firefox */
-webkit-transform: scale(0.75); /* Webkit */
-o-transform: scale(0.75); /* Opera */
-ms-transform: scale(0.75); /* IE 9 */}
60% {opacity: 1;transform: transform: scale(0.75); /* CSS3 */
-moz-transform: scale(0.75); /* Firefox */
-webkit-transform: scale(0.75); /* Webkit */
-o-transform: scale(0.75); /* Opera */
-ms-transform: scale(0.75); /* IE 9 */}
100% {visibility:hidden; opacity: 0;
transform: -moz-transform: scale(0.5); /* Firefox */
-webkit-transform: scale(0.5); /* Webkit */
-o-transform: scale(0.5); /* Opera */
-ms-transform: scale(0.5); /* IE 9 */}
}
#keyframes fadeOutScale {
0% {visibility:visible; opacity: 1; transform: scale(1);}
40% {opacity: 1;transform: scale(0.75);}
60% {opacity: 1;transform: scale(0.75);}
100% {visibility:hidden;opacity: 0; transform: scale(0.5);}
}
.fadeOutScale {
-webkit-animation-name: fadeOutScale;
animation-name: fadeOutScale;
}
.animated-fade-out {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
#-webkit-keyframes fadeOut {
0% {visibility:visible; opacity: 1;}
40% {opacity: 1;}
60% {opacity: 1;}
100% {visibility:hidden;opacity: 0;}
}
#keyframes fadeOut {
0% {visibility:visible; opacity: 1;}
40% {opacity: 1;}
60% {opacity: 1;}
100% {visibility:hidden;opacity: 0;}
}
.fadeOut {
-webkit-animation-name: fadeOut;
animation-name: fadeOut;
}
<div class="overlay animated-fade-out fadeOut"><h1 class="thank-you-message animated-thank-you fadeOutScale">Thank You</h1></div>
<div class="btn" style="height:20px;">ONE</div>
<div class="btn" style="height:20px;">two</div>
<div class="btn" style="height:20px;">three</div>

function runAnimation () {
$('.overlay').removeClass('animated-fade-out fadeOut');
$('.overlay h1').removeClass('fadeOutScale');
setTimeout(function() {
$('.overlay').addClass('animated-fade-out fadeOut');
$('.overlay h1').addClass('fadeOutScale');
});
}
$(runAnimation);
$('#one').click(runAnimation);
.overlay {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
display: table;
background-color:rgb(39, 174, 96);
z-index: 10;
}
h1.thank-you-message { font-size:12.0rem;display: table-cell; color:#fff; text-align: center;
vertical-align: middle;-webkit-perspective: 1000;-webkit-font-smoothing: antialiased;}
.animated-thank-you {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
#-webkit-keyframes fadeOutScale {
0% {visibility:visible; opacity: 1;transform: scale(1); /* CSS3 */
-moz-transform: scale(1); /* Firefox */
-webkit-transform: scale(1); /* Webkit */
-o-transform: scale(1); /* Opera */
-ms-transform: scale(1); /* IE 9 */}
40% {opacity: 1;transform: transform: scale(0.75); /* CSS3 */
-moz-transform: scale(0.75); /* Firefox */
-webkit-transform: scale(0.75); /* Webkit */
-o-transform: scale(0.75); /* Opera */
-ms-transform: scale(0.75); /* IE 9 */}
60% {opacity: 1;transform: transform: scale(0.75); /* CSS3 */
-moz-transform: scale(0.75); /* Firefox */
-webkit-transform: scale(0.75); /* Webkit */
-o-transform: scale(0.75); /* Opera */
-ms-transform: scale(0.75); /* IE 9 */}
100% {visibility:hidden; opacity: 0;
transform: -moz-transform: scale(0.5); /* Firefox */
-webkit-transform: scale(0.5); /* Webkit */
-o-transform: scale(0.5); /* Opera */
-ms-transform: scale(0.5); /* IE 9 */}
}
#keyframes fadeOutScale {
0% {visibility:visible; opacity: 1; transform: scale(1);}
40% {opacity: 1;transform: scale(0.75);}
60% {opacity: 1;transform: scale(0.75);}
100% {visibility:hidden;opacity: 0; transform: scale(0.5);}
}
.fadeOutScale {
-webkit-animation-name: fadeOutScale;
animation-name: fadeOutScale;
}
.animated-fade-out {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
#-webkit-keyframes fadeOut {
0% {visibility:visible; opacity: 1;}
40% {opacity: 1;}
60% {opacity: 1;}
100% {visibility:hidden;opacity: 0;}
}
#keyframes fadeOut {
0% {visibility:visible; opacity: 1;}
40% {opacity: 1;}
60% {opacity: 1;}
100% {visibility:hidden;opacity: 0;}
}
.fadeOut {
-webkit-animation-name: fadeOut;
animation-name: fadeOut;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="overlay"><h1 class="thank-you-message animated-thank-you">Thank You</h1></div>
<div id="one" style="height:20px;">ONE</div>
<div id="two" style="height:20px;">two</div>
<div id="three" style="height:20px;">three</div>

$(".btn").click(function() {
var $elOvl = $('.overlay'),
$elThx = $('.thank-you-message');
function addAnimationClasses() {
$elOvl.addClass('fadeOut');
$elThx.addClass('fadeOutScale');
}
$elOvl.removeClass('fadeOut');
$elThx.removeClass('fadeOutScale');
/*
We need to add classes AFTER they have been removed,
so we postpone the adding of classes to the next frame with the next line.
*/
setTimeout(addAnimationClasses, 0);
});
.btn {
background: #3c9;
margin: 9px 0;
padding: 3px;
}
.overlay {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
display: table;
background-color: rgb(39, 174, 96);
z-index: 10;
}
h1.thank-you-message {
font-size: 12.0rem;
display: table-cell;
color: #fff;
text-align: center;
vertical-align: middle;
-webkit-perspective: 1000;
-webkit-font-smoothing: antialiased;
}
.animated-thank-you {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
#-webkit-keyframes fadeOutScale {
0% {
visibility: visible;
opacity: 1;
transform: scale(1);
/* CSS3 */
-moz-transform: scale(1);
/* Firefox */
-webkit-transform: scale(1);
/* Webkit */
-o-transform: scale(1);
/* Opera */
-ms-transform: scale(1);
/* IE 9 */
}
40% {
opacity: 1;
transform: transform: scale(0.75);
/* CSS3 */
-moz-transform: scale(0.75);
/* Firefox */
-webkit-transform: scale(0.75);
/* Webkit */
-o-transform: scale(0.75);
/* Opera */
-ms-transform: scale(0.75);
/* IE 9 */
}
60% {
opacity: 1;
transform: transform: scale(0.75);
/* CSS3 */
-moz-transform: scale(0.75);
/* Firefox */
-webkit-transform: scale(0.75);
/* Webkit */
-o-transform: scale(0.75);
/* Opera */
-ms-transform: scale(0.75);
/* IE 9 */
}
100% {
visibility: hidden;
opacity: 0;
transform: -moz-transform: scale(0.5);
/* Firefox */
-webkit-transform: scale(0.5);
/* Webkit */
-o-transform: scale(0.5);
/* Opera */
-ms-transform: scale(0.5);
/* IE 9 */
}
}
#keyframes fadeOutScale {
0% {
visibility: visible;
opacity: 1;
transform: scale(1);
}
40% {
opacity: 1;
transform: scale(0.75);
}
60% {
opacity: 1;
transform: scale(0.75);
}
100% {
visibility: hidden;
opacity: 0;
transform: scale(0.5);
}
}
.fadeOutScale {
-webkit-animation-name: fadeOutScale;
animation-name: fadeOutScale;
}
.animated-fade-out {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
#-webkit-keyframes fadeOut {
0% {
visibility: visible;
opacity: 1;
}
40% {
opacity: 1;
}
60% {
opacity: 1;
}
100% {
visibility: hidden;
opacity: 0;
}
}
#keyframes fadeOut {
0% {
visibility: visible;
opacity: 1;
}
40% {
opacity: 1;
}
60% {
opacity: 1;
}
100% {
visibility: hidden;
opacity: 0;
}
}
.fadeOut {
-webkit-animation-name: fadeOut;
animation-name: fadeOut;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<div class="overlay animated-fade-out fadeOut">
<h1 class="thank-you-message animated-thank-you fadeOutScale">Thank You</h1>
</div>
<div class="btn">ONE</div>
<div class="btn">two</div>
<div class="btn">three</div>

To start an animation on an element, you need to add a class to it. In your case fadeOut and fadeOutScale.
If you only want the animation to start on a click, you need to remove both your animation classes from your animated elements, so the animation doesn't start at load.
<div class="overlay animated-fade-out">
<h1 class="thank-you-message animated-thank-you">Thank You</h1>
</div>
<div class="btn" style="height:20px;">ONE</div>
<div class="btn" style="height:20px;">two</div>
<div class="btn" style="height:20px;">three</div>
And to start the animation, you need to add classes to your animated elements and later remove them, so you can later add them again, to start the animation again.
$(".btn").click(function() {
$(".overlay").addClass("fadeOut").one("animationend", function() {
$(this).removeClass("fadeOut").find(".thank-you-message").removeClass("fadeOutScale");
}).find(".thank-you-message").addClass("fadeOutScale");
});

It is not required to clone the overlay div for every click on btn div. Instead, just remove the classes applied for overlay div and h1 tag, and add the classes back after a small delay.
The script will look like:
$(".btn").click(function() {
$("#overlay").removeClass("overlay animated-fade-out fadeOut").hide();
$("#overlay h1").removeClass("thank-you-message animated-thank-you fadeOutScale");
setTimeout(function(){
$("#overlay").css('display','').addClass("overlay animated-fade-out fadeOut");
$("#overlay h1").addClass("thank-you-message animated-thank-you fadeOutScale");
},1);
});
See the code here:
https://jsfiddle.net/code/
Result here:
https://jsfiddle.net/result/

Related

How to add scroll class to element and remove it when done

Am trying to add a scrolling class to a text every 1 minute once the text finished scrolling i will remove the class and wait for the next 1 minute. Please can anyone help me out on this below is my sample code but it doesn't work as expected.
$(function(event){
$infoLongMessage = $("#infoLongMessage");
var wait = 60000;
var timer = ($infoLongMessage.text().length + wait);
setInterval(function(){
$infoLongMessage.toggleClass("scroll-left");
}, timer);
})
.content{
background-color: #000;
color: #fff;
padding: 6px 10px;
overflow: hidden;
}
#infoLongMessage{
overflow: hidden;
white-space: pre;
display:block;
}
.scroll-left{
/* Starting position */
-moz-transform:translateX(100%);
-webkit-transform:translateX(100%);
transform:translateX(100%);
/* Apply animation to this element */
-moz-animation: scrollleft 15s linear infinite;
-webkit-animation: scrollleft 15s linear infinite;
animation: scrollleft 15s linear infinite;
}
/* Move it (define the animation) */
#-moz-keyframes scrollleft {
0% { -moz-transform: translateX(100%); }
100% { -moz-transform: translateX(-100%); }
}
#-webkit-keyframes scrollleft {
0% { -webkit-transform: translateX(100%); }
100% { -webkit-transform: translateX(-100%); }
}
#keyframes scrollleft {
0% {
-moz-transform: translateX(100%); /* Firefox bug fix */
-webkit-transform: translateX(100%); /* Firefox bug fix */
transform: translateX(100%);
}
100% {
-moz-transform: translateX(-100%); /* Firefox bug fix */
-webkit-transform: translateX(-100%); /* Firefox bug fix */
transform: translateX(-100%);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content">
<span id="infoLongMessage" class="scroll-left">Browser sources let you display a webpage from the internet or a local file and are commonly used for widgets and alerts</span>
</div>
You don't need any js to achieve your idea. You need a ticker. Also you can put delay to your animation if you need.
#-webkit-keyframes ticker {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
visibility: visible;
}
100% {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}
#keyframes ticker {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
visibility: visible;
}
100% {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}
.ticker-wrap {
position: fixed;
top: 0;
width: 100%;
overflow: hidden;
background-color: #9a1f1f;
color: #fff;
padding: 6px 10px;
padding-left: 100%;
box-sizing: content-box;
}
.ticker-wrap .ticker {
display: inline-block;
height: 2rem;
line-height: 2rem;
white-space: nowrap;
padding-right: 100%;
box-sizing: content-box;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-name: ticker;
animation-name: ticker;
-webkit-animation-duration: 30s;
animation-duration: 30s;
}
.ticker-wrap .ticker__item {
display: inline-block;
padding: 0 1rem;
font-size: 1rem;
color: white;
}
<div class="ticker-wrap">
<div class="ticker">
<div class="ticker__item">Hi Lea!</div>
<div class="ticker__item">Look at them !!!</div>
<div class="ticker__item">Owww new items...</div>
<div class="ticker__item">
offers | save up to 50% — shop now
</div>
</div>
</div>

Why does the last frame show up before first in animation?

I was trying to make a "bounce-in" effect where the circle isn't there before the animation, then the animation is executed on scroll, and the circle remains there after the animation is over. But for some reason it's there even before the animation, then disappears (since first frame opacity is 0) then appears again. I'm not sure what I'm doing wrong.
if (browser.canUse('transition')) {
var on = function() {
// Circles
$('.circle')
.scrollex({
mode: 'bottom',
delay: 50,
initialize: function() {
$(this).addClass('bounceIn');
},
terminate: function() {
$(this).removeClass('bounceIn');
},
enter: function() {
$(this).removeClass('bounceIn');
},
leave: function() {
$(this).addClass('bounceIn');
}
});
.circle {
position: absolute;
border-radius: 50%;
}
.circle.circle1 {
top: 80px;
left: 120px;
width: 100px;
height: 100px;
background: white;
opacity: 0;
}
/* ----------- BOUNCE IN ------------*/
#-webkit-keyframes bounceIn {
from,
20%,
40%,
60%,
80%,
to {
-webkit-animation-timing-function: cubic-bezier(0.315, 0.71, 0.455, 1);
animation-timing-function: cubic-bezier(0.315, 0.71, 0.455, 1);
}
0% {
opacity: 0;
-webkit-transform: scale(0.3);
transform: scale(0.3);
}
20% {
-webkit-transform: scale(1.03);
transform: scale(1.03);
}
40% {
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
60% {
opacity: 1;
-webkit-transform: scale(1.03);
transform: scale(1.03);
}
80% {
-webkit-transform: scale(0.97);
transform: scale(0.97);
}
to {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
}
#keyframes bounceIn {
from,
20%,
40%,
60%,
80%,
to {
-webkit-animation-timing-function: cubic-bezier(0.315, 0.71, 0.455, 1);
animation-timing-function: cubic-bezier(0.315, 0.71, 0.455, 1);
}
0% {
opacity: 0;
-webkit-transform: scale(0.3);
transform: scale(0.3);
}
20% {
-webkit-transform: scale(1.03);
transform: scale(1.03);
}
40% {
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
60% {
opacity: 1;
-webkit-transform: scale(1.03);
transform: scale(1.03);
}
80% {
-webkit-transform: scale(0.97);
transform: scale(0.97);
}
to {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
}
.bounceIn {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-name: bounceIn;
animation-name: bounceIn;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
<div class="circle circle1"></div>

JS to keep css selector hover state on - css animation, have tried multiple answers with no success

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>

Workaround for safari's buggy rendering of inner SVG Animation?

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?

Seamlessly transition back and forth with only one animation class?

I want to use one class to trigger an animation, and upon removal of that class redo that animation in reverse.
It's hard to visualize, so I've created a CodePen of where I'm at currently.
You'll notice that when .zoom is removed from #box, the #box just vanishes. It doesn't do the animation in reverse, which is ultimately the goal.
How can I seamlessly transition back and forth, with only one animation class? Normally I might use transitions, but you can't transition with transforms.
Try adding .zoomout class , css animations , utilizing .removeClass() , second class at .toggleClass()
window.onclick = function() {
if (!$("#box").is(".zoom")) {
$("#box").removeClass("zoomout")
.toggleClass("zoom");
} else {
$("#box").toggleClass("zoom zoomout");
}
};
#box {
width: 256px;
height: 256px;
background: black;
opacity: 0;
display: block;
transform: scale(1.15, 1.15);
margin: 16px 0px;
}
.zoom {
animation: zoom 500ms;
animation-fill-mode: both;
-moz-animation: zoom 500ms;
-moz-animation-fill-mode: both;
-webkit-animation: zoom 500ms;
-webkit-animation-fill-mode: both;
}
.zoomout {
animation: zoomout 500ms;
animation-fill-mode: both;
-moz-animation: zoomout 500ms;
-moz-animation-fill-mode: both;
-webkit-animation: zoomout 500ms;
-webkit-animation-fill-mode: both;
}
#keyframes zoom {
0% {
opacity: 0;
transform: scale(1.15);
}
100% {
opacity: 1;
transform: scale(1);
}
}
#-moz-keyframes zoom {
0% {
opacity: 0;
transform: scale(1.15);
}
100% {
opacity: 1;
transform: scale(1);
}
}
#-webkit-keyframes zoom {
0% {
opacity: 0;
transform: scale(1.15);
}
100% {
opacity: 1;
transform: scale(1);
}
}
#keyframes zoomout {
0% {
opacity: 1;
transform: scale(1.15);
}
100% {
opacity: 0;
transform: scale(1);
}
}
#-moz-keyframes zoomout {
0% {
opacity: 1;
transform: scale(1.15);
}
100% {
opacity: 0;
transform: scale(1);
}
}
#-webkit-keyframes zoomout {
0% {
opacity: 1;
transform: scale(1.15);
}
100% {
opacity: 0;
transform: scale(1);
}
}
body {
margin: 0;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -60%);
-moz-transform: translate(-50%, -60%);
-webkit-transform: translate(-50%, -60%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div id="box"></div>
Click the document to toggle the box.
codepen http://codepen.io/anon/pen/vOxxKE

Categories