CSS3 Animation – Bounced Button

 

animation-name

Used to bind the animation to an HTML element

@keyframes Rule

Use `from to` or `percentage`

animation-duration

The duration of the animation, default value is 0

animation-delay

Specify a delay for the start of an animation

animation-iteration-count

Specify the number of times an animation should run
infinite or a number

animation-direction

alternate or reverse

animation-timing-function

Specify the speed curve of the animation
ease: slow -> fast -> slow
linear: same speed from start to end
ease-in: slow -> normal
ease-out: normal -> slow
ease-in-out: slow -> normal -> end
cubic-bezier: define your own values in a cubic-bezier function

scale

scale(sx)
scale(sx, sy)
sx : A representing the abscissa of the scaling vector.
sy : A representing the ordinate of the scaling vector. If not present, its default value is sx, leading to a uniform scaling preserving the shape of the element.

translate

translate(tx)
translate(tx, ty)
tx : Is a representing the abscissa of the translating vector.
ty : Is a representing the ordinate of the translating vector. If unspecified, it will equal 0. For example, translate(2) is equivalent to translate(2, 0).

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 )

Connecting to %s

Blog at WordPress.com.

Up ↑

%d bloggers like this: