How to move to the certain keyframe in CSS3 animation? - javascript

Let's say we have an animation like here: http://jsfiddle.net/utterstep/JPDwC/
Layout:
<div>back</div>
<div class="animating"></div>
<div>forward</div>
And corresponding CSS:
#keyframes someanimation {
0% {
width: 100px;
}
50% {
width: 200px;
}
100% {
width: 100px;
}
}
.animating {
width: 200px;
height: 200px;
background-color: red;
animation: someanimation 5s infinite;
}
And I want to go to the next or previous animation state when I press back or forward. There can be more than one object and I would like to switch their animation states at the same time.
Is it someway possible via CSS or CSS+JS, or it maybe it will be easier for me just to rewrite my code in pure-JS? (currently I don't like this idea because I have a lot of properties to animate and CSS makes it much more easier for me)

Perhaps you have got the answer in CSS+JS
Please refer Old Post
Here on fiddle from the same post Fiddle
And with CSS only here is the Fiddle I have tweaked with :hover property,
#-webkit-keyframes someanimation {
0% {
width: 100px;
}
50% {
width: 200px;
}
100% {
width: 100px;
}
}
#-moz-keyframes someanimation {
0% {
width: 100px;
}
50% {
width: 200px;
}
100% {
width: 100px;
}
}
#keyframes someanimation {
0% {
width: 100px;
}
50% {
width: 200px;
}
100% {
width: 100px;
}
}
#-webkit-keyframes someani2 {
0%,100% {
width: 100px;
}
50% {
width: 200px;
}
}
#-moz-keyframes someani2 {
0%,100% {
width: 100px;
}
50% {
width: 200px;
}
}
#keyframes someani2 {
0%,100% {
width: 100px;
}
50% {
width: 200px;
}
}
.animating {
width: 200px;
height: 200px;
background-color: red;
-webkit-animation: someanimation 5s infinite;
-moz-animation: someanimation 5s infinite;
animation: someanimation 5s infinite;
}
.animating:hover{
color:#f60;
-webkit-animation: someani2 6s 1;
-moz-animation: someani2 6s 1;
animation: someani2 6s 1;
}
<div>back</div>
<div class="animating"></div>
<div>forward</div>
it changes the animation on hover, just like back button.
I hope this will solve your purpose..

Related

repeating animate code with jquery in better way

I'm trying to make simple animation that
line length changing repeatedly.
and, here is my code
$(document).ready(function(){
var redline = $('.redline');
setInterval(redmove,100)
})
function redmove(){
var redline = $('.redline');
redline.animate({'width':'500px'},2000)
.animate({'width':'20px'},2000)
}
.redline{
background: red;
height: 10px;
width: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="redline"></div>
my code runs well with no problem, but, I think there must be a better code(maybe more efficient..etc)
So, here is the question
1.If this code is not good, why?
(in perspective of something like efficiency...etc)
2.I want to know better code in this situation.
thanks!
HAPPY NEW YEAR!
Look into this
#keyframes changeWidth {
0% {
width: 20px;
}
50% {
width: 500px;
}
100% {
width: 20px;
}
}
.redline {
height: 50px;
background-color:red;
animation: 4s ease-out 0s infinite changeWidth;
}
<div class="redline"></div>
You can handle it by CSS like below:
.redline {
height: 10px;
width: 20px;
background: red;
-webkit-animation-name: test_animation; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
-webkit-animation-delay: 0s; /* Safari 4.0 - 8.0 */
animation-name: test_animation;
animation-duration: 4s;
animation-delay: 0s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
}
/* Safari 4.0 - 8.0 */
#-webkit-keyframes test_animation {
0% {
width: 20px;
}
50% {
width: 500px;
}
100% {
width: 20px;
}
}
/* Standard syntax */
#keyframes test_animation {
0% {
width: 20px;
}
50% {
width: 500px;
}
100% {
width: 20px;
}
}
<div class="redline"></div>
You can use a simple CSS #keyframe animation , like so:
.redline {
background: red;
height: 10px;
width: 20px;
animation-name: animateLine;
animation-duration: 2s;
animation-fill-mode: ease-in;
animation-fill-mode: both;
animation-iteration-count: infinite;
}
#keyframes animateLine {
0% {
width: 20px;
}
50% {
width: 500px;
}
100% {
width: 20px;
}
}
<div class="redline"></div>
NOTE::- you can use autoprefixer to prefix you CSS and also you can reduce your css code by using the animate shorthand.

On hover stop animation at their respective position

I have two divs which has one circle along with one smily where innercircle1 div is rotating with given animation.
What i want is when i hover on innercircle1 div it should stop but with their current transform origin position,
Currently when i hover over innercircle1 div it goes to their starting point i.e. their given transform origin and stop.
body {
background: #000;
color: #fff;
}
#keyframes circle {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
#keyframes inner-circle {
from {
transform: rotate(0deg);
}
to {
transform: rotate(-360deg);
}
}
.outercircle {
border: 1px solid red;
border-radius: 50%;
width: 310px;
margin: 64px auto;
height: 310px;
position: Relative;
}
.innercircle {
width: 100px;
height: 100px;
margin: 20px auto 0;
color: orange;
font-size: 100px;
line-height: 1;
animation: circle 5s linear infinite;
transform-origin: 50% 200px;
position: ABSOLUTE;
top: -70px;
left: 109px;
}
.innercircle1 {
animation: inner-circle 5s linear infinite;
}
<div class="outercircle"><div class="innercircle"><div class="innercircle1">☻</div></div></div>
You can pause animation using JQUERY as well as CSS.
A very simple solution to use animation-play-state property.
Try these lines:
.innercircle1 {
animation: inner-circle 5s linear infinite;
animation-play-state: play;
}
.innercircle1:hover{
animation-play-state: paused;
}

how to use document.getElementsByClassName("classname") with style.animation

getElementbyID works since IDs have to be unique and thus the function always returns exactly one element (or null if none was found).
Got struck with the class name.
How can i add the style.animation to the class name ?
function myFunction() {
document.getElementsByClassName("myDIV").style.WebkitAnimation = "mynewmove 4s 2";
document.getElementsByClassName("myDIV").style.animation = "mynewmove 4s 2";
}
.myDIV {
width: 100px;
height: 100px;
background: red;
position: relative;
-webkit-animation: mymove 1s infinite;
/* Chrome, Safari, Opera */
animation: mymove 1s infinite;
}
#-webkit-keyframes mymove {
from {
left: 0px;
}
to {
left: 200px;
}
}
#-webkit-keyframes mynewmove {
from {
top: 0px;
}
to {
top: 200px;
}
}
#keyframes mymove {
from {
left: 0px;
}
to {
left: 200px;
}
}
#keyframes mynewmove {
from {
top: 0px;
}
to {
top: 200px;
}
}
<button onclick="myFunction()">Try it</button>
<div class="myDIV"></div>
getElementsByClassName returns a HTMLCollection, therefore, you either need to access specific items([0]) or iterate over them
function myFunction() {
document.getElementsByClassName("myDIV")[0].style.WebkitAnimation = "mynewmove 4s 2";
document.getElementsByClassName("myDIV")[0].style.animation = "mynewmove 4s 2";
}
.myDIV {
width: 100px;
height: 100px;
background: red;
position: relative;
-webkit-animation: mymove 1s infinite;
/* Chrome, Safari, Opera */
animation: mymove 1s infinite;
}
#-webkit-keyframes mymove {
from {
left: 0px;
}
to {
left: 200px;
}
}
#-webkit-keyframes mynewmove {
from {
top: 0px;
}
to {
top: 200px;
}
}
#keyframes mymove {
from {
left: 0px;
}
to {
left: 200px;
}
}
#keyframes mynewmove {
from {
top: 0px;
}
to {
top: 200px;
}
}
<button onclick="myFunction()">Try it</button>
<div class="myDIV"></div>

Modify CSS Animation by jquery

I have created an animation translate by css, now I want to play/stop this animation every 5s. How can I do that? This is the information box I want to translate, and I want when I change this box the background will be changed too. Here is my css:
.relative-content {
width: 100%;
height: 100%;
position: relative;
}
.shw-intro {
width: 250px;
height: 150px;
background: #77941C;
position: absolute;
top: 55px;
left: 75px;
animation: shwA 1s ease-in-out;
-webkit-animation: shwA 1s ease-in-out;
animation-play-state: running;
}
#-webkit-keyframes shwA {
0% {
left: 155px;
opacity: 0;
}
50% {
opacity: 0.5;
}
100% {
left: 75px;
opacity: 1;
}
}
#keyframes shwA {
0% {
left: 155px;
opacity: 0;
}
50% {
opacity: 0.5;
}
100% {
left: 75px;
opacity: 1;
}
}
And this is my javascript:
$(function(){
var int = setInterval(shwAnimation, 5000);
});
function shwAnimation() {
// What can I do here to control this animation, I have tried this
$('.shw-intro').animate({animationPlayState: "running"}, 1000, function () {
$(this).css('animation-play-state', 'paused');
});
// But I think it's not a good idea.
}
Any idea would be appreciated! Thanks.
Why would you do that with jQuery?
Just set the animation to loop at 5 seconds and change 0%, 50% and 100% you have to 0%, 10% and 20%. The frame at 100% should be the same as the on at 20%.
This is what I mean:
#keyframes shwA {
0% {
left: 155px;
opacity: 0;
}
10% {
opacity: 0.5;
}
20% {
left: 75px;
opacity: 1;
}
100% {
left: 75px;
opacity: 1;
}
}
That way you'll have a 5 second period with the first second of animation and four seconds of delay.

Positioning JS animated DIVs

I'm trying to make 3DIVs to move with JS and place them on the right side of the page, I've done the animate script, however the position isn't right. On mobile phones it goes above my other divs in #header section and it's to much to the left. And on PC:s it is to far from the left.
Is there any way to keep my animation this way but to make it inside of the wrapper? So that It doesn't change it's position on mobile phones and PC:s?
HTML:
<div class="wrapper">
<div id="intro-right">
<div id="clouds-1"></div>
<div id="clouds-2"></div>
<div id="clouds-3"></div>
</div>
</div>
CSS:
div.wrapper {
margin: 0 auto;
padding: 0 20px;
min-width: 1024px;
width: 1024px;
}
div#intro-right {
float: right;
}
div#clouds-1 {
position: absolute;
width: 420px;
height: 260px;
margin-top: 100px;
right: 150px;
background: url("img/clouds_bg_1.png") no-repeat;
opacity: 0;
}
div#clouds-2 {
position: absolute;
width: 420px;
height: 260px;
margin-top: 110px;
right: 150px;
background: url("img/clouds_bg_2.png") no-repeat;
opacity: 0;
}
div#clouds-3 {
position: absolute;
width: 420px;
height: 260px;
margin-top: 130px;
right: 150px;
background: url("img/clouds_bg_3.png") no-repeat;
opacity: 0;
}
JS:
$(document).ready(function() {
$("div#clouds-1").animate({
opacity:'0.4'
}, 1450);
$("div#clouds-2").animate({
opacity:'0.6'
}, 1450);
$("div#clouds-3").animate({
opacity:'0.8'
}, 1450);
});
$(document).ready(function() {
function moveRight1() {
$("div#clouds-1").animate({
top:'-=24px',
right: '+=50px',
opacity: '0.9'
}, 8000, moveLeft1);
}
function moveLeft1() {
$("div#clouds-1").animate({
top:'+=24px',
right: '-=50px',
opacity: '0.4'
}, 8000, moveRight1);
}
moveRight1();
function moveRight2() {
$("div#clouds-2").animate({
top:'-=24px',
right:'-=50px',
opacity: '0.9'
}, 8000, moveLeft2);
}
function moveLeft2() {
$("div#clouds-2").animate({
top:'+=24px',
right:'+=50px',
opacity: '0.6'
}, 8000, moveRight2);
}
moveRight2();
function moveRight3() {
$("div#clouds-3").animate({
top:'+=24px',
right:'+=100px',
opacity: '0.4'
}, 8000, moveLeft3);
}
function moveLeft3() {
$("div#clouds-3").animate({
top:'-=24px',
right:'-=100px',
opacity: '0.8'
}, 8000, moveRight3);
}
moveRight3();
});
Like pixelcdv said, CSS3 animations would be perfect for simple movement like this.
Here's a quick animation I came up using your code (all in percent)
The CSS for it based off of your html:
div#clouds-1 {
position: absolute;
width: 30%;
height: 20%;
top: 15%;
left: 35%;
background: url(http://www.drawingcoach.com/image-files/cartoon_clouds_2.gif) no-repeat;
opacity: .9;
-webkit-transition: cloudOne 16s infinite;
-moz-transition: cloudOne 16s infinite;
-o-transition: cloudOne 16s infinite;
transition: cloudOne 16s infinite;
animation: cloudOne 16s infinite;
}
#keyframes cloudOne {
0% {
top:15%;
left: 35%;
}
50% {
top:7%;
left: 20%;
}
100% {
top:15%;
left: 35%;
}
}
div#clouds-2 {
position: absolute;
width: 30%;
height: 20%;
top:20%;
left: 45%;
background: url(http://asnika.info/wp-content/uploads/2013/04/drawing-of-cloudscartoon-clouds-drawing-techniques-fauprla4.gif) no-repeat;
opacity: .9;
-webkit-transition: cloudTwo 16s infinite;
-moz-transition: cloudTwo 16s infinite;
-o-transition: cloudTwo 16s infinite;
transition: cloudTwo 16s infinite;
animation: cloudTwo 16s infinite;
}
#keyframes cloudTwo {
0% {
top:20%;
left: 45%;
}
50% {
top:35%;
left: 15%;
}
100% {
top:20%;
left: 45%;
}
}
div#clouds-3 {
position: absolute;
width: 30%;
height: 20%;
top:30%;
left: 50%;
background: url(http://www.how-to-draw-cartoons-online.com/image-files/cartoon_clouds.gif) no-repeat;
opacity: .9;
-webkit-transition: cloudThree 16s infinite;
-moz-transition: cloudThree 16s infinite;
-o-transition: cloudThree 16s infinite;
transition: cloudThree 16s infinite;
animation: cloudThree 16s infinite;
}
#keyframes cloudThree {
0% {
top:30%;
left: 50%;
}
50% {
top:5%;
left: 65%;
}
100% {
top:30%;
left: 50%;
}
}
I think in your case it would be better to use CSS3 animations. This way, you just have to call $('div#clouds-1').addClass(<new class that sets the position on the right>) instead of .animate() and adapt the css to work both on mobile and on desktop

Categories