CSS Animations - Basic Hover Scaling

In this first of the detailed articles on the animation prototype I wanted to look at the basic setup of application and the simplest of the animations - the Pick Me! button.  The Pick Me! button animates to draw attention to itself as the mouse moves over it.  The actual animation itself is a simple scaling so it's a good place to start. 

Again, just a warning.  This prototype was only set up for the WebKit based browsers (Safari and Chrome). So where I talk about -webkit* styles below be aware that these will have different names on FireFox (usually -moz*) and IE. A stylesheet that handles more browsers will have to include these versions as well. 

The basis of all of this work is a custom skin so that's the first thing to create. In 11.1.2 this is really as simple as going to the New Gallery and creating a new skin in the project.  Here I've extended the fusionFx-simple-v2.desktop skin as I want to keep the standard look and feel.  If you've not created a skin for your applications before, there are plenty of articles out there to help you, so I won't dwell on that.

Now in the skin itself I want to create a sub-type of button which will do the animation.  I don't want to animate every button, that would probably make the users seasick.  So the first step is to create a sub-type of the button thus:

af|commandButton.zoomOnFocus
{
} 

This sub-type can then  applied to the selected buttons using the styleClass property:

<af:commandButton text="Pick Me!" styleClass="zoomOnFocus" ...>

Now to implement the  zoom behaviour, fortunately this does not involve writing any code apart from the actual CSS to provide the style. To do this we define a :hover selector for the zoomOnFocus in the skin:

af|commandButton.zoomOnFocus:hover
{
} 

Now we fill that in with the desired animation, I'll explain each of the lines next:

af|commandButton.zoomOnFocus:hover
{
  -webkit-transition-property: -webkit-transform;
  -webkit-transform: scale(2,2); 
  -webkit-transition-timing-function: ease-in-out;
  -webkit-transition-duration: 1s;  
}

The first line,  -webkit-transition-property defines which property, -webkit-transform, should be animated. The second line -webkit-transform itself defines the end result of the animation which is a scale function. This takes two arguments for the x and y scaling respectively, so scale(2,2) doubles the size of the button in both directions.

The third line  -webkit-transition-timing-function, defines the progression of the animation in time. There are various options for this, the ease-in-out function starts the animation slowly, then speeds up and then slows down again towards the end. This provides a pleasing effect to the eye.

Finally -webkit-transition-duration defines how long the animation should take.

If you do all of this, the zoom will work nicely as you move the mouse over the button, however, as you move the mouse out the style will snap back instantly, so we need to complete the recipe with an animation the other way on the base style:

af|commandButton.zoomOnFocus
{
  -webkit-transition-property: -webkit-transform;
  -webkit-transform: scale(1,1); 
  -webkit-transition-timing-function: ease-in-out;
   -webkit-transition-duration: 1s;  
}

This style is pretty much identical to the :hover version.  The only difference is the scale() factor which is changed to 1,1 to return the button to it's normal size.  With this all in place, the button will gracefully shrink back to its normal size. 

So that's the first, very simple animation, in the next article in the series I'll look at the only slightly more complex slide-out panel animation. 

Comments:

Post a Comment:
Comments are closed for this entry.
About

Hawaii, Yes! Duncan has been around Oracle technology way too long but occasionally has interesting things to say. He works in the Development Tools Division at Oracle, but you guessed that right? In his spare time he contributes to the Hudson CI Server Project at Eclipse
Follow DuncanMills on Twitter

Note that comments on this blog are moderated so (1) There may be a delay before it gets published (2) I reserve the right to ignore silly questions and comment spam is not tolerated - it gets deleted so don't even bother, we all have better things to do with our lives.
However, don't be put off, I want to hear what you have to say!

Search

Archives
« July 2015
MonTueWedThuFriSatSun
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
  
       
Today