Set (or pause) a looping anim to the end keyframe - javascript

Is it possibe to stop an infinitely looping animation at the end keyframe or to set the animation to the end keyframe?
I have an animation that I want to play again and again but be able to pause it after each iteration precisely at the end keyframe.
I thought this would be easy by just pausing the animation with
animatedElement.on(
"animationiteration webkitAnimationIteration oanimationiteration MSAnimationIteration",
function () {
animatedElement.css({
"-moz-animation-play-state": "paused",
"-o-animation-play-state": "paused",
"-webkit-animation-play-state": "paused",
"animation-play-state": "paused"
});
}
);
But the problem is that when tha animation is paused it has already begun on the next iteration. Thus, in practice, the animation is not stopped at the end keyframe but at the beginning of the next animation iteration.
In other words, in the animation beneath, the animation does not stop on 100% (90deg) but it stops some short time after the animation has already started from 0% (0deg) again.
#keyframes rotateAnim {
0% {
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}
100% {
-moz-transform: rotateY(90deg);
-ms-transform: rotateY(90deg);
-o-transform: rotateY(90deg);
-webkit-transform: rotateY(90deg);
transform: rotateY(90deg);
}
}
JSFiddle example

Related

My CSS animations don't work on iOS devices

I have a CSS and JS. Its simply when I slide down to page my logo coming from left with opacity 0. Then when I came back to top again its going back and opacity being 0. Its working on computer and android phones. But on iOS devices its doesn't work. What is wrong with on my code?
Logo is coming after I slide to top it moves to the left but does not disappear. Thank you for responses .
JS:
const handleToggle = (e) => {
let brands = document.getElementsByClassName("stickyBrand"); //Its my logo.
if (e) {
Array.from(brands).forEach((el) => {
el.classList.add("fadeInLeft");
el.classList.remove("fadeOutLeft");
});
} else {
Array.from(brands).forEach((el) => {
el.classList.add("fadeOutLeft");
el.classList.remove("fadeInLeft");
});
}
};
CSS:
#keyframes fadeInLeft {
0% {
opacity: 0;
transform: translateX(-50px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
#-webkit-keyframes fadeOutAnimationOperaSafari {
0% {
opacity: 0 !important;
-webkit-transform: translateX(0);
}
100% {
opacity: 1 !important;
-webkit-transform: translateX(-50px);
}
}
#keyframes fadeOutAnimation {
0% {
opacity: 0;
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
}
100% {
opacity: 1;
-webkit-transform: translateX(-50px);
-moz-transform: translateX(-50px);
-o-transform: translateX(-50px);
transform: translateX(-50px);
}
}
You need to add -webkit- prefixes to your transforms. On iOS, all browsers use safari webkit (because they are based on uiwebview), and currently iOS webkit only supports transforms with a prefix. What you are seeing is that the transform is always 0 throughout the animation because the non-prefixed selector is not used.

JavaScript Rotating Title

This script I am using creates a rotating text effect for a title on a site I am building. I am wanting to increase the speed in which they rotate gradually, so it starts off slow, gradually speeds up, holds the top speed of say 7x original and then slowly goes back to the starting pace and does this in a loop..
The time in which it takes to rotate is currently set at the end of the function in the '1200' area, so I assume it would need to come from a variable and have that behaviour stored in it within the function? Just lost on where to go next.
setInterval(() => {
const up = document.querySelector('.span-one[data-up]');
const show = document.querySelector('.span-one[data-show]');
const down = show.nextElementSibling || document.querySelector('.span-one:first-
child');
up.removeAttribute('data-up');
show.removeAttribute('data-show');
show.setAttribute('data-up', '');
down.setAttribute('data-show', '');
}, 1200);
Here is a code that can help you Though keep in mind, the styles are applied on a bare element. In your code you have to take into account the context as well.
/* Here you defined the animation. You can play around more and adjust the speed as you want */
#keyframes example {
/* Here are some options */
/* uncomment the sections to experiment */
/* 0% { transform: rotate(0deg); }
25% { transform: rotate(90deg); }
50% { transform: rotate(120deg); }
75% { transform: rotate(180deg); }
100% { transform: rotate(360deg); } */
/* 0% { transform: rotate(0deg); }
25% { transform: rotate(80deg); }
50% { transform: rotate(180deg); }
75% { transform: rotate(290deg); }
100% { transform: rotate(360deg); } */
0% { transform: rotate(0deg); }
50% { transform: rotate(100deg); }
75% { transform: rotate(300deg); }
100% { transform: rotate(360deg); }
/* You can google about the animations and how these percentages work, but actually its pretty simple */
}
.rotating {
/* This is optional, but needed if your title is block level element, just play around and see the differnce */
display: inline-block;
/* this is mandatory */
animation-name: example;
animation-duration: 5s;
animation-iteration-count: infinite;
}
<html>
<body>
<h1 class="rotating">My Dear Rotating Title</h1>
</body>
</html>
Stackoverflow is too strict on pasting the link to jsfiddle, so I embedded it here

If not clicked for 30s, apply CSS once, remove it, and re-iterate

So I have this funky little CodePen with an animation which I wish to run only if the user hasn't clicked on the <div class="someDiv"> for 30 seconds.
What I'm asking is, can anyone point me in the right direction, so when someone doesn't click on:
<div class="someDiv">
</div>
..for 30 seconds, this CSS will apply (ONCE) via appending id, similar to $(".someDiv").attr("id", "#theBounce"); and removing it in a reverse manner.
#theBounce {
background-color:red;
width:50px;
height:50px;
margin-left:auto;
margin-right:auto;
margin-top:5%;
-moz-animation: bounce 1.5s infinite;
-webkit-animation: bounce 1.5s infinite;
animation: bounce 1.5s infinite;
}
#-moz-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-moz-transform: translateY(0);
transform: translateY(0);
}
40% {
-moz-transform: translateY(-30px);
transform: translateY(-30px);
}
60% {
-moz-transform: translateY(-15px);
transform: translateY(-15px);
}
}
#-webkit-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
40% {
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
60% {
-webkit-transform: translateY(-15px);
transform: translateY(-15px);
}
}
#keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-webkit-transform: translateY(0);
transform: translateY(0);
}
40% {
-moz-transform: translateY(-30px);
-ms-transform: translateY(-30px);
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
60% {
-moz-transform: translateY(-15px);
-ms-transform: translateY(-15px);
-webkit-transform: translateY(-15px);
transform: translateY(-15px);
}
}
Meaning that a click will force the scripts counter to start over, and a lack of clicking for 30s will apply the CSS for at least 1,5s, and then remove it, and then start the timer. It might be my Googling skills at fault here, but I just can't figure out how to make this work. It's the timing/reset on click part I haven't figured out really.
A link, an idea, a suggestion. I'll be happy for all of it. Thanks.
I suggest you use setTimeout.
On document load start your setTimeout by defining a variable equal to the timer which after a certain number of milliseconds adds your content. Then redefine your timer variable to a new setTimeout for a new amount of milliseconds.
var myTimer;
myTimer = setTimeout(function(){ /*do stuff after 3 seconds*/ }, 3000);
Then if someone does something to stop the timer you can stop the timer by:
clearTimeout(myTimer);
Here's an example:
(function () {
var myTimer,
announce = document.getElementById("announcement"),
button = document.getElementById("stopIt");
function firstTimer () {
announcement.innerHTML = '';
myTimer = setTimeout(function () {
populateContent();
}, 500);
}
function populateContent () {
announcement.innerHTML = 'push the button!!';
myTimer = setTimeout(function () {
firstTimer();
}, 500);
}
button.addEventListener('click', function () {
clearTimeout(myTimer);
});
firstTimer();
}());
#announcement {
border: 1px solid red;
height: 5ex;
width: 30%;
}
<div id="announcement"></div>
<button type="button" id="stopIt">Stop!!</button>
I'm not an expert, so someone may have a better answer, but you can use the setTimeout function in Javascript to do this, I think.
https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setTimeout
The first example on that page seems similar to what you'd want, here's an untested suggestion:
HTML:
Live Example
Set CSS bounce after 30 seconds
Reset timer
Javascript:
var timeoutID;
function setBounce() {
timeoutID = window.setTimeout(bounceIt, 30000);
}
function bounceIt() {
// Code to find the bounce div, apply the CSS style to it,
// and then add a new timeout on the CSS to remove the style after 1.5s
}
function unbounceIt(bounceTimeoutID) {
window.clearTimeout(bounceTimeoutID);
}
function resetBounceTimer() {
window.clearTimeout(timeoutID);
}
Hopefully this is a step in the right direction

CSS 3D Box rotation

I am trying to create a div which would look as a box, and then it would automatically rotate to show different texts within it.
The effect in question is as shown in the 'RATATOUILLE', 'LASSITUDE', 'MURMUROUS', PALIMPSEST' & 'ASSEMBLAGE' buttons on the page:
http://tympanus.net/Development/CreativeLinkEffects/
I did use the code from a previous project written by someone else (author unknown).
I have a cube div, with 4 panels in it, and first 2 panels marked initial panel and next panel
<div class="cube flip-to-bottom">
<div class="initialpanel"><span>1st Panel</span></div>
<div class="nextpanel"><span>2nd Panel</span></div>
<div><span>3rd Panel</span></div>
<div><span>4th Panel</span></div>
</div>
both styled
.initialpanel {
-webkit-transform: translateZ(25px);
-moz-transform: translateZ(25px);
-o-transform: translateZ(25px);
-ms-transform: translateZ(25px);
transform: translateZ(25px);
}
.nextpanel {
-webkit-transform: rotateX(-90deg) translateZ(-25px);
-moz-transform: rotateX(-90deg) translateZ(-25px);
-o-transform: rotateX(-90deg) translateZ(-25px);
-ms-transform: rotateX(-90deg) translateZ(-25px);
transform: rotateX(-90deg) translateZ(-25px);
}
and finally a class which enables flip on the cube div
.flipNow {
-webkit-transform: rotateX(89deg);
-moz-transform: rotateX(89deg);
-o-transform: rotateX(89deg);
-ms-transform: rotateX(89deg);
transform: rotateX(89deg);
}
Tying these two together is my javascript which would go through the cube's children div, renaming through each iteration to animate using CSS.
function startRotating(currentIndex) {
current = $(".cube >div.initialpanel");
nextCurrent = current.next();
next = $(".cube >div.nextpanel");
nextNext = next.next();
var flipNow = setTimeout(function(){
$(".cube").addClass("flipNow");
}, 2000);
var stopFlip = setTimeout(function(){
$(".cube").removeClass("flipNow");
current.removeClass("initialpanel");
next.addClass("initialpanel");
next.removeClass("nextpanel");
nextNext.addClass("nextpanel");
}, 3000);
setTimeout(function(){
if(nextNext.length ===1){
startRotating($("div.initialpanel"));
}
},4000);
}
This code is supposed to rotate panel 1 and show panel 2, and rotate panel 2 and show panel 3, and rotate panel 3 and show panel 4 and stop after panel 4 as there are no more panels.
The rotation and revelations occour as expected, but due to removing flipNow class and renaming children div classes, the flip reverts back to initial position and then rotates to its new position. This is a link where a working copy of my problem is being hosted: http://jsfiddle.net/fatgamer85/m71osbLt/4/
any help would be appreciated which would help me to stop the double rotation on every panel reveal.
Thanks
I modified your fiddle (quite heavily) to give you a general case for N sided figure (in my example it's 5): fiddle. If you need further explanation, ask.

Flipping an image with JS/Jquery

I am looking to flip an image. I have gotten the css to work using:
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
I am looking to apply this to an image but am unsure of the formatting.
I tried doing:
var flip = "-moz-transform: scaleX(-1),-o-transform: scaleX(-1),-webkit-transform: scaleX(-1),transform: scaleX(-1),filter: FlipH,-ms-filter: 'FlipH'";
And then:
$("#chicken").delay(scrolllen).fadeOut(0).css({ left: 2600 + "px" , top : 2370 + "px" + flip}).fadeIn(0).animate({ left: 1600 + "px" , top : 2370 + "px"}, 5000, 'linear');
at a later point, but it doesn't seem to apply.
Are you trying do to something like this?
$('#image').mouseover(function(){
$(this).addClass('flipped');
}).mouseleave(function(){
$(this).removeClass('flipped');
});
the css:
.flipped {
transform: scale(-1, 1);
-moz-transform: scale(-1, 1);
-webkit-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
-khtml-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
}
jsFiddle here
I'd just use a class, like so:
.flipped {
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
Then just swap the class:
$("#chicken").delay(2000).fadeOut(1, function() {
$(this).addClass('flipped').show()
.animate({ left: 1600 + "px" , top : 2370 + "px"}, 5000, 'linear');
});
FIDDLE
I'm not completely sure I understand what you're looking for.
I'm thinking perhaps it can be done without any JavaScript at all? If you're looking to flip along the X axis, with some animation?
Flipping Image on Hover
JSFiddle: Image Flip on :hover
For this demo, I had to place the image HTML into a wrapper <div>, because otherwise the :hover and the scale() changes conflict with one another in funky ways. You'll understand if you remove the wrapper <div>.
HTML
<div class="flippy">
<img src="http://lorempixel.com/200/200/"/>
</div>
CSS:
.flippy>img {
/**/-moz-transform:scale(1,1);-webkit-transform:scale(1,1);
transform:scale(1,1);
/**/-webkit-transition:all 600ms ease;-webkit-transition:all 600ms ease;
transition:all 600ms ease; }
.flippy:hover>img {
/**/-moz-transform:scale(-1,1);-webkit-transform:scale(-1,1);
transform:scale(-1,1); }
If you need to control it with JavaScript, it should be easy enough to replace the :hover with another class, like .flipped, then do as you please in JS to activate it's flip state on and off.
//Chase.
Flipping Image on Attribute (click-based demo)
jsFiddle: Image Flip on Attribute
In this demo, the image flips when is has the flipped attribute set.
JavaScript:
// Toggles the 'flipped' attribute on the <img> tag.
$('.flippy').click(function(){
if ($(this).attr('flipped'))
$(this).removeAttr('flipped');
else $(this).attr('flipped','flipped');
});
CSS:
/* vendor-prefixes have been removed in this example */
/* We just change the scale based on the flipped attribute */
.flippy {
transform:scale(1,1);
transition:all 600ms ease; }
.flippy[flipped] {
transform:scale(-1,1); }
HTML: <img class="flippy" src="http://lorempixel.com/200/200/"/> -- as you can see, we no longer need the <div> wrapper for this example, as the :hover conflicts are no longer an issue.
//Chase.
<style type="text/css">
.transform-image {
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
</style>
<script type="text/javascript">
$("#chicken").hover(function(){
$(this).addClass("transform-image") },
function () {
$(this).removeClass("transform-image");
};
})
</script>

Categories

Resources