CSS3 Transitions not working on width and height of canvas element

Question

I use firefox 24.0 for development purpose.

i have this element in my code

Unique Id

.t_Bubble > canvas:nth-child(1)

External HTML content

<canvas style="width: 50px; height: 73px;" height="73" width="50"></canvas>

it later changes to this HTML content in later part of code.

<canvas style="width: 114px; height: 62px;" height="62" width="114"></canvas>

i have applied this css on this element

.t_Bubble > canvas:nth-child(1){

transition: width 2s ease,height 2s linear;
-moz-transition:width 2s ease, height 2s linear;
-webkit-transition:width 2s ease, height 2s linear;
}

But no transition happens anytime in browser. Can you help me with this? Thank you

Answer 1

I just tried it, and it worked for me. So what I said is totally wrong .

So my guess will be that your CSS don't apply to the canvas, Due to an error in the selector.

can you share your HTML?

also, use :first-child instead of :nth-child(1) it has better support

Transitions works when you change the `width` and `height` via different styling. in example: you may have a different styling rule for `:hover` or `:active`. then the transition will occur when you hover, and will be transition back to normal when you stop. but not by applying direct width & height attributes to the DOM element. that will kick in the change right away. what is making the HTML to change? maybe you can apply a different class to the element instead of hard coding the changes into the DOM? that way you will benefit from the transition. also, Your CSS rule overides this 'hard-coded' sizes, you can see in that [Fiddle](http://jsfiddle.net/avrahamcool/kYRnG/) that the 200px is taken over the 100. so even after the DOM changes, it takes no affect, because the CSS rule still overrides it.

Answer 2

Short answer: you're probably not targeting the canvas element properly with your CSS selector.

Long 'answer': I think there's a couple of things to note:

1. Changing the height or width attributes of the canvas tag will complete clear it (ie remove anything drawn to it, resetting it to a blank slate). (Although apparently, this doesn't happen in some browsers.)
2. For <canvas> elements, the height or width attributes have a unique relationship with the CSS properties of height and width , which I describe here: https://stackoverflow.com/a/19079320/1937302
3. Changes to the height or width attributes will not be 'transitioned'/animated
4. Changes to the CSS properities of height or width attributes will be 'transitioned'/animated

I've demoed some of this here:

http://jsfiddle.net/BYossarian/WWtGZ/3/

HTML:

<canvas id="canvas1" height="50" width="100"></canvas>

CSS:

canvas {
    border: 1px solid black;
    transition: all 1s ease;
    height: 50px;
}

JS:

var canvas = document.getElementById('canvas1'),
    ctx = canvas.getContext('2d');

ctx.fillStyle = "red";
ctx.fillRect(10, 10, 30, 30);

// changing width attribute clears canvas element (in most broswers)
// changing width attribute isn't animated by CSS transition
setTimeout(function () {
    canvas.width = "200";
}, 2000);

// changing CSS rule for width is animated, although if no CSS rule for width already exists, then a width of 0px is taken as the starting point
setTimeout(function () {
    ctx.fillStyle = "red";
    ctx.fillRect(10, 10, 30, 30);
    canvas.style.width = "100px";
}, 4000);