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.
| Attachment | Size |
|---|---|
| trans.html | 1.19 KB |