With CSS3, we could make simple animation without any use of Javascript. The following is an example which created a mouse hover effect on a div.
<!DOCTYPE html>
<html>
<head>
<title>CSS3 - Simple transistion effect</title>
<style type="text/css">
#eureka {
background-color: red;
width: 200px;
height: 200px;
-webkit-transition: background-color 0.5s ease-in-out, width 0.5s ease-in-out;
-moz-transition: background-color 0.5s ease-in-out, width 0.5s ease-in-out;
-o-transition: background-color 0.5s ease-in-out, width 0.5s ease-in-out;
-ms-transition: background-color 0.5s ease-in-out, width 0.5s ease-in-out;
transition: background-color 0.5s ease-in-out, width 0.5s ease-in-out;
}
#eureka:hover {
background-color: blue;
width: 400px;
}
</style>
</head>
<body>
<div id="eureka"></div>
</body>
</html>
You can also use the label all to replace each CSS properties if you want to make all of them as transition effect.
-webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;
For the easing input, there is a few options and you can refer to w3 specification. Here are some examples.
- ease
- linear
- ease-in
- ease-out
- ease-in-out
Done =)
Eureka! 