How to get keyframes animation to stop on last animation - javascript

I'm looking to stop my animation on my 100% keyframe.
Here it is, jQuery is shown at bottom. What I'm trying to figure out completely is how to animate these boxes so that if you click on whichever one is on the top, it moves to the bottom, and then the bottom one moves to the top. Any ideas?
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#keyframes active {
0% {
transform: translateX(0px);
}
33% {
transform: translateX(105px);
}
66% {
transform: rotateY(180deg) translateY(210px);
}
100% {
transform: rotateY(0deg) translateY(210px);
}
}
.all-wrap {border: 1px solid black;
}
.container {width:100px;height:100px;background-color:red;
perspective:400px;perspective-origin:50% 100px;
margin-right:auto;
display: block;
border: 2px solid purple;
animation-fill-mode: forwards;
background-repeat: no-repeat;
}
.containerActive {
animation: active 3s ease-in-out;
animation-fill-mode: forwards;
animation-iteration-count: 1;
transform-style: preserve-3d;
animation-direction: normal;
}
</style>
</head>
<body>
<div class="all-wrap">
<div class="container">
</div>
<div class="container">
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="/js/rotate.js"></script>
</body>
</html>
/* Here is the jQuery: */
$('[class*="container"]').on('click', function(){
$(this).toggleClass('containerActive');
});

Stopping on the 100% keyframe should be fulfilled with this code:
animation-fill-mode: forwards;
This has been previously addressed here:
Stopping a CSS3 Animation on last frame

I've solved it. Everything was perfect besides my key frames. Since I had it rotating 180 degrees at first, that means that it is going to rotate another 180 degrees at 100% to get back to it's original orientation. I can't declare it at 100% because I need 100% to have the correct translation. So I came up with a clever idea, how about making the rotation degrees half of what I want it to be? This would give it the appearance of a full turn.
Key frames:
#keyframes active {
0% {transform: translateX(0px);}
25% {transform: translateX(105px);}
50% {transform: translate(105px, 105px);}
75% {transform: rotateY(90deg) translate(-105px, 105px);}
100% {transform: translate(0px, 105px);}
}
#keyframes active2 {
0% {transform: translateX(0px);}
25% {transform: translateX(105px);}
50% {transform: translate(105px, -105px);}
75% {transform: rotateY(90deg) translate(-105px, -105px);}
100% {transform: translate(0px, -105px);}
}

Related

CSS animation of plane flying onto page and landing

I'm looking for a way to animate a plane flying from off-page onto the page. At the moment, I'm using the code below, which is very clunky and not smooth. Do you know a better way to do this using CSS and HTML? If not, using another method?
.plane-animation{
animation: animationFrames linear 3s;
animation-iteration-count: 1;
transform-origin: 50% 50%;
-webkit-animation: animationFrames linear 3s;
-webkit-animation-iteration-count: 1;
-webkit-transform-origin: 50% 50%;
-moz-animation: animationFrames linear 3s;
-moz-animation-iteration-count: 1;
-moz-transform-origin: 50% 50%;
-o-animation: animationFrames linear 3s;
-o-animation-iteration-count: 1;
-o-transform-origin: 50% 50%;
-ms-animation: animationFrames linear 2s;
-ms-animation-iteration-count: 1;
-ms-transform-origin: 50% 50%;
}
#keyframes animationFrames{
0% {
transform: translate(100%,-20px) rotate(0deg) ;
}
10% {
transform: translate(90%,-30px) rotate(5deg) ;
}
20% {
transform: translate(80%,-40px) rotate(15deg) ;
}
30% {
transform: translate(70%,-50px) rotate(10deg) ;
}
40% {
transform: translate(60%,-60px) rotate(5deg) ;
}
50% {
transform: translate(50%,-70px) rotate(0deg) ;
}
60% {
transform: translate(40%,-60px) rotate(-5deg) ;
}
70% {
transform: translate(30%,-50px) rotate(-10deg) ;
}
80% {
transform: translate(20%,-40px) rotate(-15deg) ;
}
90% {
transform: translate(10%,-30px) rotate(-10deg) ;
}
100% {
transform: translate(0%,0px) rotate(0deg) ;
}
}
<img class="plane-animation" src="http://www.jetcharterrewards.com/images/Plane%20Icons/plane-icon-4.png" alt="Paper Airplane" />
It seems like you're on the right track, and CSS animations should be perfect for the task you're solving. A few quick pointers:
You've made prefixed animation calls like -webkit-, -moz-, -o- and -ms-. However, you've not made any prefixed keyframes. This makes the first part wasted. If you want full browser compatibility you also need prefixed keyframes and prefixed transforms.
Like this:
#keyframes animationFrames{
0% {
transform: translate(100%,-20px) rotate(0deg) ;
}
100% {
transform: translate(100%,-20px) rotate(0deg) ;
}
}
#-webkit-keyframes animationFrames{
0% {
-webkit-transform: translate(100%,-20px) rotate(0deg) ;
}
100% {
-webkit-transform: translate(100%,-20px) rotate(0deg) ;
}
}
....
and so on.
The other part is more esthetic, but I suggest trying to work on one property at a time. Try drawing your animation in lines on a piece of paper first, figure out the axis and vectors that it's moving on and code one at a time. I'm afraid no-one on here can give you a finished piece of code, but with enough practice, I'm sure you will get the hang of animating.

How do I stop and change a CSS keyframe in Javascript?

I made a keyframe in my CSS which rotates a IMG in HTML. Now, I want to make a button that changes the rotation of the IMG from Y to X.
CSS:
*/* Rotate IMG Y */
#keyframes rotate {
0% {transform: rotateY(0deg);}
100% {transform: rotateY(360deg);}
}
/* ROTATE IMG X */
#keyframe rotateOther {
0% {transform: rotateX(0deg);}
100% {transform: rotateX(360deg);}
}*
I basically want to change ROTATE IMG Y to ROTATE IMG X by pressing a button. I am kind of new to programming and could not find any good explanation how to do this.
use insert class to change the css of div
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 200px;
height: 100px;
background-color: yellow;
animation: rotate 5s 1;
/* transform: rotate;*/
}
#keyframes rotate {
0% {transform: rotateY(0deg);}
100% {transform: rotateY(360deg);}
}
.newstyle{
background-color: green;
animation: btnrotate 5s 1;
}
#keyframes btnrotate{
0% {transform: rotateX(360deg);}
100% {transform: rotateX(0deg);}
}
</style>
</head>
<body>
<div id="mydiv">Hello</div> <button type="button" id="rotate" onclick="myfun(event)" > rotate </button>
<br>
<script>
function myfun(event){
event.preventDefault();
console.log(event);
document.getElementById("mydiv").classList.add("newstyle");
};
</script>
</body>
</html>

Repeat animation every 3 seconds

I am using WOW.js and animate.css, right now I am running my CSS to Infinite. I would like know how can I make my class run for 3 seconds stop and start again to infinite?
My html:
<img src="images/fork.png" class="fork wow rubberBand" >
My CSS class:
.fork {
position: absolute;
top: 38%;
left: 81%;
max-width: 110px;
-webkit-animation-iteration-count: infinite ;
-webkit-animation-delay: 5s;
}
The solution can be in JS or CSS3.
With pure CSS3 animations, one way to add a delay between every single iteration of the animation would be to modify the keyframes setting such that they produce the required delay.
In the below snippet, the following is what is being done:
The whole duration of the animation is 6 seconds. In order to have the delay, the whole duration should be the duration for which your animation actually runs + time delay. Here, the animation actually runs for 3s, we need a 3s delay and so the duration is set as 6 seconds.
For the first 50% of the animation (that is, 3 seconds), nothing happens and the element basically holds its position. This gives the appearance of the 3 second delay being applied
For the next 25% of the animation (that is, 1.5 seconds) the element moves down by 50px using transform: translateY(50px).
For the final 25% of the animation (that is, last 1.5 seconds) the element moves up by 50px using transform: translate(0px) (back to its original position).
The whole animation is repeated infinite number of times and each iteration will end up having a 3 second delay.
div{
height: 100px;
width: 100px;
border: 1px solid;
animation: move 6s infinite forwards;
}
#keyframes move{
0% { transform: translateY(0px);}
50% { transform: translateY(0px);}
75% { transform: translateY(50px);}
100% { transform: translateY(0px);}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div>Some content</div>
The animation-delay property introduces a delay only for the first iteration and hence it cannot be used to add delays between every iteration. Below is a sample snippet illustrating this.
div{
height: 100px;
width: 100px;
border: 1px solid;
animation: move 6s infinite forwards;
animation-delay: 3s;
}
#keyframes move{
0% { transform: translateY(0px);}
50% { transform: translateY(50px);}
100% { transform: translateY(0px);}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div>Some content</div>
LIke this
html
<div class="halo halo-robford-animate"></div>
css
body{
background: black;
}
.halo{
width: 263px;
height: 77px;
background: url('http://i.imgur.com/3M05lmj.png');
}
.halo-robford-animate{
animation: leaves 0.3s ease-in-out 3s infinite alternate;
-webkit-animation: leaves 0.3s ease-in-out 3s infinite alternate;
-moz-animation: leaves 0.3s ease-in-out 3s infinite alternate;
-o-animation: leaves 0.3s ease-in-out 3s infinite alternate;
}
#-webkit-keyframes leaves {
0% {
opacity: 1;
}
50% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}
#-moz-keyframes leaves {
0% {
opacity: 1;
}
50% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}
#-o-keyframes leaves {
0% {
opacity: 1;
}
50% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}
#keyframes leaves {
0% {
opacity: 1;
}
50% {
opacity: 0.5
}
100% {
opacity: 1;
}
}
jsfiddle

A banner rotate3d loop with "on transitionend"

http://jsfiddle.net/CA4C5/
I am trying to make a 3d banner rotation.
First i had build 4 sides of it and then noticed that I probably only need 2:
/ Front side is visible and has Banner1 on it
/ it rotates down and makes Banner2 visible
/ once that is completed (on transitionend) it has to do 2 things simultaneously: 1. rotate back to the previous state in 0ms and change image 1 for 2 and 2 for 3 -> that works
/ upon reaching the last banner (var anzahlbanner) it should basically start over with number 1 (which seems tricky because when the last one slides into place and flips back it needs to show the last (f.e. 6 on the front) and banner1 on the hidden side.
But I dont even get so far because this function seems to fire twice, namely on the smooth transition and then on the flip back transition.
$("#eins").on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){ ... });
You will see that when you activate line 31 in the javascript.
How can I get my counter go up the way I need it to?
Edit: It actually seems that the function is not called twice but one additional time for each turn: 1, 2, 3, 4, 5, 6, 7 times etc.
I think that I can simplify your javascript a little.
The only issue is that I changed your images for divs, with the image set in the background.
Now, your HTML is:
<div id="container">
<div id="eins">
<div></div>
</div>
<div id="zwei">
<div></div>
</div>
</div>
your CSS is
#container {
width: 1269px;
height: 294px;
}
#eins, #zwei {
position:absolute;
top:0px;
left:0px;
}
#eins {
width: 1269px;
height:294px;
z-index:150;
-ms-transform-origin: 50% 50% 147px;
-moz-transform-origin: 50% 50% 147px;
-webkit-transform-origin: 50% 50% 147px;
-webkit-animation: rotate 4s infinite;
-webkit-animation-delay: -2s;
}
#zwei {
background:red;
width: 1269px;
height:294px;
z-index:70;
-ms-transform-origin: 50% 50% 147px;
-ms-transform: rotate3d(1, 0, 0, -90deg);
-ms-transition: 1s;
-ms-transition-timing-function: ease;
-moz-transform-origin: 50% 50% 147px;
-moz-transform: rotate3d(1, 0, 0, -90deg);
-webkit-transform-origin: 50% 50% 147px;
-webkit-animation: rotate 4s infinite;
}
#eins div, #zwei div {
height:294px;
}
#eins div {
-webkit-animation: imageseins 8s infinite;
-webkit-animation-delay: -2s;
}
#zwei div {
-webkit-animation: imageszwei 8s infinite;
}
#-webkit-keyframes rotate {
0% {-webkit-transform: rotate3d(1, 0, 0, -90deg);}
50% {-webkit-transform: rotate3d(1, 0, 0, 0deg);}
100% {-webkit-transform: rotate3d(1, 0, 0, 90deg);}
}
#-webkit-keyframes imageseins {
0%, 49.99% {background-image: url("http://jenseickhoff.de/testarea/2014/img/banner1.jpg")}
50%, 100% {background-image: url("http://jenseickhoff.de/testarea/2014/img/banner3.jpg")}
}
#-webkit-keyframes imageszwei {
0%, 49.99% {background-image: url("http://jenseickhoff.de/testarea/2014/img/banner2.jpg")}
50%, 100% {background-image: url("http://jenseickhoff.de/testarea/2014/img/banner4.jpg")}
}
And, as promised, your javascript is much easier (none)
fiddle
The trick is to set an animation on the images, that is changing the image when the div is not visible.

Moving in an Arc with Webkit Transitions

Right now I'm trying to put together something really simple, learn from it, and incorporate it in a bigger project.
I have a simple box I'm trying to move from one position to another using css webkit animations and the translate function (for iOS hardware acceloration purposes). I need it to move in an arc and then stay at that point at the top of the arc.
Now, I'm pretty new to CSS transitions. In the past I've used jQuery animations but that seems to run really slowly on mobile devices. I know there's probably some best practice ideas I can incorporate here for setting and manging these animations, but I'm kinda figuring them out as I go.
Right now the box moves all the way up and then appears back in the starting position. How do I get it to stay there?
http://cs.sandbox.millennialmedia.com/~tkirchner/rich/M/march_madness/tmp/
<style type="text/css">
#ball {
display:block;
position: absolute;
width: 50px;
height: 50px;
overflow: hidden;
top: 500px;
left: 100px;
background-color: red;
} #action {
display: block;
font-weight:bold;
}
.animation {
-webkit-animation-name: throwBall;
-webkit-animation-timing-function: linear;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
}
#-webkit-keyframes throwBall {
from { -webkit-transform: translate( 0px, 0px ); }
25% { -webkit-transform: translate( 75px, -25px ) }
50% { -webkit-transform: translate( 150px, -75px ) }
75% { -webkit-transform: translate( 225px, -150px ) }
to { -webkit-transform: translate( 300px, -300px ); }
}
</style>
<script type="text/javascript">
if ( typeof(jQuery) == 'undefined' ) document.write('<scri'+ 'pt type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"></scri'+'pt>');
</script>
<a id='action'>Animate Me</a>
<div id='ball'></div>
<script type="text/javascript">
$(document).ready(function(){
$('#action').bind('click',function(){
$('#ball').addClass('animation').bind('webkitAnimationEnd',function(){
});
});
});
</script>
Just add the end state of the animation to your class as properties set by animation are removed when animation ends. Adding -webkit-transform: translate(300px, -300px); to your animation class fixes your problem.
.animation {
-webkit-animation-name: throwBall;
-webkit-animation-timing-function: linear;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
-webkit-transform: translate(300px, -300px);
}

Categories