CODEWITHSUNDEEP
htmlcsscanvassvg
3z33etm
3z33etm

Reputation: 1113

simple CSS animation, should I be doing this in canvas or SVG?

the first two keys are operational (leftmost key, and the black key right next to it). here it is hosted so you can see

http://23.23.184.26/miller/keyboardanimation/main.html

I have to redraw the WHOLE keyboard because the 3d nature of each key does not leave a square profile that I can replace with a square image. I don't see support anywhere for trapezoidal elements...

Should I be doing this in SVG or canvas or something? I feel like the way I'm doing this is really dumb.

And, I'm getting a wierd white flash between transitions sometimes (on IE9 only tho I think)

<!DOCTYPE HTML>
<html>
<head>
    <style type="text/css">
        a{
            color:white;
        }
        #main{
            background:white url('0.gif') no-repeat 0 0;
            position:relative;
            z-index:0;
            width:506px;
            height:319px;
        }

        #key1{
            position:absolute;
            width:50px;
            height:75px;
            top:175px;
            left:55px; 
        }
        #key2{
            position:absolute;
            width:50px;
            height:75px;
            top:100px;
            left:85px;
        }
        /*uncomment this to show button zones*/
        /*#key1:hover, #key2:hover{
            border:1px solid red;
        }*/
    </style>
</head>

<body>
    <div id="main">
        <div id="key1" onMouseDown="document.getElementById('main').style.background = 'url(1.gif)'" onMouseUp="document.getElementById('main').style.background = 'url(0.gif)'"></div>
        <div id="key2" onMouseDown="document.getElementById('main').style.background = 'url(2.gif)'" onMouseUp="document.getElementById('main').style.background = 'url(0.gif)'"></div>
    </div>
</body>

Upvotes: 0

Views: 343

Answers (1)

ggarcia24
ggarcia24

Reputation: 392

You are not using CSS animation :-/, you are making simple background transition using Javascript.

That said there is also another small detail, if you use canvas to draw and animate the piano, you will need to "re-draw" the piano that doesn't change and every part of the piano that changes.

I would suggest that you do this in SVG and animate that, as you will have less parts to animate :-).

Greetings! Gonzalo G.

Upvotes: 2

Related Questions