| Welcome to zetaNetwork. 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 viewing zetaNetwork exclusive tutorials and articles, and access to our code snippets section. Registration is simple, fast, and completely free. Click Here To Register If you're already a member please log in to your account to access all of our features: |
| CSS Keyframe Animations | |||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Tweet Topic Started: Jul 16 2011, 09:54 PM (213,654 Views) | |||||||||||||||||
| Pando | Jul 16 2011, 09:54 PM Post #1 | ||||||||||||||||
![]()
|
CSS Keyframe Animations Difficulty: Advanced CSS. Time: As long as it takes you to learn this. Support:
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:
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.
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:
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:
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:
Animation Shorthand: Is a shorthand property for all the animation properties except animation-play-state. The syntax:
Only name and timing-function are required. Example:
Animation Fill Mode: The animation-fill-mode property is currently in the Editors Draft, but Webkit/Gecko supports it. The animation-fill-mode property defines how the element should be styled before and after execution (when animation-delay is active/after the animation ended). If animation-fill-mode is defined in animation shorthand then place it after animation-direction. The values are "none" (the keyframes only style the element during the animation), "backwards" (the styles from 0% or the from keyframe is applied to animation-delay), "forwards" (the styles from 100% or to keyframe is applied after the animation ends), and "both" (the 0%/from keyframe style animation-delay 100%/to keyframe style the element after the animation ends). The default is "none". @keyframes: The keyframes @-rule defines what the element does in the animation. The syntax:
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. 0% and 100% can be replaced with from and to, respectively. Note: CSS transitions are applied to CSS animations. Example: http://z3.ifrm.com/28068/113/0/p414683/CSS3_Keyframe_Animations.html Edited by Pando, Jul 16 2011, 09:55 PM.
|
||||||||||||||||
| Offline Profile | Quote ^ | ||||||||||||||||
| Quozzo | Jul 16 2011, 10:52 PM Post #2 | ||||||||||||||||
![]()
Do not fear death for death does not fear you.
![]()
|
This tutorial seems to be about HTML & CSS and has been moved to the HTML & CSS section. Quozzo | zetaNetwork Staff The examples in the hosted file don't work on Opera 11.50 Edited by Quozzo, Jul 16 2011, 11:09 PM.
|
||||||||||||||||
| |||||||||||||||||
| Offline Profile | Quote ^ | ||||||||||||||||
| Pro | Jul 17 2011, 08:54 AM Post #3 | ||||||||||||||||
|
Underground Coding
![]()
|
I was going to do a tut on this but it looks like you beat me
|
||||||||||||||||
|
Pro | zetaNetwork Instructor & Admin I Coded Most Of The Smexy Stuff You See ![]() PM Me Any Questions Need live support? Click here. | |||||||||||||||||
| Offline Profile | Quote ^ | ||||||||||||||||
| Pando | Jul 17 2011, 12:56 PM Post #4 | ||||||||||||||||
![]()
|
Opera doesn't support CSS animations. Use Firefox. |
||||||||||||||||
| Offline Profile | Quote ^ | ||||||||||||||||
| Quozzo | Jul 17 2011, 05:46 PM Post #5 | ||||||||||||||||
![]()
Do not fear death for death does not fear you.
![]()
|
i never knew that
|
||||||||||||||||
| |||||||||||||||||
| Offline Profile | Quote ^ | ||||||||||||||||
| Pando | Jul 17 2011, 07:22 PM Post #6 | ||||||||||||||||
![]()
|
Opera doesn't support radial gradients, element resizing, flexible box layout, and rem units too. Opera doesn't support the element image value and CSS3 text decoration as well, but webkit don't support those either. |
||||||||||||||||
| Offline Profile | Quote ^ | ||||||||||||||||
| 1 user reading this topic (1 Guest and 0 Anonymous) | |||||||||||||||||
| « Previous Topic · Tutorials · Next Topic » |














i never knew that
2:19 PM Jul 11