Currently, I am in the process of learning CSS3 but struggling with implementing classes in CSS3. Can someone offer their assistance?
<!DOCTYPE html>
<html>
<head>
<title>Zoom Hover</title>
<style type="text/css">
@-moz-keyframes 'zoom' {
0%{
height:200px;
width:200px;
}
100% {
width: 1000px;
height: 1000px;
}
}
@-webkit-keyframes 'zoom' {
0%{
height:200px;
width:200px;
}
100% {
width: 1000px;
height: 1000px;
}
}
.aaa{
width:200px;
height:auto;
}
.aaa:hover {
-moz-animation-name: 'zoom' 2s;
}
.aaa:hover {
-webkit-animation: 'zoom' 2s;
}
.aaa{
width:200px;
height:200px;
-moz-transition-duration: 2s; /* firefox */
-webkit-transition-duration: 2s; /* chrome, safari */
-o-transition-duration: 2s; /* opera */
-ms-transition-duration: 2s; /* ie 9 */
}
.aaa:hover {
width: 1000px;
height: 1000px;
}
</style>
</head>
<body>
<div class="aaa"style="width:100px;height:100px;background:red;"></div>
</body>
</html>
I'm seeking guidance on the best way to approach this, so please assist me. Also, does anyone know a reliable website where I can learn more about CSS3?