12+13 //Space (Object) and Time (Animation)

In class, we looked at some projects by artists working with found images, objects, and virtual materials:

conradBakker

Conrad Bakker, Untitled Project: The Crystal Land

 

stefaniesyujoco_particulatematter

Stefanie Syujuco, Particulate Matter: Things, Thingys, Thingies

 

syujuco_raiders

Stefanie Syujuco, RAIDERS: International Booty, Bountiful Harvest (Selections from the Collection of the A____ A__ M_____)

 

Animated Divs

With CSS3, you can very easily incorporation animation into your webpages by animating divs. As a reminder, divs are used as a way to structure your webpage. They are used group together html elements into different sections, which can be easily styled using CSS.

Divs can also be divided into classes and ids. Check out this tutorial to learn more about different CSS selectors.

For animated divs, there’s a few things to keep in mind.

First, you’ll want to target the div you’d like animate. This can be done by giving it an id or class. Remember, an id is a unique identity, whereas a class can be applied to any number of divs.

For example:

<div class = “red”> </div>

Second, you’ll select div, and include in the declaration the animation property and its values. (You’ll also want to repeat the line, using the webkit property for display in other browsers.) For example:

.red {
width: 20px;
height: 20px;
background: red;
-webkit-animation: myAnmation 5s; /* Chrome, Safari, Opera */
animation: myfirst 5s;
}

 

Finally, you’ll want to define the animation. You can do so using “from” and “to”, or you can make more complicated stages to the animation by using keyframes. In this stage, be sure to name your animation sequence as the same name you refer to in your css declarion (in this case, we’re calling it myAnimation). For example:

/* Chrome, Safari, Opera */
@-webkit-keyframes myAnimation {
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}

/* Standard syntax */
@keyframes myAnimation {
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}

Check out the w3schools CSS3 animation page for more information and examples.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s