We Keep Coding

How to set animation state to finish

I've created a slider animation as demonstrated below:
#mixin progress {
#-webkit-keyframes interval {
from {
width: 0;
}
to {
width: 100%;
}
}
animation: var(--duration) linear 0s interval;
animation-play-state: var(--playState);
}
.slider-item {
#include progress;
}
When a click event fires my task is to make the current slider animation be completed.
I have tried to select the target element for example:
this.$refs[`slider-item-${id}`]
Nevertheless, the animation property is still empty, is there something that i'm missing here? or is there a better alternative for that? (i have tried the API https://developer.mozilla.org/en-US/docs/Web/API/Element/animate without success)

Try to replace
animation: var(--duration) linear 0s interval;
with
animation: var(--duration) linear 10ms forwards;
to see the animation end as the last state remaining on your page.

Reset transform: rotate() without invoking -webkit-transition: style

I am drawing a wheel on a canvas, rotating it and then wanting to reset the rotation to 0. however due to the css property: -webkit-transition: -webkit-transform 15s ease; when resetting the rotation, it is rotation from r -> 0 and taking 15 seconds. Is there a way to reset the rotation without invoking the transform 15s ease?
I am redrawing data on the canvas after the rotation transform has finished thus needing an instant reset.
Many thanks
var r=-(3600 + random);
$("#wheel").css("transform","rotate("+r+"deg)");
$("#wheel").css("-moz-transform","rotate("+r+"deg)");
$("#wheel").css("-webkit-transform","rotate("+r+"deg)");
$("#wheel").css("-o-transform","rotate("+r+"deg)");
$("#wheel").one('webkitTransitionEnd', function() {
$("#wheel").css("transform","none");
$("#wheel").css("-moz-transform","none");
$("#wheel").css("-webkit-transform","none");
$("#wheel").css("-o-transform","none");
});

I think I have a solution for this. By changing the css class to a 'default rotation' class briefly before changing the class to your animated rotation class you can control the animation timing on each separate class in order to have the wheel snap back to the starting position before rotating to your new position.
css:
.spin0 {
transform: rotate(0deg);
}
.spin750 {
transform: rotate(750deg) !important;
transition-duration: 2.5s !important;
}
js (on click):
element.className = "spin0";
setTimeout(function(){
element.className = "spin750";
}, 10);

CSS3 Smooth transition when dynamically changing animations

I have two keyframe animations "Bounce-In" and "Bounce-Out" the Bounce-In animation takes 1.2 seconds to complete, but if a user triggers the Bounce-Out function before it's finished it will jump to 100% scale and doesn't gracefully scale out from it's current animation position.
Is this possible with keyframe animations? I've seen it done with transition property but not using scale().
#-webkit-keyframes Bounce-In
{
0% { -webkit-transform: scale(0) }
40% { -webkit-transform: scale(1.0) }
60% { -webkit-transform: scale(0.7) }
80% { -webkit-transform: scale(1.0) }
90% { -webkit-transform: scale(0.9) }
100% { -webkit-transform: scale(1.0) }
}
#-webkit-keyframes Bounce-Out
{
0% { -webkit-transform: scale(1.0) }
40% { -webkit-transform: scale(0.1) }
60% { -webkit-transform: scale(0.4) }
80% { -webkit-transform: scale(0.1) }
90% { -webkit-transform: scale(0.2) }
100% { -webkit-transform: scale(0) }
}
I have a demo on JSFiddle: http://jsfiddle.net/Vn3bM/98/
*if you click the "Games" circle before the animation is finished you will notice the other two jump to 100% and then animate out (that's what I'm trying to make smooth).
I even tried removing the 0% keyframe from Bounce-Out and that didn't help...

In your case, the "jump" you notice in your animation comes from the change of animations you have installed on onmouseup. The "Bounce-Out" Animation has an initial scale of 1 (first Keyframe), and this is what the two circles immediately get set to when the animation is installed.
There are two solutions to this, which I can explain in some detail:
The Easy Way
You could just wait for the initial animation to end via the 'webkitAnimationEnd' Event and install the onmouseup event with a recursive function waiting for the animation to finish:
var initAnimationEnded = false;
document.getElementById('sports').addEventListener('webkitAnimationEnd', function() {
initAnimationEnded = true;
}, false);​
And here's the onmouseup handler:
document.getElementById('games').onmouseup = function() {
function bounceOut() {
if (initAnimationEnded) {
events.style.webkitAnimationName = "Bounce-Out";
sports.style.webkitAnimationDelay = "0.2s";
sports.style.webkitAnimationName = "Bounce-Out";
} else {
setTimeout(bounceOut, 20);
}
}
bounceOut();
}
I installed a jsfiddle here so you can see it working. The Bounce Out animation is only triggered after the animation finished, nothing unusual about that.
The Hard Way
You can pause the animation and parse the current values of the transformation, then install a temporary keyframe animation to bounce out. This gets much more verbose though:
First, you have to stop the animations:
events.style.webkitAnimationPlayState = "paused";
sports.style.webkitAnimationPlayState = "paused";
Then, you set up a helper to insert new css rules:
var addCssRule = function(rule) {
var style = document.createElement('style');
style.innerHTML = rule;
document.head.appendChild(style);
}
Then create the css keyframe rules on the fly and insert them:
// get the current transform scale of sports and events
function getCurrentScaleValue(elem) {
return document.defaultView.
getComputedStyle(elem, null).
getPropertyValue('-webkit-transform').
match(/matrix\(([\d.]+)/)[1];
}
var currentSportsScale = getCurrentScaleValue(sports);
var currentEventsScale = getCurrentScaleValue(events);
// set up the first string for the keyframes rule
var sportsTempAnimation = ['#-webkit-keyframes Sports-Temp-Bounce-Out {'];
var eventsTempAnimation = ['#-webkit-keyframes Events-Temp-Bounce-Out {'];
// basic bounce out animation
var bounceOutAnimationBase = {
'0%': 1,
'40%': 0.1,
'60%': 0.4,
'80%': 0.1,
'90%': 0.2,
'100%': 0
};
// scale the animation to the current values
for (prop in bounceOutAnimationBase) {
sportsTempAnimation.push([
prop, '
{ -webkit-transform: scale(',
currentSportsScale * bounceOutAnimationBase[prop],
') } '].join(''));
eventsTempAnimation.push([
prop,
' { -webkit-transform: scale(',
currentEventsScale * bounceOutAnimationBase[prop],
') } '
].join(''));
}
// add closing brackets
sportsTempAnimation.push('}');
eventsTempAnimation.push('}');
// add the animations to the rules
addCssRule([sportsTempAnimation.join(''),
eventsTempAnimation.join('')].join(' '));
Then, you restart the animations with these rules:
events.style.webkitAnimationName = "Events-Temp-Bounce-Out";
events.style.webkitAnimationDelay = "0s";
sports.style.webkitAnimationDelay = "0s";
sports.style.webkitAnimationName = "Sports-Temp-Bounce-Out";
events.style.webkitAnimationPlayState = "running";
sports.style.webkitAnimationPlayState = "running";
Et voilà. I made a jsfiddle here so you can play around with it.
More Sugar
In your example, the circles bounce out alternating in bounce. You can easily get this back to work with the second solution by using setTimeout for all sports circle animations. I did not want to include it here because it would unnecessarily complicate the example code.
I know the provided examples are not really DRY, you could for example make all the stuff for events and sports work with half the lines of code (with meta properties), but in terms of readability, I think this example serves well.
To have this example working in all browsers with support for css3 animations, you need to normalize the transition properties. To do this in javascript, have a look here The Example works for animations and other properties as well, just replace 'transition' with the property you want
For a further read on modifying css3 animations on the fly, I found this post very useful, have a look at it as well.

How to make a div fade on hover?

Hi I currently have span that displays over an image on hover, however I want to use a bit of javascript or css transitions to make this div fade in to about 0.8 opacity on hover then back to 0 when the mouse is not hovering.
Here is an example of how I have it setup so far, now all thats needed is the fade and 0.8 opacity:
How its setup - Jsfiddle
Im sure there is a simple bit of code that someone has to do this
Help is much appreciated thanks!

So... here's the CSS3 / HTML5-way to do this. This won't work in IE though: it will fall back on the regular, immediate way (so it does work, it just isn't as smooth as it is in the real browsers).
div.yourDiv {
-webkit-transition: .4s ease-in-out opacity;
-moz-transition: .4s ease-in-out opacity;
-o-transition: .4s ease-in-out opacity;
transition: .4s ease-in-out opacity;
}
div.yourDiv:hover {
opacity: 0.8;
}
Since CSS3-transitions are using hardware-accerelation, this really is very smooth! Besides that, you don't even need any Javascript or jQuery for this =)!

You can use CSS's :hover pseudo-class, unless you need to support IE6:
.image-hover:hover {
opacity: .8;
}
* html .image-hover:hover { /* For IE7 and higher */
filter: alpha(opacity=80);
}
That won't fade to 80%, though, it'll just go there immediately. To do that, you can use jQuery's hover and animate functions (edit: or fadeTo, which is just a convenience wrapper for animate on opacity as shown below):
$(".image-hover").hover(
function() {
$(this).stop().animate({opacity: "0.8"});
},
function() {
$(this).stop().animate({opacity: "1"});
}
);
It's not clear from your question what the text in the span is supposed to be doing, but those are the tools to get you started.
Here's an updated version of your fiddle showing the animation; I've used 0.6 rather than 0.8 just so it's more obvious.

.classa
{
opacity:0.8;
}
you can addClass and removeClass like
$("div.image-hover").hover(
function(){
//fadein
$(this).addClass("classa");
},
function(){
//fadeout
$(this).removeClass("classa");
}
);
here is the fiddle http://jsfiddle.net/2RN6E/8/
EDITED after the comment below
you can use fadeTo
$("div.image-hover").hover(
function(){
//fadein
$(this).fadeTo( "2000", "0.8");
},
function(){
//fadeout
$(this).fadeTo( "2000","1");
}
here is the fiddle http://jsfiddle.net/2RN6E/14/
);

You could do:
function fadein() {
$('.desc').animate({
opacity: 0.8,
}, 1000, function() {
// Animation complete.
})
}
function fadeout() {
$('.desc').animate({
opacity: 0,
}, 1000, function() {
// Animation complete.
})
}
$('.image-hover').hover(fadein, fadeout);
fiddle here: http://jsfiddle.net/nicolapeluchetti/2RN6E/9/

This code retains the block display for the description element: http://jsfiddle.net/2RN6E/11/
It just uses the animate function of jQuery:
$(".image-hover").hover(function() {
$(".desc").animate({opacity: '0.75'},'slow');
}, function() {
$(".desc").animate({opacity: '0'},'slow');
});

jquery animate .css

I have a script:
$('#hfont1').hover(
function() {
$(this).css({"color":"#efbe5c","font-size":"52pt"}); //mouseover
},
function() {
$(this).css({"color":"#e8a010","font-size":"48pt"}); // mouseout
}
);
how can i animate it or slow it down, so it wont be instant ?

Just use .animate() instead of .css() (with a duration if you want), like this:
$('#hfont1').hover(function() {
$(this).animate({"color":"#efbe5c","font-size":"52pt"}, 1000);
}, function() {
$(this).animate({"color":"#e8a010","font-size":"48pt"}, 1000);
});
You can test it here. Note though, you need either the jQuery color plugin, or jQuery UI included to animate the color. In the above, the duration is 1000ms, you can change it, or just leave it off for the default 400ms duration.

You could opt for a pure CSS solution:
#hfont1 {
transition: color 1s ease-in-out;
-moz-transition: color 1s ease-in-out; /* FF 4 */
-webkit-transition: color 1s ease-in-out; /* Safari & Chrome */
-o-transition: color 1s ease-in-out; /* Opera */
}

The example from jQuery's website animates size AND font but you could easily modify it to fit your needs
$("#go").click(function(){
$("#block").animate({
width: "70%",
opacity: 0.4,
marginLeft: "0.6in",
fontSize: "3em",
borderWidth: "10px"
}, 1500 );
http://api.jquery.com/animate/

You can actually still use ".css" and apply css transitions to the div being affected. So continue using ".css" and add the below styles to your stylesheet for "#hfont1". Since ".css" allows for a lot more properties than ".animate", this is always my preferred method.
#hfont1 {
-webkit-transition: width 0.4s;
transition: width 0.4s;
}

If you are needing to use CSS with the jQuery .animate() function, you can use set the duration.
$("#my_image").css({
'left':'1000px',
6000, ''
});
We have the duration property set to 6000.
This will set the time in thousandth of seconds: 6 seconds.
After the duration our next property "easing" changes how our CSS happens.
We have our positioning set to absolute.
There are two default ones to the absolute function: 'linear' and 'swing'.
In this example I am using linear.
It allows for it to use a even pace.
The other 'swing' allows for a exponential speed increase.
There are a bunch of really cool properties to use with animate like bounce, etc.
$(document).ready(function(){
$("#my_image").css({
'height': '100px',
'width':'100px',
'background-color':'#0000EE',
'position':'absolute'
});// property than value
$("#my_image").animate({
'left':'1000px'
},6000, 'linear', function(){
alert("Done Animating");
});
});