![]() ![]() webkit-animation-delay-The time to wait between triggering the animation and beginning the animation (default is 0s). Set this property to paused to pause and or running (default) to continue the animation. webkit-animation-play-state-Pauses or resumes an animation. The webkit-animation-iteration-count value must be greater than one1 for this property to have any effect. If set to alternate, the animation goes forward and backward-from 0% to 100% and from 100% to 0%-on alternate iterations. Can be set to normal (default) or alternate. webkit-animation-direction-Causes repeating animation to either proceed in the same direction each time or to alternate directions. Can be set to an integer value or to infinite. webkit-animation-iteration-count-Sets the number of times to repeat the animation. ![]() You can also set the following animation properties: You must set the -webkit-animation-duration and -webkit-animation-name properties in order to see an animation. You typically set keyframe animation properties by defining a CSS class or pseudoclass, but you can also set the animation properties by using the HTML style attribute in an HTML tag or by setting the style property of an element using JavaScript. One exception is the -webkit-animation-timing-function property if not specified for a particular keyframe, the default timing function is used. Exact behavior when the set of properties varies from rule to rule is currently unspecified and subject to change. Note: You may specify any CSS properties in the style rules, but you should specify the same set of properties in all of the rules. The left property animates back and forth between 75px and 150px, while the background color cycles between red, white, and blue. Listing 6-2 shows a set of keyframes where the animation is named wobble-glow and the keyframes move an element back and forth while changing its background color over time. The style rules are grouped in blocks surrounded by braces, and each is preceded by a relative point in time (typically a percentage of the animation’s duration).Īny number of CSS properties can be specified by the style rules. The rule consists of the keyword, followed by the animation name then by a series of style rules for each keyframe. Keyframes are specified in CSS using the rule. See the PosterCircle sample code project for the complete source code for this example. For example, Figure 6-1 shows an animation of text elements in 3D space. You can also change an element’s style when the animation ends by installing a JavaScript listener function for the webkitAnimationEnd event.Ĭreate stunning effects by combining animation with 2D and 3D transforms. You can override this behavior, however, and make the final animation state persistent. When a keyframe animation completes, an animated element returns to its original CSS style. Keyframe animations can be paused and resumed.Īll of the elements in a class can be animated as part of a single animation. Keyframe animations can be set to repeat a finite number of times or to repeat indefinitely, proceeding in the same direction each time, or alternating forward and backward. You trigger keyframe animations explicitly. Keyframe animations include the following features:Ĭhoose any number of CSS properties to change and define points along a timeline that have specific states.Īnimation between two defined points is automatic but can be guided by specifying a timing function. To create complex animations-such as a bumblebee’s flight or a change that starts and stops or repeats indefinitely-or to trigger animations under arbitrary conditions using JavaScript, use keyframe animations. To simply animate changes in CSS properties whenever those properties change, you should probably use an animated transition (see Animating CSS Transitions). ![]() The duration of both the animations is 1 second.Safari supports two types of CSS animation: transition animations and keyframe animations. In the following demo, two animations named "compress" and "colorChange" are defined and applied to a span element. These animations take place simultaneously. To give more than one animation to an element, give the comma-separated names of those animations as values to the animation-name property. See the Pen CSS animation-name by Aakhya Singh ( on CodePen.Ĭlick on the RERUN button in the above demo to see the animation.Ĭlick on the RERUN button in the above demo to see the animation.
0 Comments
Leave a Reply. |