This is the current code I have
.jack_hitting{
-moz-animation: jackhitting 0.5s infinite;
}
#-moz-keyframes jackhitting {
0% {
background-position: -8px -108px;
}
20% {
background-position: -41px -108px;
}
40% {
background-position: -73px -108px;
}
60% {
background-position: -105px -108px;
}
80% {
background-position: -137px -108px;
}
100% {
background-position: -8px -108px;
}
}
and this cycles through the background image sliding to the next one, but i would rather have it not slide, so that it basically works like the following js code:
document.getElementById('id').style.backgroundPosition='-8px -108px';
Is there an effect that can do what I would like?
Thanks in advance :)
I think I found it: step-start (I think it's one of multiple that could do this in the animation-timing-function category)
animation: jackhitting 10s step-start infinite;
Long-form would be
animation-name: jackhitting;
animation-duration: 10s;
animation-timing-function: step-start;
animation-iteration-count: infinite;
Unfortunately, you'll have to prefix this for each browser for now.
Here's a fiddle to test it out:
http://jsfiddle.net/Ym6b5/4/
(The div is much too big. I wanted you to see the background image move and see if it's what you were after)
The animation-duration is the total amount of time it'll take to go through your keyframes. The animation-delay that I thought was the delay between steps is the delay before the animation should start.
http://dev.w3.org/csswg/css3-animations
Hope it's what you were looking for.
Cheers,
iso
Related
I wanted to create a table with color-changing rows (for example: from complete green background to complete red in half an hour starting from 12o'clock). I managed to do this but now i thought about a case where the site is being called when the time's row is already 10 min up (so not half an hour of gradient progress but only 20 minutes and the row wouldn't start completely green).
so i wondered if it is possible to set the start time of a CSS animation.
Maybe over a keyframe? i have literally no idea cause i didn't work much with css3 the past time and i would be thankful for any information :)
[my animation css]
.timing {
background: linear-gradient(88deg, #05a400, #ff0000);
background-size: 400% 400%;
-webkit-animation: Gradient 180s linear infinite;
-moz-animation: Gradient 180s linear infinite;
animation: Gradient 180s linear infinite;
}
#-webkit-keyframes Gradient {
0%{background-position:0% 53%}
50%{background-position:100% 48%}
100%{background-position:0% 53%}
}
#-moz-keyframes Gradient {
0%{background-position:0% 53%}
50%{background-position:100% 48%}
100%{background-position:0% 53%}
}
#keyframes Gradient {
0%{background-position:0% 53%}
50%{background-position:100% 48%}
100%{background-position:0% 53%}
}
and sorry if the header isn't clearly stating my question, i didn't find the proper words...
You can use CSS variable to adjust the starting time of an animation then you can simply modify it using JS:
document.querySelectorAll('.timing')[1].style.setProperty('--t','5s');
.timing {
background: linear-gradient(88deg, #05a400, #ff0000);
background-size: 400% 400%;
animation: Gradient 2s linear infinite var(--t,0s);
height:80px;
color:#fff;
font-size:30px;
}
#keyframes Gradient {
0% {
background-position: 0% 53%
}
50% {
background-position: 100% 48%
}
100% {
background-position: 0% 53%
}
}
<div class="timing">
This one will start immediately
</div>
<div class="timing">
This one will start after 5s
</div>
I'm using a wordpress theme and have scanned through the javascript files but can't figure out what is causing this.
When the page is loading there is this odd zoom effect, then everything returns to normal. Happens in most browsers but sometimes doesn't happen in Safari.
Take a look:
http://homestudiocenter.com/homestudiocourse/
Any ideas what it might be?
Thank you so much!
i think its been caused by the css inside class home. The zooming effect happens when you remove and add home css to body.
The definition is
.home {
background-image: url('images/mac.png');
background-position: center bottom;
background-repeat: no-repeat;
min-height: 730px;
animation: animatedBackground 1s ease-in-out;
-ms-animation: animatedBackground 1s ease-in-out;
-moz-animation: animatedBackground 1s ease-in-out;
-webkit-animation: animatedBackground 1s ease-in-out;
}
The definition for animatedBackground is
#keyframes animatedBackground {
from {
background-position: center 550px;
}
to {
background-position: center bottom;
}
}
body * { animation-duration: 0.001s; animation-name: insQ_101; -webkit-animation-duration: 0.001s; -webkit-animation-name: insQ_101; }
This webkit animation is the source of it. This explains why it zooms on Safari & Chrome (webkit) and not FFox (non-webkit).
I am trying to create an animated button using a sprite sheet. The animation should play on hover and then on mouseout the animation should finish and then stop.
How can I go about doing this? I have tried setting the background of a div and controlling the background position through hover events. I can get the background position to set itself properly but each change goes so fast it might as well be instant and so the animation does not show itself.
Any suggestions would be helpful. After a lot of searching with no luck I am not sure what else to try.
Thank You!
the best advice would be to use a CSS3.
pretty easy no need for javascript:
take a look at this for example:
http://codeitdown.com/css-sprite-animations/
example here:
http://jsfiddle.net/drukaman/ued7mLha/1/
from the Referance : https://medium.com/#Mrugraj/sprite-sheet-animation-using-html-css-9091bebd4eeb
HTML
<html>
<head>
<title>
Sprite-Sheet Animation
</title>
<link rel=”stylesheet” type=”text/css” href=”main.css”>
</head>
<body>
<div class=”animatedDiv”></div>
</body>
</html>
CSS
.animatedDiv {
width: 820px;
height: 312px;
background-image: url("https://cf.dropboxstatic.com/static/images/index/animation-strips/hero-intro-bg-vflR5rUow.jpg");
-webkit-animation: play 2s steps(48) infinite;
-moz-animation: play 2s steps(48) infinite;
-ms-animation: play 2s steps(48) infinite;
-o-animation: play 2s steps(48) infinite;
animation: play 2s steps(48) infinite;
}
#-webkit-keyframes play {
from {
background-position: 0px;
}
to {
background-position: -39360px;
}
}
#-moz-keyframes play {
from {
background-position: 0px;
}
to {
background-position: -39360px;
}
}
#-ms-keyframes play {
from {
background-position: 0px;
}
to {
background-position: -39360px;
}
}
#-o-keyframes play {
from {
background-position: 0px;
}
to {
background-position: -39360px;
}
}
#keyframes play {
from {
background-position: 0px;
}
to {
background-position: -39360px;
}
}
for Detailed explanation follow the link.
I've run into some difficulty trying to play a CSS3 keyframe animation and have the relevant element stick at the last frame after the animation has completed. To my understanding, the property that I have to set for this to work should be animation-fill-mode, which should have the value of forwards; this doesn't do anything.
.animatedSprite {
.animation-name: sprite;
.animation-duration: .5s;
.animation-iteration-count: 1;
.animation-direction: normal;
.animation-timing-function: steps(3);
.animation-fill-mode: forwards;
//Vendor prefixes... }
This will just play the animation once and then go back to the first frame. I found an example of keyframe animations at JSFiddle ( http://jsfiddle.net/simurai/CGmCe/ ), and changing the fill mode to forwards and setting the iteration count to 1 wouldn't do anything there, either.
Any help would be greatly appreciated.
animation-fill-mode:forwards is the correct property to use. Is does not seem to work because the sprite image background has a default background-repeat:repeat, so the last frame you think you are seeing is actually the first frame of the repeated background image.
If you set
background: url("http://files.simurai.com/misc/sprite.png") no-repeat
animation: play .8s steps(10) forwards;
#keyframes play {
from { background-position: 0px; }
to { background-position: -500px; }
}
and run the demo the final frame is now blank - so forwards is doing what it should do. The second part of the solution is to change the final to and steps CSS properties to position the background correctly. So we really need the background to stop at -450px and use 9 steps.
-webkit-animation: play .8s steps(9) forwards;
#keyframes play {
from { background-position: 0; }
to { background-position: -450px; }
}
See demo - I only fixed the Chrome properties. Also here is the sample image in case the original disappears.
.hi {
width: 50px;
height: 72px;
background: url("http://i.stack.imgur.com/ilKfd.png") no-repeat;
-webkit-animation: play .8s steps(9) forwards;
-moz-animation: play .8s steps(10) infinite;
-ms-animation: play .8s steps(10) infinite;
-o-animation: play .8s steps(10) infinite;
animation: play .8s steps(9) forwards;
}
#-webkit-keyframes play {
from { background-position: 0px; }
to { background-position: -450px; }
}
#-moz-keyframes play {
from { background-position: 0px; }
to { background-position: -500px; }
}
#-ms-keyframes play {
from { background-position: 0px; }
to { background-position: -500px; }
}
#-o-keyframes play {
from { background-position: 0px; }
to { background-position: -500px; }
}
#keyframes play {
from { background-position: 0px; }
to { background-position: -450px; }
}
<div class="hi"></div>
Change 'infinite' to '1' in the css, this fixes it for me
just add
animation: mymove .8s forwards;
here 'mymove' is name of my keyframe
example:
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation: mymove .8s forwards;
}
#keyframes mymove {
from {top: 0px;}
to {top: 200px;}
}
</style>
</head>
<body>
<h1>The #keyframes Rule</h1>
<div></div>
</body>
</html>
The following code will make the transition stay on the last frame:
-webkit-timing-function:ease;
-webkit-iteration-count:1;
I have set up a basic CSS3 animation test which increases and decreases the background-size of the element, when you click one of the elements then the class active is toggled and a transition occurs. My problem is though that when the .active class is removed the animation doesnt occur anymore since I have reset animation to none. Can anyone advise how I can fix this problem?
CSS
html{height:100%;}
body {background:#000;height:100%;min-height:100%;padding:20px}
ul{height:100%;display:block}
li{float:left;margin-right:30px;position:relative;}
#-webkit-keyframes throb_outer {
0% { background-size:1px 100%; }
100% { background-size:1px 130%; }
}
#-webkit-keyframes throb_inner {
0% { background-size:1px 100%; }
100% { background-size:1px 115%; }
}
.outer{display:block;width:50px;padding:0 1px;cursor: pointer;
-webkit-animation: throb_outer 2s infinite alternate;
}
.b{background: -webkit-linear-gradient(black 30%, rgba(41,184,229,1) 50%, black 70%) repeat-x; }
.g{background: -webkit-linear-gradient(black 20%, rgba(33, 130, 61, 1) 50%, black 80%) repeat-x;}
.r{background: -webkit-linear-gradient(black 40%, rgba(255,0,0,1) 50%, black 60%) repeat-x;}
.li{height:100%;-webkit-transition: background-size .3s linear;
background-position:0 50%;
background-size:1px 100%;}
.inner{
width:100%;
display:block;
-webkit-animation: throb_inner 2s infinite alternate;
}
.outer.active{-webkit-animation:none;background-size:1px 200%;}
.outer.active .inner{-webkit-animation:none;background-size:1px 150%;}
JS
$(document).ready(function() {
$('#test').children().on('click', function(e) {
$(this).toggleClass('active');
});
});
Fiddle here: http://jsfiddle.net/VQaGh/22/
as my understanding you want effects something like this
try this one http://jsfiddle.net/Sk2sX/
I have modify both css and js hope it will help you
for any query regarding code post a comment