CSS3 – Animating the DOM – Part 2

Have a look at this JSFiddle to see what we will be creating in this section JS Fiddle with all 4 effects. So last post (see here) we spoke about basic transitions using ease-in-out. In this post we will look at other transitions, transitional properties and maybe some transformations too.

Last time we used ease-in-out to create some basic transformations using the opacity levels of an image to fade it out. Lets start by looking at other kinds of basic transitions available to use.

Basic Transitions

ease-in-out is considered a timing function this states how the animation will play out. Here are some other stock functions you can play with.

  • ease – steady pace of animation
  • ease-in  – slowly build up
  • ease-out – start fast and slow towards the end
  • ease-in-out – slowly build up and slowly come to end
  • linear – same momentum throughout time

You can use these timing functions to modify the execution of your animation based on the time you have specified. Playing around with these alone allows you to create animations and interactivity that most websites today cant offer. You can however build more advanced timing functions using this tool Ceaser Transition Creator however use advanced animations with caution.

TIP – Avoid Motion Sickness in your app.

A tip I have found useful when creating web apps. Once you are comfortable with animation in CSS/HTML the overwhelming urge is to animate everything in your application. You start to look at the static DOM elements as boring because they have no life or activity. Depending on the context of your application start by picking one element that you think “That would be really cool if that moved like this when I done this … that would be impressive”. Take that element and animate it, spend time getting the animation fluid and in keeping with the app i.e no photoshop style sliding text with car engines sounding as it speeds across the screen. If you do this you will find clients and users of your application will notice that one singular animation, and it stands out rather than drowned in a sea of flying divs.

I hope this section has covered the basic concept around transitions and how they work. I could have went into more detail around timings and delays but feel they are pretty self explanatory if there are any gaps let me know im happy to add some detail in. To see a list of all properties that can be animated look here

Transforms

So now you should be comfortable with transitions lets add some transformations to the mix. There are commonly 2 type of transforms 2D and 3D lets start with 2D.

4 Examples of 2D transforms

Skew

Code:

#div1 {
margin:100px;
height:100px;
width:100px;
transition:all 1s ease-in;
perspective: 400px;
perspective-origin: 50% 100px;
background:red;
color:white;
}
#div1:hover {
-webkit-transform:skew(180deg);
}

Result

Skew a square with CSS
Skew a square with CSS

Rotate

Code: change the hover code to match below

#div1:hover {
-webkit-transform:rotate(180deg);
}

css3-rotate

Scale

Code: change the hover code to match below

#div1:hover {
-webkit-transform:scale(180deg);
}

The following link will show all 3 effects in action with code side by side

http://jsfiddle.net/cmac458/FraRU/2/

Hopefully this give you an insight into how to add transforms to you html elements and you can now link these to the transitions as explained in part 1 to create some interesting layouts and effects.

Advertisements

DART – MergeSort

Since I have started using DART many people have asked why I like it so much. As a Java developer at my roots I appreciate being able to code in an environment I am comfortable in, I believe this also makes us more efficient as programmers. As proof to some colleagues I decided to take one of the main sorting algorithms in a CS Grads tool belt the classic Merge Sort and code it in Dart as an experiment to show how similar it is.

class Sorting {

var unsorted ;
List placeholder;

var length;

List sort(List values) {
this.unsorted = values;
length = values.length.toInt();
placeholder = new List(length);
mergeSort(0, length-1);
return unsorted;

}

void mergeSort(low,high){

if(low < high) {
var middle = ((low+high)/2).toInt();
mergeSort(low,middle);
mergeSort((middle+1), high);

merge(low,middle,high);
}
}

void merge(int low, int middle, int high){

for (int i = low; i <= high; i++){
placeholder[i] = unsorted[i];
}
int i = low;
int j = middle+1;
int k = low;

while (i <= middle && j <= high){
if (placeholder[i] <= placeholder[j]){
unsorted[k] = placeholder[i];
i ++;
}else{
unsorted[k] = placeholder[j];
j++;
}
k++;
}

while (i <= middle){
unsorted[k] = placeholder[i];
k++;
i++;
}
}

}

As you can see the above code looks very similar to the Java equivalent. The next step was to create a test package to test the logic of the merge sort. Dart has the very handy unittest.dart package that helps us create JUnit style tests that can be run via the editor or via the command line.

import '../packages/unittest/unittest.dart';
import '/C:/Users/O325882/dart/Sorting/web/Sorting.dart';

void main(){
Sorting sorter = new Sorting();
test('Merge_Worst', () => expect(sorter.sort([5,4,3,2,1]),orderedEquals([1,2,3,4,5])));
test('Merge_Best', () => expect(sorter.sort([1,2,3,4,5]),orderedEquals([1,2,3,4,5])));

}

As everyone can see there are many similarities between DART and more OO focused languages specifically Java. Making it very easier for Java devs to move into doing funky things with the browser and embrace HTML5 technologies.