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.
Related
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.
I'm currently building a landing page with some css animations (pretty basic fade-ins). I initially set animation-play-state: "paused" in my css file, and later on access it with jQuery while scrolling the page, to trigger the animation.
Works perfectly fine on Chrome on my Mac, but trying to run it from both Safari and Chrome on my iPhone does not seems to work.
I inspected the console logs and debugged it as far as I could think, everything seems to work but the actual animation does not run (however the animation-play-state is changing to "running".
Last thing to add, if I put the $(".row").css("animation-play-state", "running"); statement before the if statement, it does exactly what it supposed to do.
My jQuery statement is:
//the position where I want the animation to trigger
var destinations = $('#destinations').offset().top - 300;
//the event listener
if($(window).scrollTop() > destinations) {
$(".row").css("-webkit-animation-play-state", "running");
$(".row").css("animation-play-state", "running");
}
Anyone knows the problem? Thanks a lot in advance!
Niv
Faced this issue today. I've was changing animation-play-state, to create nice reveal animation.
There was also animation-fill-mode: both; defined.
I used keyframes like this
#keyframes fade {
from { opacity: 0; }
to { opacity: 1; }
}
And nothing seem to help in Safari. Mine tested version is 11.1.2 (13605.3.8) (Stable at this moment) and Safari Technology Preview Release 63 (Safari 12.1, WebKit 13607.1.2.1), on Macbook as well as iPhone - result is same, no animation playing.
TL.DR. You can't simply change animation-play-state in Safari. Try to change animation-name property
I was lucky to use opacity and transform to reveal elements, so this hacky temporal animation name helped me:
#keyframes be-hidden {
from { opacity: 0; }
to { opacity: 0.0000001; }
}
#keyframes fade {
from { opacity: 0; }
to { opacity: 1; }
}
div {
animation-name: be-hidden;
animation-duration: 600ms;
animation-fill-mode: both;
animation-delay: 500ms;
animation-iteration-count: 1;
}
div.revealed {
animation-name: fade;
}
Set animation-name to some temp animation, which will hide elements, then change it to other (.revealed class)
If there is another way to resolve this issue, I will be happy to see it.
Possibly related: https://stackoverflow.com/a/33272708/3278855
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.
This question is partly duplicated, but not completely. I know how to add intervals to my own animation but now the animation I'm talking about is from animate.css. I want to add intervals to its animation, say, shake. How?
Try using javascript to achieve this.
Using -
$(".ani").delay(700).each(function(index) {
$(this).delay(700*index).fadeIn(500);
});
Add the class="ani" to your elements which require the delays and play with the timings (in milliseconds) to achieve the delays and trigger timings.
Using animation-iteration-count: x; you can control the number of times the animation is triggered.
Hope this helps.
h1 {
animation-duration: 3s;
animation-name: shake;
animation-iteration-count: infinite;
animation-delay: 3s;
}
#keyframes shake{
from {
margin-left: 100%;
width: 300%;
}
to {
margin-left: 0%;
width: 100%;
}
}
check this link https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations
i hope this is useful for you
animation execute continue after 3s because we define animation-duration: 3s;
and why animation execute continue after one time because we define animation-iteration-count: infinite;
Just give it an id and apply css.
#animationID { animation-duration: 2s; }
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)