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

I’m also using Firefox 24, and it works fine. Can you add [an example](http://codepen.io/pen), please? — Ry-, Sep 29 '13 at 15:13

avrahamcool · Answer 1 · 2013-09-29T19:31:48.983

2

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.

edited Sep 29 '13 at 19:31

answered Sep 29 '13 at 14:10

avrahamcool

13,888
5
47
58

@BoltClock its not via style, its hard-coded in the elements attributes. – avrahamcool Sep 29 '13 at 14:15
3

My bad, I see now that the code includes both `style` and `width`/`height` attributes. – BoltClock Sep 29 '13 at 14:15
@avrahamcool hi, actually its one of jquery plugin for tooltip. Honestly i have no idea on whats going on inside. should i go with traditional javascript code to achieve this functionality? – Wanna_be_Coder Sep 29 '13 at 14:24
2

I think that its always better to know what your using. especially if it don't gives you exactly what you want. If you can achieve the same thing.. on your own - it might be a better solution for you. – avrahamcool Sep 29 '13 at 14:29

score 1 · Answer 2 · edited May 23 '17 at 12:00

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:

Changing the height or width attributes of the canvas tag will complete clear it (i.e. remove anything drawn to it, resetting it to a blank slate). (Although apparently, this doesn't happen in some browsers.)
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
Changes to the height or width attributes will not be 'transitioned'/animated
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);

CSS3 Transitions not working on width and height of canvas element

2 Answers2