jQuery + RGBA color animations - javascript

Does anyone know if jQuery can handle an animation like:
rgba(0,0,0,0.2) → rgba(0,255,0,0.4)
I know there is a plugin to handle color animations, but this might be too modern?

Using CSS3 animation (no javascript)
You can also achieve the same effect using CSS3 animation. See below,
Step 1: Create a keyframe for your animation
#keyframes color_up {
from {
background-color: rgba(0,0,0,0.2);
}
to {
background-color: rgba(0,255,0,0.4);
}
}
Step 2: Use the animation rules.
animation-name: color_up;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: ease-in-out;
DEMO: http://jsfiddle.net/2Dbrj/3/
Using jQuery
jQuery now supports color animation with RGBA support as well. This actually animates from one color to other.
$(selector).animate({
backgroundColor: 'rgba(0,255,0,0.4)'
});
DEMO: http://jsfiddle.net/2Dbrj/2/

Uh, nevermind. Found an amazing modification to the jquery color plugin.
http://pioupioum.fr/sandbox/jquery-color/

use jquery UI for handle that, $(object).animate({color : 'rgba(0,0,0,.2)'},500)

Related

With styled-components, how to use the longform css animation syntax to have multiple keyframed animations?

So when an animation is created via the longform declaration and it has multiple specified names:
const animationNameCss = css`
//insert keyframes here
`
let animatedImg = styled.img`
animation-name: ${animationNameCss}, ${animationNameCss};
animation-delay: 0, 200ms;
animation-duration: 200ms;
animation-timing-function: linear;
animation-iteration-count: 1;
`;
Only the first animation is performed. Is this related to concatenating tagged templates or simply not supported in styled-components? The intent is to create multiple animations that play back to back of 200ms each by concatenating animation-name and animation-delay.
AnimationNameCss is dynamically set to one of 8 different keyframe sets in the real code.
I'm actually wrong, it does work like this. The issue was actually in animation-delay: 0, 200ms;
That should be 0ms, 200ms and the animation performs as expected.

Spatial interfaces: animating containers back and forth to a sidebar

I am trying to create a fairly complex animation, where the content resizes into and out of a sidebar. Here's a quick Keynote prototype to explain what I'm after:
I started using flex-box and changing the flex-direction from row to column, as well as moving the container div into a "sidebar" on the left. However as it turns out, flex-direction is not animatable.
I then had a look at Alex Maccaw's Magic Move jQuery plugin, but I haven't been able to get anywhere with that. Same deal with using absolute positioning and animating the position.
Suggestions on an approach would be awesome.
I gave implementing this a shot using chained CSS animations. Here's the result: http://codepen.io/chrisdarroch/full/PNjpaG/
The crux of the solution is to create two sets of elements -- the nav items and the panels -- and then have animations for the base states and "active" states of each.
.nav-item {
animation: grow 1*$n ease-in;
animation-fill-mode: both;
&.active {
animation: fade 0s 1*$n, shrink 1*$n linear 3*$n;
animation-fill-mode: forwards;
}
}
.panel {
animation: grow 0*$n linear;
animation-fill-mode: both;
&.active {
animation: appear 0s linear 1*$n, slidein 1*$n ease-out 1*$n;
animation-fill-mode: both;
}
&.inactive {
animation: shrink 1*$n linear;
animation-fill-mode: both;
}
}
I've left out the implementations of each #keyframe animation for brevity; check the codepen for the full source.
The above is written using SCSS. The important thing to note is the $n variable. It's a value in seconds -- e.g., $n: 0.5s. It's used to coordinate the delay times and animation times for each stage of the animation.
My solution isn't 100% complete, but you might get an idea for how to chain animations to achieve your design.

Animating SVG path with CSS in IE11

THE BACKGROUND
I'm working on a game in the style of Symon, where a user has to click elements in the right order as the computer generates a random sequence.
The elements are made out of SVG paths.
I wish to have a PENDING status on the game, where one of the elements is flashing repeatedly to draw user interaction
I'm working on IE11
THE ISSUE
I can't seem to get the Paths to animate a flashing color. I'm not very experienced with css animation but it seems like I've done everything right, and I've used many different examples to write this bit of code. It's ignoring the class pending that is meant to infinitely animate the path element.
#-webkit-keyframes flash {
0% {
fill: black;
}
100% {
fill: #ff7420;
}
}
#keyframes flash {
0% {
fill: black;
}
100% {
fill: #ff7420;
}
}
.game_tri.pending path {
transform:translatey(-100px);
animation-name: flash;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: ease-in-out;
-webkit-animation-name: flash;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: ease-in-out;
}
Full code on:
JSFIDDLE https://jsfiddle.net/tomshanan/oushonob/10/
BONUS QUESTION
I would love to know if anyone can tell why the game stops working once I remove active from the game_tri classes on line 9.
$(document).ready(function () {
$(".game_tri").attr("class", "game_tri active pending");
reset_game();
});
When you press the Next Round button, this should reinsert that class anyway, but the game does not respond if that class is removed initially. I don't understand why.
IE prior to IE Edge does not support CSS animations applied to SVG elements.

I want an animation to trigger on active and continue once the active state is gone

I want an animation to start when someone clicks a button but to continue/finish when they unclick.
&:active > .ripple {
-webkit-animation: ripple 3s infinite;
}
The animation only continues so long as the button is held down. Is there a way to achieve this with just css or will I need to use JS? I'm pretty green when it comes to JS so was hoping to achieve with just css.
Thanks!
Did you try the CSS property
&:focus > .ripple {
-webkit-animation: ripple 3s infinite;
}
It's basically the 'onclick' in JavaScript
Tell me if if works for you
Cheers !

Slideshow with content animated in CSS

I have a slideshow with 3 images. For each of the image I have need to add some content on top of the image, and the text need to move from right to left, and gone in 3 secs. Then it will slide to the 2nd image, and again, I have to display the content from right to left again, this time with a background box at the back of the text.
How can I do this kind of animation in css? Moreover, this slider need to be compatible for all browsers.
Can anyone give me a hint?
Thanks in advance.
You can totally do that kind of animation with CSS, but you would have to use javascript to trigger the animations. The method you are talking about would not work for all browsers. If you can use jQuery for your projects, then you can use the animate feature. Plus it would be compatible for essentially all browsers that people use.
For the CSS approach, you would use the animation property, like this
#keyframes {
from { color: #fff; } to { color: #000; }
}
#-webkit-keyframes {
from { color: #fff; } to { color: #000; }
}
.myanimatedclass{
animation: myanimation 2s ease-in;
-webkit-animation: myanimation 2s ease-in;
}
For the jQuery approach, look up jQuery's animate feature. You will find all that you need.
https://api.jquery.com/animate/

Categories