Change start of a CSS3 animation - javascript

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>

Related

Make Color of an Element Pulse Continuously With Angular

I am trying to make the color of a button pulse from its current color, say, #ed8c55, to pure white and back to the original color with the entire cycle taking about 2-3 seconds. How could I do that?
In particular, I see that there are a couple of problems here. One is to make the timer and attach some variable's increment to the value of the color. The second problem is the actual color itself. How would one go about continuously changing a hex color towards white and back using a loop of some sort?
I have the following timer implemented that counts seconds. I could easily modify it to count milliseconds or something like that.
var mytimeout = null; // the current timeoutID
$scope.counter = 0;
// actual timer method, counts up every second
$scope.onTimeout = function() {
$scope.counter++;
mytimeout = $timeout($scope.onTimeout, 1000);
};
Any help is appreciated.
I know you want an animation via AngularJS but I dont think thats the right tool for the job as its easily achieved via CSS alone. I'd really advise you to do it like so;
EDIT ------------------
After your comments of dynamically adding a background colour that will then pulse the best way is to inline style the colour via angular and css keyframe the animation.
CSS --
#-webkit-keyframes pulse {
25% { background-color: #FFF; }
}
#-moz-keyframes pulse {
25% { background-color: #FFF; }
}
#-o-keyframes pulse {
25% { background-color: #FFF; }
}
#keyframes pulse {
25% { background-color: #FFF; } // changed to 25% to stop the sudden change to white
}
.element {
transition: background-color 3s;
width: 50px;
height: 50px;
-webkit-animation: pulse 3s infinite; /* Safari 4+ */
-moz-animation: pulse 3s infinite; /* Fx 5+ */
-o-animation: pulse 3s infinite; /* Opera 12+ */
animation: pulse 3s infinite; /* IE 10+, Fx 29+ */
}
HTML -
<div style="background-color: #ed8c55;" class="element"></div>
View my codepen here
/ EDIT ------------------
OG Answer ---
#-webkit-keyframes pulse {
0% { background-color: #ed8c55; }
50% { background-color: #FFF; }
100% { background-color: #ed8c55; }
}
#-moz-keyframes pulse {
0% { background-color: #ed8c55; }
50% { background-color: #FFF; }
100% { background-color: #ed8c55; }
}
#-o-keyframes pulse {
0% { background-color: #ed8c55; }
50% { background-color: #FFF; }
100% { background-color: #ed8c55; }
}
#keyframes pulse {
0% { background-color: #ed8c55; }
50% { background-color: #FFF; }
100% { background-color: #ed8c55; }
}
.element {
width: 50px;
height: 50px;
background: #ed8c55;
-webkit-animation: pulse 3s infinite; /* Safari 4+ */
-moz-animation: pulse 3s infinite; /* Fx 5+ */
-o-animation: pulse 3s infinite; /* Opera 12+ */
animation: pulse 3s infinite; /* IE 10+, Fx 29+ */
}
And that will continuously loop between the two colours.
You can view my code pen on it here.

How can I create an Animated Button with a Sprite Sheet using Javascript?

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.

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.

CSS3 Keyframe Animations: End and stay on the last frame

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;

CSS3 animation change background-image without sliding

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

Categories