We hope you enjoy your visit.

You're currently viewing our forum as a guest. This means you are limited to certain areas of the board and there are some features you can't use. If you join our community, you'll be able to access member-only sections, and use many member-only features such as customizing your profile, sending personal messages, and voting in polls. Registration is simple, fast, and completely free.


Join our community!


If you're already a member please log in to your account to access all of our features:

Username:   Password:
Add Reply
CSS3 Keyframe Animations
Topic Started: Jul 10 2011, 10:41 PM (2,620 Views)
Pando
Member Avatar
Member
[ *  *  *  *  *  * ]
Support:
  • Internet Explorer 10: @-ms-keyframes, -ms-animation, -ms- prefix for all other properties
  • Firefox: @-moz-keyframes, -moz-animation, -moz- prefix for all other properties
  • Google Chrome: @-webkit-keyframes, -webkit-animation, -webkit- prefix for all other properties
  • Safari 4: @-webkit-keyframes, -webkit-animation, -webkit- prefix for all other properties

CSS3 Keyframe Animations allow you to make an animation with HTML elements.

Animation Name: The animation-name property specifies the name for the @keyframes at-rule. You can values are the animation name ("animation-name: animationame;") or none (removes the animation).

Animation Duration: Sets the length of the animation. Example:
Code:
 
animation-duration: 5s;

Animation Timing Function: This tells what the animation will go like according to a Bezier Curve. This allows you to control the speed of the animation in mid-animation. The default is ease.
List of Animation Timings
NameTiming
ease0.25, 0.1, 0.25, 1.0
linear0.0, 0.0, 1.0, 1.0
ease-in0.42, 0, 1.0, 1.0
ease-out0, 0, 0.58, 1.0
ease-in-out0.42, 0, 0.58, 1.0
cubic-bezier(0, 0, 0, 0)The cubic-bezier allows you to control the timing. Just change the numbers from 0 to whatever you want.
Example:
Code:
 
animation-timing-function:ease-in-out;

Animation Iteration Count: The animation-iteration-count defines the amount of times the animation is supposed to be played. You can use a chosen number or the value "infinite". The default value is "1". Example:
Code:
 
animation-iteration-count: 50;

Animation Direction: The animation-direction property defines if the animation should be played normally or reverse. The values are "normal" (the animation starts every even time, goes backwards every odd time) and "alternate" (the animation starts every odd time, goes backwards every even time). Example:
Code:
 
animation-direction: alternate;

Animation Play State: The animation-play-state property defines if the animation is played or paused. The values are "running" and "paused". This property is being considered for removal by the CSS Working Group.

Animation Delay: The animation-delay property defines a delay for the animation start. Example:
Code:
 
animation-delay: 50ms;

Animation Shorthand: Is a shorthand property for all the animation properties except animation-play-state. The syntax:
Code:
 
animation: [i]name duration timing-function delay iteration-count direction;[/i]

Only name and timing-function are required. Example:
Code:
 
animation: myanimation 15s ease-in-out infinite;

@keyframes: The keyframes @-rule defines what the element does in the animation. The syntax:
Code:
 
@keyframes animation-name {
X% { css properties to apply to the element }
X% { css properties to apply to the element }
}

Change the animation-name to the animation name defined in the animation/animation-name property. Change the X% the percent of the animation for the properties take effect in (0%-100%). 0% and 100% must be defined.

Note: CSS transitions are applied to CSS animations.

Example: http://z3.ifrm.com/28068/113/0/p414683/CSS3_Keyframe_Animations.html
Edited by Pando, Jan 13 2012, 08:02 PM.
Offline Profile Quote Post Goto Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
« Previous Topic · Coding Guides · Next Topic »
Add Reply