CSS animating elements with transition class
A simple example of using the CSS transition class property to animate elements on click.
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
.transitionClass {width: 150px; height: 150px; border: 1px solid #aaaaaa; background-color: #cccccc; transition: width 2s; -webkit-transition: width 2s; -o-transition: width 2s; text-align: center; padding: 10px;}
.transitionClass:hover {width: 500px;}
#testImage {
width: 150px;
}
</style>
</head>
<body>
<div class = 'transitionClass'>
<img id="testImage" src="data:image/gif;base64,R0lGODlhyADIAIAAAJ
+sshNQXSH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE
1QIENvcmUgNS4zLWMwMTEgNjYuMTQ1NjYxLCAyMDEyLzAyLzA2LTE0OjU2OjI3ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cm
RmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj
0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpEN0
VBOTI1QTIxNTgxMUU1ODZCQ0Q0NjI4RjA2OEZCRSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpEN0VBOTI1QjIxNTgxMUU1ODZCQ0Q0NjI4RjA2OEZCRSI
+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkQ3RUE5MjU4MjE1ODExRTU4NkJDRDQ2MjhGMDY4RkJFIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkQ3RUE5MjU5MjE1ODExRTU4NkJ
DRDQ2MjhGMDY4RkJFIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+Af/
+/fz7+vn49/b19PPy8fDv7u3s6+rp6Ofm5eTj4uHg397d3Nva2djX1tXU09LR0M/OzczLysnIx8bFxMPCwcC/vr28u7q5uLe2tbSzsrGwr66trKuqqainpqWko6KhoJ
+enZybmpmYl5aVlJOSkZCPjo2Mi4qJiIeGhYSDgoGAf359fHt6eXh3dnV0c3JxcG9ubWxramloZ2ZlZGNiYWBfXl1cW1pZWFdWVVRTUlFQT05NTEtKSUhHRkVEQ0JBQD8+PTw7Ojk4NzY1NDMyMTAvLi0sKyopKCcmJSQjIi
EgHx4dHBsaGRgXFhUUExIREA8ODQwLCgkIBwYFBAMCAQAAIfkEAAAAAAAsAAAAAMgAyAAAAv+Ej6nL7Q+jnLTa
+wLQfPsOfmJIjmaJnmrKrm4Lv3LcYfaN5/rOQ/QM/AmDxKGxiIz1lsym80nRJKfHKvVqzWI90K73C75px1uyuYw+htfsNvgMT8vj9Kv7js/bpPW+ibs3J+gnpWd4iIhQY8DH6MjVCPnYWGhRs9gVqem4KenZCTop
+jlaeVAYSqpqisOaqJAaWzq7Snv5ipsbVnlb6+uq2yT7a1tMLBycrBupaMysfDcs7UwNmIB5Da1t3bwA/M0A3g3seTq6jWf6XH7ezv5Obo6+Hb8Mm308H109fZzK/UifsnoC8VkjWJCHK17yAjIMCOjhwYYQHVbsdjHhE1b/
4u55CwfyI0YfGtesA5gRpcqOBiNwLPklHsKULEfabEiQXCeVMCfMPNkzaKuUPF2G9Ii0pUiKEGdavCmU5FGlTKvStKrDKdRgOqdGlaBV69cGYg3lHJshytClVK
+6KYs2rty5dOvavYs3r969fPv6/Qs4sODBhAsbPow4seLFjBs7fgw5suTJlCtbvow5s
+bNnDt7/gw6tOjRpEubPo06terVcTkEwAb2tezXhV3Pvo3L9QfYDmj7tt3X9u3hxM3q/v1T9gbhuO0Sfw599lvfy0fQ7g0CN3K46JRH/158V/bd3n1or+6dO7T0x8GDj0l
+OXXpZEm8/8oevfv96l0C/5+PXnXhFPebfMoFlR557PEXnRPtGbjgStZthxyC9s23IIPh9ZBgeccZ6M1wEDJ3nUbjYahhigo9+N9/KF2o33MJSfchjSSmKGMOLNoo34iwiKhdhAKhEiOKODLYSovxFTheM9k9OWKJ9PQYgoI
3HgldIB3u6KOUBPI3zy3tbYklmJZgqF+aAFJnDpQV5rceDCdmWGaWFQinJpdwRjkmn/298cKYdR7pk315HtrhCUA2yJUkhtZ45aB2prUooiwW
+WWXzTWKgpuSlpnBmkzqieeaS1IoYi7XyUllpJ/mSFaUliKK6aJBbpgIJStc+Cqh13h46qzbBcirlbLm+gcLZP/2CiaTmgp76ajn2cgoIro
+aiSzhL4Z7KiWevskhX4iu4myO2rrnqJKgqtnntNmeKwe1+5aK7o4UhkjpvoO6yyJfqaah5gijOOuvUjyK+1u
+PYrqKjSAhzwOwFOaDCoaC7bcJFq8vkvxG30AiAn1tVb8Xcgkqmwh5BqDKOrUrIxrzwCu1yyyRcn3Ce10X6ps8cmOUqKuTVrCKG7JzOcsr/hdnzgx0DLLHLDQxO9LqQtIkyspghvusvTINM7tYo8Ppx0yt8ayfTLXesqyrXh
hn2wsEcfza6xpVYL6MDlRm0l3AfXTePGN++rNd55Vxm02TT7bSutY0cIbtGoTgqf3rP/dMr4vYCrTOycrd6MMX2Axszq4plXGvnjWHNLbdpqOyiy5UDnfDrV53q+MsMo79e1C7MXXDvvgM
+tc8F900057JYLYXrwqAtadu4uAksnrD5dMHNEin7u/N+CL0s8c66bjN19IJE+Me7d2278ztG3PPLkTf
+q4vl8X4Jt8+sPr/rdtY7LO0WAKhvzetT79ic26LmvXdPrm82yZCZ8zKxGwEOg8MYWvtVVDYLCo1gA2zQDUllwWyz73gEFl7QbebB6hktc/sY3QhkFSUEs21KrOPbAXbHQY6W7GgxjCKQSIu1cQuRe4O4mP7wVMH76A2KD8u
O/4uHsbZOioAbJlzVl/1XQieybXu6MJq5OLQyMbzKcOk7IRUnVEHyPu+HiOCFCqYXnQNi4nRHTmC4URa9z+UJVChmhRSh+EGpixCOzFsZGG56IhtSLXx9DR8dy5I+KhmwWv0x4u
+qN0Vx9dN1EXNjESj4RbVuL1iaPuL0yNjF2VWqZKLHUubcpjojia2UQvNgx7YHQU6+sE/Jk2cYwgmiXTAxlqoi0xFv10pJLklwscXYyeKQyjhDkmw6X6cueOVBlcSQkE7eYrsup64fYfNfSMLe5P3BDaBZrWzHLCUttvqdq
+cLJ7KxGziVOE54k5ObZaoknd7ozjJorBa/4qUZlCtOfbBLHnCgZt2SlEP+hBe2ZDOUJnPux8pntLCBEKSo2piEvWG5pWyYjys58UnSbf7Ohk3730B3aTKNJBGnJOpmggUlwEqq8l8LeaVPNGXOUC5FdK2sa0oMGtXZGU
+dTeInUal4Nkksl6qeieQ9k6tKiQj1gVRmHQ2IS7H0qnaGtvuo8FBLQGYd0WFTRetFerVWrmCtrEAkK1+6N8aXe5INM4/bWvE6tRxZRh0cDe5/W/VWwQ3vaRtl5VTkylqnPENg
+X7VNu042oSqA6SO1NdHNZk6ncwVbWzUrWnQ5cm8bBC1iU6taxCXzjnIdamPzOrLlkbViqI0tWiemN172Voa/BKtCq9rMVQF1s0X/G+4IswgJ2t0WbsdqDm5ROcXXitJHzQUkXPcoWXs5l2iSE914LUi8DDK2vGoT7ERZ
+t1hBs67ooXveqfqpAdyNY2ygq0eI3kKhRYumwYrL23dq83j8cy2SGSuXlXI0/6d17/79RsAByzIhFJ4wrY7JnchF9lK1sdiwQMgfSjcwgElcH
+/pNiBsTgOJ56pw2oc8VmlWFORzpjFe6DunbroqySlNSs3FXLajuwFpiZZpciYnI4/FrbaDNJa9iWvYVKsjVU6hjc7+JOWziMVXRblZ08ZMxSI1BR7vkI9Xk6LxNy8hJ1kpSJtPrNHgJIUiYDFzWhWS2/Y4pWW9FkhZe4z/3
deMpKzAKQsDrXEUeqsCjMTxdGH8zOid5qUSG8l0e7ASkiY8RM1X4S1sRK0UcRMla4AOtNpZvVYPc3oTnvla0o5I0UGfeiloDnXN1H1qUHNlEHn2dPDlgn2MF2CtsAZfZ
+0yToMnRFgx07XzoYaqhddlX5YGxzZ60WzA1HSMrta2Ofw9UYmvVNhJ3vTezaItC+t5zuvGtOfdve2y73OenvN3tzWXgocC8JRT8XXqpYIUOR8a2v/udeTfsgizog4Ylsl4lp99UekrWlRY6TgG1fzSYq61cLS2ZqllUHJp
+3wdKMbKgjHuOw6Hu2sKrzUwd5oXy2u77XaXNwG9yzJbf8Nb3uzPM1Bp2nA5cy2XUtSop+0NbUT3mqRm5ro95b60aetznqwrdbscDmsdb6TdW+95zvHtz3jHXK
+huJrY5fmw3nidKbLtijkxgrZJRT2a0+E3Jj4B9KvvfVqz73uDH9p34lJV7WfnbQz9zfAK674SO+N6vl+u7kdT3HHX/zrOi90rLz99lQn3JYuFGjovZlpseu985UnbeITf3WR8+bZYiU946te8bXHXqy3r7nRA957jYv
+7l0Bvd6LrtGlN90dQH9RaSFv7Lj7rgUkf/nrReJ0Wxq/0SEfxu47623gz5avWQe/bjsPbWyz/fHyvr7yU+4PlMPcqelX/a5DD+yY7MF8/UrH9tXDT3xPlQ+JI3VJZ3SmEnHgl0fWpH1pl3boo08GmH7EgC2dJVDtkH+
+sDxiEmTbt1r7VnqkN3jJ121GZXiOMoIgqFvkk3RyJSCZd3NKcH/p02wpZ3s040iYJ1HotICrUmDqQiAPaFDjs4OAZH3n9VMyWGXExWEeZlskU1Hmt0Ku5X9ZB0v0VTPRhUBmx2DPUQAAOw=="/>
</div>
</body>
</html>