CSS3 animations can give your web sites dynamic effects and visual queues for added user friendly navigation. Of course, such effects could quickly become noisy if exaggerated. I have added a sample demo of a Bookshelf with HTML and CSS3 below.
CSS3 Animated Bookshelf (Plunk)
The following HTML builds up the user interface - that is, the Bookshelf itself.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<h1>CSS3 Animations - Bookshelf</h1>
<div id="box1" class="box">
<p>HTML 2.0 for beginners</p>
</div>
<div id="box2" class="box">
<p>Internet Relay Chat Powertips</p></p>
</div>
<div id="box3" class="box">
<p>MS-DOS 5.0 Masterclass</p>
</div>
<div id="box4" class="box">
<p>QBasic Game Coding</p>
</div>
</body>
</html>
To animate these "Books", that is the < div > elements, CSS3 rules are added. The following CSS3 style sheet was added:
/* Styles go here */
@keyframes FocusBook {
0% {
transform: scale(1.1);
}
100% {
transform: scale(1.8) rotate(90deg);
box-shadow: 8px 8px 8px #8080af;
text-shadow: 1px 1px #102030;
top: 50%;
left: 50%;
position: fixed;
color: white;
background:linear-gradient(90deg, peru, brown);
}
}
.box {
width:50px;
height:250px;
border:1px solid black;
box-shadow: 2px 2px 2px #808080;
background:linear-gradient(peru, burlywood);
transform: rotate(0deg);
transition: all 1s;
float: left;
opacity:0.9;
margin: 2px;
user-select: none;
}
.box:hover {
transform: translate(2px, 0px) rotate(2deg) scale(1.1);
cursor: pointer;
box-shadow: 2px 2px 2px yellow;
color:black;
background:linear-gradient(45deg, peru, brown);
z-index:20;
}
.box p {
font-family: Verdana;
color: charcoal;
font-size:10pt;
white-space: nowrap;
transform: rotate(-90deg) translate(-190px, -10px);
}
.box:active {
animation: FocusBook 1.0s infinite alternate;
}
To support transitions with CSS, you add the CSS attribute
transition with a comma-separated list of css attributes to allow transitioning and the time the transition should take. We add first
all here to allow transition all attribute changes:
.box {
width:50px;
height:250px;
border:1px solid black;
box-shadow: 2px 2px 2px #808080;
background:linear-gradient(peru, burlywood);
transform: rotate(0deg);
transition: all 1s;
float: left;
opacity:0.9;
margin: 2px;
user-select: none;
}
The transition is then in effect for the hover transition.
.box:hover {
transform: translate(2px, 0px) rotate(2deg) scale(1.1);
cursor: pointer;
box-shadow: 2px 2px 2px yellow;
color:black;
background:linear-gradient(45deg, peru, brown);
z-index:20;
}
Now, let's take a look at the animation effect when the user clicks on one "Book". We define key frames first.
@keyframes FocusBook {
0% {
transform: scale(1.1);
}
100% {
transform: scale(1.8) rotate(90deg);
box-shadow: 8px 8px 8px #8080af;
text-shadow: 1px 1px #102030;
top: 50%;
left: 50%;
position: fixed;
color: white;
background:linear-gradient(90deg, peru, brown);
}
}
Then we play the animation after defining the key frames (note the percentage to specify keys at a relative elapsed time of the animation):
.box:active {
animation: FocusBook 1.0s infinite alternate;
}
Note that the CSS attribute animation now points to the @keyframes defined. In addition, the animation uses the keywords
infinite and
alternate.
The best use of CSS3 animations is most likely subtle changes in color and size, and using CSS transforms. You can define many keys in @keyframes definition for complex animations.
