3DSPlaza forums - CSS3: Key to animations

Back to forum: Profile Design (3DSPlaza BBCode and BBCode CSS)

Search forums via Google

1 Users appreciate this thread.

CSS3: Key to animations

Started by Blade
(2014-12-26 18:26:26)

Blade (2014-12-26 18:26:26)

At one point, I tried to use animations with gradients...it didn't work, so I have a guide to using animations on your profile. Let's get started.

WARNING! show

Term: Animatable
Animatable. This means if the CSS styling can be animated. This is important.

List of "Animatable" CSS3 codes show

Rule: @keyframes
@keyframes is the code for the frames of the animation.
Example:
1 | @keyframes myAnimation{
2 | 0%{background-color: #000000;}
3 | 100%{background-color: #FFFFFF;}
4 | }

Note show

How to set up: @keyframes.
1 | [style]@keyframes myAnimation{
2 | 0%{background-color: #000000;}
3 | 100%{background-color: #FFFFFF;}
4 | }[/style]

Note show

How to set up: Animation.
1 | [style].SomeDIV{
2 | -webkit-animation: mymove 5s infinite;
3 | animation: mymove 5s infinite;
4 | }[/style]

In all, that's the basics of CSS3 Animation, leave a comment if you have any questions, but, remember, I once used CSS quite often, but stopped, because of school, so I'm a bit rusty.

Anyways, good bye!

This post has been edited one or more times, the last time was:
2014-12-26 18:29:59

Blade "Heil Hydra." He shoots Larcio in the face.

DrakeJericho (2015-01-07 22:46:24)

Nice job

This topic's ID: 78003

Back to forum: Profile Design (3DSPlaza BBCode and BBCode CSS)