Reply to comment

CSS Animations via Transitions

I don't know anything about CSS Transitions, so I made this little demo to try it out. It's ultra-simple, and I normally wouldn't post this kind of thing, but the examples I saw were a lot snazzier, so it was harder to read the code. (To this end, this is probably too fancy.)

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            .all {
                border: 1px solid white;
                width: 50px;
                float: left;
            }
            .a {
                height: 50px;
                background-color: violet;
            }
            .a:hover {
                height: 100px;
                background-color: red;
            }
            .a:active {
                height: 60px;
                background-color: blue;
            }
            .move {
                transition: 0.5s;
            }
        </style>
    </head>
    <body>
        <div class="all a move"></div>
        <div class="all a move"></div>
        <div class="all a move"></div>
        <div class="all a move"></div>
        <div class="all a move"></div>
        <div class="all a move"></div>
        <div class="all a move"></div>
        <br clear="both" />
        <div class="all a move"></div>
        <div class="all a move"></div>
        <div class="all a move"></div>
        <div class="all a move"></div>
        <div class="all a move"></div>
        <div class="all a move"></div>
        <div class="all a move"></div>
    </body>
</html>

One thing I've done a little weird is to separate out the transition into the move class. That's not necessary. It's only for me.

The other thing I did, which is similar to my other CSS animation post, is to break out the CSS styles into one class for all the common styles, "all", and three classes for the three animated keyframe states, "a", "a:hover" and "a:active". This *is* necessary.

AttachmentSize
trans.html1.19 KB

Reply

The content of this field is kept private and will not be shown publicly.
  • Lines and paragraphs break automatically.

More information about formatting options

10 + 0 =
Solve this simple math problem and enter the result. E.g. for 1+3, enter 4.