Animation Portfolio by Christina Restauri

 

Main Content

css3 Animations By Christina Restauri

Using keyframes for animation you can define styles for the elements you want to animate. By defining duration times and direction methods you can make an object move, rotate, flip, or change direction by simply adding values you specify.

Going further you can change the background color, size, and shape of a button giving it any look you want. Using the webkit-transition property and hover selector you can change the effect the button displays.

FOLLOWING IS A LIST OF WHAT CSS3 ANIMATIONS CAN DO

Vector Animation Example

Vector animation is graphic art or motion controlled by vectors rather than pixels. Vector animations allow the vector graphic image to stretch in different manners as it moves between a timeline view.

Animated Greeting Card

Link directly above to an example and tutorial of how to make an animated Christmas greeting card with Adobe Animate CC.

CSS3

CSS3 allows more flexibility with page layout and presentation. It allows visual effects to be applied without the need for creating special images. CSS3 includes gradients, transitions or animations, rounded corners, multi-columns, and flexible box or grid layouts.

JavaScript

Using JavaScript HTML animations can be created. Javascript animations are preformed by programming gradual changes in an element's style called by a timer. JavaScript can manipulate and change all the elements of an HTML document.

Adobe Animate CC Animations

HTML Animations