Home » Posts » CSS3 Animation

CSS3 Animation

January 9, 2015April 8, 2015 by admin

CSS3 Animation

This animation generation outputs the HTML and CSS codes while you previewed the animation live.

Animate Me

Generated Animation CSS:

.css_animation { -webkit-animation: cssAnimation 1s 16 ease; -moz-animation: cssAnimation 1s 16 ease; -o-animation: cssAnimation 1s 16 ease; } @-webkit-keyframes cssAnimation { from { -webkit-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); } to { -webkit-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); } } @-moz-keyframes cssAnimation { from { -moz-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); } to { -moz-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); } } @-o-keyframes cssAnimation { from { -o-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); } to { -o-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); } }

Supported Browsers

At the time of writing the following browsers support CSS3 Animation:

Browser	Supports CSS3 Animation?
Firefox 5.0+	Full Support
Firefox 1-4	No
Safari 4+	Full Support
Safari 1-3	No
Chrome 4.0+	Full Support
IE10+	Full Support
Opera 11.1+	Full Support