How to add a simple card flip animation? - javascript

I am creating a solitary game. So far I got most things working, but the card flip animation is a pain in the a**.
See this fiddle (it might be a bit slow since the whole game code is in it)
When you drag and drop a card, the back of the card is replaced with a front. This is done in this part of the code:
upturn: function () {
with(this) {
if (is_downturned()) {
element.children('.downturned')
.removeClass('downturned').addClass(_SUITS[_suit()].color)
.append('<img height="80px" width="50px" border="0" src="http://mauricederegt.com/test/solitaire/cards/' + _RANKS[_rank()] + '' + _SUITS[_suit()].symbol + '.jpg">') //NEW
element.addClass(_scope());
if (element.hasClass('ui-draggable-disabled')) {
element.draggable('enable');
} else {
element.draggable({
containment: '#field',
revert: 'invalid',
revertDuration: 200,
zIndex: 99
});
}
if (!element.hasClass('ui-droppable-disabled')) {
element.droppable($.extend(DROPPABLE_OPTIONS, {
accept: _tableau_pile_scope()
}));
}
}
}
}
Basically it removes the back of the card (.removeClass('downturned')) and adds a new class (.addClass(_SUITS[_suit()].color)) where suits are the hart, clover etc and the color is black or red.
Now when this action happens, I want to add a nice flipping animation.
I have played around with some tutorials on the web, but non gave me a working solution (mostly the cards starting to act weird or the game stopped working).
The closest I could get was adding:
-webkit-perspective: 600px;
-webkit-transform-style: preserve-3d;
-webkit-transform: rotateY(180deg);
/* -- transition is the magic sauce for animation -- */
-webkit-transition: 0.6s;
in the CSS in the class:
.red,
.black {
cursor: pointer;
<<<code added here>>>
}
This, however, resulted in some weird actions (though the card is flipping):
Card flips, but after the image/front is already shown
All cards are mirrored
The drag/handle area of the cards is way off
So how can I add a nice card flipping animation? Hope someone can help me out.
EDIT:
By changing this.element.addClass('container').append('<div class="downturned">'); to this.element.addClass('container').append('<div class="downturned">').append('<div class="hiddencardfront">'); in the JS part, I can create an extra empty div, (which I think I need for the card flip animation), but I still can't make it work

I guess there are a couple of ways of doing it. But I guess I'm to suggest the old-ish way of doing it using only one element. Essentially since it's a 2D object, the front and back will never show at the same time and there is going to be a point where the card will "disappear". So we can split the animation into two. "Hiding" the card (Here we can animate the width to zero). Changing the image to the other card, then "showing" the card again (animate from zero to the original width again). So if we use jQuery, with an html of
<img class="card" src="http://mauricederegt.com/test/solitaire/cards/back.jpg" />
the jQuery will look something like:
var CARDWIDTH = 50;
function turnCompatible(elem, src) {
$(elem).animate({
width: 0, //animate to zero
marginLeft: CARDWIDTH / 2,
marginRight: CARDWIDTH / 2
}, function () {
this.src = src //change the image
$(this).animate({
width: CARDWIDTH, //show the image again
marginLeft: 0,
marginRight: 0,
})
})
}
$(".card").click(function(){
turnCompatible(this, src)
})
And this will more or less work. Though the animation could be better improved for example with CSS transforms and animations but this solution would be compatible with browsers that don't support CSS transforms (mostly IE. IE<10). And with that you can do something like
function turnCSS(elem, src) {
$(elem)
.addClass("flipping")
.bind("transitionend webkittransitionend", function () { //should add more prefixes
this.src = src;
$(this)
.unbind("transitionend webkittransitionend")
.removeClass("flipping")
})
}
with the following CSS
.card {
width:50px;
height:80px;
-webkit-transition:-webkit-transform 0.5s;
transition:transform 0.5s;
background:#FF0;
}
.flipping {
transform: translate(0, 20px) rotateY(90deg);
-webkit-transform: translate(0, 20px) rotateY(90deg);
}
Demo
So perhaps the look is not what you're looking for but it is possible to do the flip animation with just one element.

I think the big problem I am having is that when this was build, no flip animation was considered. So there is just 1 Div, where more are needed to make it work. Also the drag and drop code used is old and interrups with the animation code.
I guess the only solution is to start over from scratch, with animations in mind this time.
All thanks for helping and given solution, but starting over is the way to go I think
Greetings

Try this
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<style>
/* Chrome, Safari, Opera */
#-webkit-keyframes myfirst1 {
from {
-webkit-transform : rotateY(180deg);
-moz-transform : rotateY(180deg);
-ms-transform : rotateY(180deg);
transform: rotateY(180deg);}
to {
-webkit-transform : rotateY(90deg);
-moz-transform : rotateY(90deg);
-ms-transform : rotateY(90deg);
transform: rotateY(90deg);}
}
#-webkit-keyframes myfirst2 {
from {
-webkit-transform : rotateY(90deg);
-moz-transform : rotateY(90deg);
-ms-transform : rotateY(90deg);
transform: rotateY(90deg);}
to {
-webkit-transform : rotateY(0deg);
-moz-transform : rotateY(0deg);
-ms-transform : rotateY(0deg);
transform: rotateY(0deg);}
}
/* Standard syntax */
#keyframes myfirst1 {
from {
-webkit-transform : rotateY(180deg);
-moz-transform : rotateY(180deg);
-ms-transform : rotateY(180deg);
transform: rotateY(180deg);}
to {
-webkit-transform : rotateY(90deg);
-moz-transform : rotateY(90deg);
-ms-transform : rotateY(90deg);
transform: rotateY(90deg);}
}
#keyframes myfirst2 {
from {
-webkit-transform : rotateY(90deg);
-moz-transform : rotateY(90deg);
-ms-transform : rotateY(90deg);
transform: rotateY(90deg);}
to {
-webkit-transform : rotateY(0deg);
-moz-transform : rotateY(0deg);
-ms-transform : rotateY(0deg);
transform: rotateY(0deg);}
}
#-webkit-keyframes mylast1 {
from {
-webkit-transform : rotateY(0deg);
-moz-transform : rotateY(0deg);
-ms-transform : rotateY(0deg);
transform: rotateY(0deg);}
to {
-webkit-transform : rotateY(90deg);
-moz-transform : rotateY(90deg);
-ms-transform : rotateY(90deg);
transform: rotateY(90deg);}
}
#-webkit-keyframes mylast2 {
from {
-webkit-transform : rotateY(90deg);
-moz-transform : rotateY(90deg);
-ms-transform : rotateY(90deg);
transform: rotateY(90deg);}
to {
-webkit-transform : rotateY(180deg);
-moz-transform : rotateY(180deg);
-ms-transform : rotateY(180deg);
transform: rotateY(180deg);}
}
#keyframes mylast1 {
from {
-webkit-transform : rotateY(0deg);
-moz-transform : rotateY(0deg);
-ms-transform : rotateY(0deg);
transform: rotateY(0deg);}
to {
-webkit-transform : rotateY(90deg);
-moz-transform : rotateY(90deg);
-ms-transform : rotateY(90deg);
transform: rotateY(90deg);}
}
#keyframes mylast2 {
from {
-webkit-transform : rotateY(90deg);
-moz-transform : rotateY(90deg);
-ms-transform : rotateY(90deg);
transform: rotateY(90deg);}
to {
-webkit-transform : rotateY(180deg);
-moz-transform : rotateY(180deg);
-ms-transform : rotateY(180deg);
transform: rotateY(180deg);}
}
</style>
<script>
$(document).ready(function()
{
$("#btn2").hide();
$("#btn1").click(function(){
$("#btn1").hide();
$("#box1").css({ 'z-index':'2',
'-webkit-animation': 'myfirst1 5s',
'animation': 'myfirst1 5s'
});
$("#box2").css({ 'z-index':'0' ,
'-webkit-animation': 'mylast1 5s',
'animation': 'mylast1 5s'
});
setTimeout(function(){
$("#box1").css({ 'z-index':'0',
'-webkit-animation': 'myfirst2 5s',
'animation': 'myfirst2 5s'
});
$("#box2").css({ 'z-index':'2' ,
'-webkit-animation': 'mylast2 5s',
'animation': 'mylast2 5s'
});
}, 5000);
setTimeout(function(){$("#btn2").show();}, 10000);
});
$("#btn2").click(function(){
$("#btn2").hide();
$("#box2").css({ 'z-index':'2',
'-webkit-animation': 'myfirst1 5s',
'animation': 'myfirst1 5s'
});
$("#box1").css({ 'z-index':'0',
'-webkit-animation': 'mylast1 5s',
'animation': 'mylast1 5s'
});
setTimeout(function(){
$("#box2").css({ 'z-index':'0',
'-webkit-animation': 'myfirst2 5s',
'animation': 'myfirst2 5s'
});
$("#box1").css({ 'z-index':'2',
'-webkit-animation': 'mylast2 5s',
'animation': 'mylast2 5s'
});
}, 5000);
setTimeout(function(){$("#btn1").show()}, 10000);
});
});
</script>
</head>
<body>
<button id="btn1">flip</button>
<button id="btn2">Reset</button>
<div id="box1" style="position:fixed;background:#98bf21;height:100px;width:100px;margin:6px;">
</div><div id="box2" style="position:fixed;background:#bf2198;height:100px;width:100px;margin:6px;">
</div>
</body>
</html>
In this I have just animated two div kept back to back (you can replace it with necessary images,set positions and put things into function to reduce code. I have done this specially for you. so I didn't optimize it hence I ask you to customize to soot your requirement.

Regarding your three issues with CSS 3d transforms.
Card flips, but after the image/front is already shown
All cards are mirrored
The drag/handle area of the cards is way off
For points 1 & 2 add:
-webkit-backface-visibility:hidden; /* Chrome, Safari, Opera */
backface-visibility:hidden;
And to center your element use:
transform-origin:50% 50%;
-ms-transform-origin:50% 50%; /* IE 9 */
-webkit-transform-origin:50% 50%; /* Chrome, Safari, Opera */

Related

have jquery add(or trigger?) an animation

So I have a graph that is filled out through a nice animation. This happens because every bar in the graph has the css attribute
animation: slide-left 0.9s ease-in-out 1s both;
The animation looks like this:
#keyframes slide-left {
0% {
-webkit-transform: translateX(-200%);
}
70% {
-webkit-transform: translateX(2%);
}
100% {
-webkit-transform: translateX(0);
}
}
Now, I'm not very good at javascript but I'd like this to happen on the click of a button (and have the graph hidden until the button is clicked) instead of when the page loads.
Now I've removed the animation-attribute from the css-selector and added translateX(-200%);
Realized that if I add animation: slide-left 0.9s ease-in-out 1s both; through inspect element, exactly what I want happens.
So I found a "solution" that looks like this:
$("#button").on('click', show_function);
function show_function() {
$(".graph").fadeIn("slow");
$('<style>.bar-container>* { animation: slide-left 1s ease-in-out 1s both; }</style>').prependTo('body');
}
This feels "clunky" and it takes almost a second to load. So I was wondering what a better way to have a function trigger the animation in javascript/JQuery would be?
Your best answer is likely to be have the animation sequence in a class, and use jQuery to add the class. E.g.
CSS
#keyframes slide-left {
0% {
-webkit-transform: translateX(-200%);
}
70% {
-webkit-transform: translateX(2%);
}
100% {
-webkit-transform: translateX(0);
}
}
.slide-it {
animation: slide-left 0.9s ease-in-out 1s both;
}
And then JS
$("#button").on('click', show_function);
function show_function() {
$(".graph").fadeIn("slow");
$('.bar-container').addClass('slide-it');
}

CSS3 changing animation duration (speed) mid-animation

I'm not sure if this is a duplicate or not, so forgive me.
Question
Is it possible to change the animation-duration without resetting the animation? If not, is it possible to wait until the final keyframe is completed before removing the animation and re-adding it to start the animation at the slower speed (or even wait until any keyframe is complete)?
Background
I'm making an app that allows people to create groups. I work at a church, and different groups are for different demographics (e.g. children, men, women, all adults, etc). Groups may be for a single demographic or many. Groups may also specify whether childcare is handled by the group or if the parent must take care of it.
We've found that when creating a group intended for adults but that provides childcare at the house the group meets at, people select "Children" which indicates to us that the group is for children, which it is not.
I only have 570px by 456px to work with (against my objections, the group submission page is loaded in a popup iframe), so I had to get creative with layout. Previously (ie, before bootstrap), I had an ugly layout with smaller inputs, and an ugly message explaining that, in the case described above, they should not select children, and it worked to a degree.
Now, I have a blue info button that uses a bootstrap popover to display the message.
This works to a lesser degree, as I suspect people are not clicking the button, as "Who's invited?" seems fairly self explanatory.
My solution is to make the info-sign bounce if they select more than one demographic, and bounce twice as fast if one of the selected checkboxes is "Children".
Code
I've created the classes and added the (simplified) JavaScript to do this.
var iGlyph = $("#glyphInfo");
var btnBounce = $("#btnToggleBounce");
var btnFast = $("#btnToggleFast");
var spanDur = $("#spanDuration");
var spanClass = $("#spanClass");
function updateText() {
spanDur.text(iGlyph.css("animation-duration"));
spanClass.text(iGlyph.prop("class"));
}
$(function() {
btnBounce.click(function() {
iGlyph.toggleClass("bounce");
updateText();
});
btnFast.click(function() {
iGlyph.toggleClass("bounce-fast");
updateText();
});
updateText();
});
/* LESS-generated CSS */
.bounce {
-webkit-animation: bounceKeyframe infinite;
-o-animation: bounceKeyframe infinite;
animation: bounceKeyframe infinite;
-webkit-animation-duration: 0.7s;
animation-duration: 0.7s;
}
.bounce.bounce-fast {
-webkit-animation-duration: 0.35s;
animation-duration: 0.35s;
}
#keyframes bounceKeyframe {
0% {
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
-o-transform: translate(0, 0);
transform: translate(0, 0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
35% {
-webkit-transform: translate(0, -0.9em);
-ms-transform: translate(0, -0.9em);
-o-transform: translate(0, -0.9em);
transform: translate(0, -0.9em);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
70% {
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
-o-transform: translate(0, 0);
transform: translate(0, 0);
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
}
#-webkit-keyframes bounceKeyframe {
0% {
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
-o-transform: translate(0, 0);
transform: translate(0, 0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
35% {
-webkit-transform: translate(0, -0.9em);
-ms-transform: translate(0, -0.9em);
-o-transform: translate(0, -0.9em);
transform: translate(0, -0.9em);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
70% {
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
-o-transform: translate(0, 0);
transform: translate(0, 0);
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
}
#-moz-keyframes bounceKeyframe {
0% {
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
-o-transform: translate(0, 0);
transform: translate(0, 0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
35% {
-webkit-transform: translate(0, -0.9em);
-ms-transform: translate(0, -0.9em);
-o-transform: translate(0, -0.9em);
transform: translate(0, -0.9em);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
70% {
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
-o-transform: translate(0, 0);
transform: translate(0, 0);
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="text-align: center; margin-top: 5%">
<div class="btn btn-info">
<span id="glyphInfo" class="glyphicon glyphicon-info-sign" style="line-height: 22px"></span>
</div>
</div>
<div style="text-align: center">
animation-duration: <span id="spanDuration"></span>
</div>
<div style="text-align: center">
classes: <span id="spanClass"></span>
</div>
<div style="text-align: center; margin-top: 15px">
<div class="btn btn-default" id="btnToggleBounce">Toggle Bounce</div>
<div class="btn btn-default" id="btnToggleFast">Toggle Fast</div>
</div>
This works in Firefox, though when you toggle .bounce-fast, the animation restarts (skips). Not surprisingly, Internet Explorer bounces the icon completely off screen (looks like it doesn't like using both em and px units), but animation-duration-wise, it acts the same as Chrome, which uses whatever animation-duration was set to when the animation rule was set, and never overrides it until the animation rule is unset.
Problem
So, ideally, I would be able to set the animation-duration somehow without having to reset the animation completely. I want a smooth transition from one speed to the other, without the icon jumping.
Is this possible?
Unfortunately there is no way to do this with pure CSS animations. The nature of CSS animations is that the calculations for the transition only have to happen once (when the animation is called) in order to speed them up.
If you want to change speed of animations you'll need to use Javascript (which is nearly as fast, sometimes faster than, CSS animations)
I particularly like Greensock and Velocity

Scroll-controlled text animation

How do I trigger and control text animation with scrolling?
<p class="class">TEXT</p>
transform:translateX(-500px);opacity:0;
transform:translateX(0px);opacity:1;
You can use Skrollr.
Import the library, then something like
<p class="class" data-X_start=" transform:translateX(-500px);opacity:0;" data-X_end=" transform:translateX(0px);opacity:1;">
TEXT</p>
would start the animation when your scroll bar is at X_start and finish it when you reach X_end.
You must set your initial style values.
Modify style values by:
a. Adding Class
b. Adding inline style property
c. use css3 animation style property
or
Use external js library.
do not forget cross-browser compability by using prefixes.
Example (using jQuery):
//css
.class {
-moz-transform: translateX(-500px);
-ms-transform: translateX(-500px);
-o-transform: translateX(-500px);
-webkit-transform: translateX(-500px);
transform:translateX(-500px);
opacity:0;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.class.animated {
-moz-transform: translateX(0px);
-ms-transform: translateX(0px);
-o-transform: translateX(0px);
-webkit-transform: translateX(0px);
transform: translateX(0px);
opacity: 1;
}
//html
<p class="class">TEXT</p>
//js - animate on scrol event
$( "#target" ).scroll(function() {
$(".class").toggleClass("animate");
});

image rotate 360 degree on click

Need your help developers,
I am using images as a menu. I just want when i click on image it rotate 360 degree and then another page is open.
i try this.
<style>
.image {
overflow: hidden;
transition-duration: 0.8s;
transition-property: transform;
}
.image:active {
-webkit-transform: rotate(360deg);
}
</style>
html:
<img class="image" src="img path">
in this code image rotation is depend on click time and i want user just click once image rotate 360 degree and the link page display.
but this is not i want.
I am using jqueryMobile and phonegap
thanks in advance.
You can put the link url in the image as a data attribute:
<img id="theimage" data-linkurl="#page2"src="http://makeameme.org/media/templates/120/grumpy_cat.jpg" alt="" />
Then when you handle the click event,
You add the animation class.
You add an animationEnd handler that fires when the animation is complete. Use one() instead of on() as you only want this handler to fire once.
In the animationEnd handler you remove the animation class (so you can add it again next time), get the url from the data-attribute, and then navigate to the page.
$("#theimage").on("click", function(){
$(this).addClass("imageRot").one('webkitAnimationEnd mozAnimationEnd oAnimationEnd msAnimationEnd animationend', function () {
$(this).removeClass("imageRot"); //remove anim class
var url = $(this).data('linkurl'); //get url from data-attribute
$( ":mobile-pagecontainer" ).pagecontainer( "change", url); //navigate to page
});
});
For the animation class I have used #cracker's spin animation (thanks cracker!):
.imageRot {
-webkit-animation:spin 2s ease-in-out;
-moz-animation:spin 2s ease-in-out;
animation:spin 2s ease-in-out;
}
#-moz-keyframes spin {
100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); }
}
#-webkit-keyframes spin {
100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); }
}
#keyframes spin {
100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); }
}
Here is a working DEMO
you need to try using
.image {
-webkit-animation:spin 4s ease-in-out; // No more infinite
-moz-animation:spin 4s linear;
animation:spin 4s linear;
}
#-moz-keyframes spin {
100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); }
}
#-webkit-keyframes spin {
100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); }
}
#keyframes spin {
100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); }
OR
#-webkit-keyframes rotate {
100% { -webkit-transform: rotate(360deg); }
}
.rotate {
-webkit-animation-name: rotate;
-webkit-animation-duration: 4.5s;
-webkit-animation-iteration-count: infinite;
-webkit-transition-timing-function: linear;
}
DEMO1
DEMO2
try it:
<style>
.image {
overflow: hidden;
-webkit-transition: transform 0.8s;
transition: transform 0.8s;
}
.image:active {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
</style>
You didn't include a webkit option (-webkit-*) in transition.
You didn't include a non-webkit option in transform.
because of that, no matter what browser you were using, something were missing (transform or transition), and therefore the code didn't work on any browser.
edit: I noticed it wasn't what you were asking for. I don't believe that it can be done with CSS only. If you want, you can do it with jQuery:
<script>
$(".image").click(function(){
$(this).addClass("clicked").delay(800).removeClass("clicked");
});
</script>
<style>
.image {
overflow: hidden;
-webkit-transition: transform 0.8s;
transition: transform 0.8s;
}
.image.clicked {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
</style>
HTML
<img src = "some_image.png" alt = "test" class = "rotative" />
CSS
.canRotate
{
-webkit-animation: FullRotation 3s ease-out;
-o-animation: FullRotation 3s ease-out;
-ms-animation: FullRotation 3s ease-out;
-moz-animation: FullRotation 3s ease-out;
animation: FullRotation 3s ease-out;
}
#-webkit-keyframes FullRotation
{
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); }
}
#-o-keyframes FullRotation
{
from { -o-transform: rotate(0deg); }
to { -o-transform: rotate(360deg); }
}
#-ms-keyframes FullRotation
{
from { -ms-transform: rotate(0deg); }
to { -ms-transform: rotate(360deg); }
}
#-moz-keyframes FullRotation
{
from { -moz-transform: rotate(0deg); }
to { -moz-transform: rotate(360deg); }
}
#keyframes FullRotation
{
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
JavaScript
function RotateOnClickAndOpenPage(classname, url)
{
var elts = document.getElementsByClassName(classname);
for(var i = 0; i < elts.length; ++i)
{
elts[i].onclick = function(){
this.style.className = "canRotate";
var that = this;
setTimeout(function(){
window.open(url);
that.style.className = "cannotRotate";
}, 3000);
};
}
}
// Exemple
RotateOnClickAndOpenPage("rotative", "http://www.google.fr");

CSS3 animation does not start in Opera if element initially had display: none

I'm trying to show infinitely rotating image after some event in js.
Works perfectly in Chrome 26, Firefox 19, but fails in Opera 12 (latest).
I use initial image with style="display: none" like this:
<img src="http://example.com/img.png" id="test" style="display: none">
Then I show the image (remove display: none):
$('#test').show();
Expected behavior: see rotating image. Rotation does not happen in Opera.
Is this an Opera bug? I know I can start animation by applying it with class after image is shown, but I want to figure out how to trigger it when image has animation set initially.
Animation works fine when the initial image is shown (display: block).
Here is jsFiddle example: http://jsfiddle.net/vdJLL/
CSS which I use for rotation:
#test {
-webkit-animation: rotate 5s linear 0s infinite normal;
-moz-animation: rotate 5s linear 0s infinite normal;
-o-animation: rotate 5s linear 0s infinite normal;
-ms-animation: rotate 5s linear 0s infinite normal;
animation: rotate 5s linear 0s infinite normal;
}
#-webkit-keyframes rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#-moz-keyframes rotate {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
#-o-keyframes rotate {
from {
-o-transform: rotate(0deg);
}
to {
-o-transform: rotate(360deg);
}
}
#-ms-keyframes rotate {
from {
-ms-transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg);
}
}
#keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
I've just ran into the similar problem - I've been trying to js display:none other div (that wasn't even affecting the animation) and got on Opera animation freezed (which, what's even more funny, could be unfreezed by entering dragonfly and re-enabling animation part of style) - so it sounds indeed like an Opera bug.
Anyways, I just learned a workaround - instead of display:none, it'll work with
visibility:hidden; height: 0px;
See also your jsfiddle updated http://jsfiddle.net/vdJLL/3/

Categories