Different CSS Transitions on Mouse In and Mouse Out
Prior to CSS3 the most effective way to implement mouse hover animations was using JavaScript. Now that cross browser CSS3 transitions support has grown beyond being restricted to WebKit I have started experimenting more with transitions and quickly came across the problem of wanting to use a different transition effects on mouse in and mouse out events.
Initially looking at the syntax for this it doesn’t appear to be possible, however this can be done using the following simple trick as originally documented on Design Shack and CSS Tricks.
div {
background: black;
color: #fff;
margin: 0 auto;
padding: 100px 0;
-webkit-transition: -webkit-border-radius 0.5s ease-in;
-moz-transition: -moz-border-radius 0.5s ease-in;
-o-transition: border-radius 0.5s ease-in;
-ms-transition: border-radius 0.5s ease-in;
transition: border-radius 0.5s ease-in;
text-align: center;
width: 200px;
}
div:hover {
background: gray;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
-webkit-transform: rotate(720deg);
-moz-transform: rotate(720deg);
-o-transform: rotate(720deg);
-ms-transform: rotate(720deg);
transform: rotate(720deg);
}The key to achieving the desired behaviour on mouse in and mouse out is to specify the mouse over transition in the hover state and the mouse out transition in the regular state.
View demo
Creating An Animated Bar Graph
The true value of software lies in the ability of end users to input and extract data. Data input is commonly handled by forms and to a degree creative freedom is often limited
to simply keeping the interface out of the way of the user; for me the really fun part is in the output of the data, where far greater creative freedom exists.
I am always looking for ways to increase the value of the software I produce and was excited to discover an article on creating an animated bar graph with HTML, CSS And jQuery from Smashing Magazine. Following this tutorial I was able to produce an exciting animated jQuery graph which falls back to a very accessible and good looking data table when JavaScript is disabled.
Expanding upon the tutorial I converted it to use a HTML5 structure and adapted the scale and animation behaviour to better fit the data I was attempting to visualise. You can view the demo or download the source created whilst following this tutorial below.
View the demoDownload the Source
Free WordPress Theme: Static Left Column
You may have noticed that a recent tweak to the design of this site shifted the layout from a static left column layout to the one you see before you now. In doing so I decided that rather than retire the previous design I would develop it further make it available as a free WordPress theme.
This theme uses HTML5 semantic elements, CSS3 and responsive design using media queries for greater device support. The key design feature is the static left column and it has been tested in WordPress 3.0. It is released under the Creative Commons Attribution license. You are free to distribute, remix, tweak, and build upon this theme, even commercially, as long as credit is given for the original creation.
I hope you enjoy using this theme.
Download ThemePreview Theme
