Beruflich Dokumente
Kultur Dokumente
2008-10-15
PROVIDED AS IS, AND YOU, THE READER, ARE
ASSUMING THE ENTIRE RISK AS TO ITS QUALITY
Apple Inc. AND ACCURACY.
2008 Apple Inc. IN NO EVENT WILL APPLE BE LIABLE FOR DIRECT,
All rights reserved. INDIRECT, SPECIAL, INCIDENTAL, OR
CONSEQUENTIAL DAMAGES RESULTING FROM ANY
DEFECT OR INACCURACY IN THIS DOCUMENT, even
No part of this publication may be reproduced, if advised of the possibility of such damages.
stored in a retrieval system, or transmitted, in THE WARRANTY AND REMEDIES SET FORTH ABOVE
any form or by any means, mechanical, ARE EXCLUSIVE AND IN LIEU OF ALL OTHERS, ORAL
OR WRITTEN, EXPRESS OR IMPLIED. No Apple
electronic, photocopying, recording, or dealer, agent, or employee is authorized to make
otherwise, without prior written permission of any modification, extension, or addition to this
warranty.
Apple Inc., with the following exceptions: Any
person is hereby authorized to store Some states do not allow the exclusion or limitation
of implied warranties or liability for incidental or
documentation on a single computer for consequential damages, so the above limitation or
personal use only and to print copies of exclusion may not apply to you. This warranty gives
you specific legal rights, and you may also have
documentation for personal use provided that other rights which vary from state to state.
the documentation contains Apples copyright
notice.
The Apple logo is a trademark of Apple Inc.
Use of the keyboard Apple logo
(Option-Shift-K) for commercial purposes
without the prior written consent of Apple may
constitute trademark infringement and unfair
competition in violation of federal and state
laws.
No licenses, express or implied, are granted
with respect to any of the technology described
in this document. Apple retains all intellectual
property rights associated with the technology
described in this document. This document is
intended to assist application developers to
develop applications only for Apple-labeled
computers.
Every effort has been made to ensure that the
information in this document is accurate. Apple
is not responsible for typographical errors.
Apple Inc.
1 Infinite Loop
Cupertino, CA 95014
408-996-1010
Introduction Introduction 7
Transitions 13
Animations 21
Animation Keyframes 21
Invoking an Animation 23
CSS Animation Properties 25
-webkit-animation-name 25
-webkit-animation-duration 25
-webkit-animation-timing-function 26
-webkit-animation-iteration-count 27
-webkit-animation-direction 27
-webkit-animation-play-state 28
-webkit-animation-delay 28
-webkit-animation 29
Animation Events 29
3
2008-10-15 | 2008 Apple Inc. All Rights Reserved.
C O N T E N T S
4
2008-10-15 | 2008 Apple Inc. All Rights Reserved.
Figures, Tables, and Listings
Transitions 13
Animations 21
5
2008-10-15 | 2008 Apple Inc. All Rights Reserved.
F I G U R E S , T A B L E S , A N D L I S T I N G S
6
2008-10-15 | 2008 Apple Inc. All Rights Reserved.
I N T R O D U C T I O N
Introduction
This document is an introduction to the CSS animation features in Safari for iPhone.
You should read this document if you want your web content to take advantage of the new CSS animation
features provided in Safari for iPhone. Definitely read this document if you are creating a custom web
application for iPhone.
Safari CSS Animation Guide for iPhone consists of the following chapters:
Animation on the Web (page 9) provides an overview of what the current animation options on the
WWW and the new features that CSS animation offer.
Transitions (page 13) discusses transition animations that happen automatically when an animatable
CSS property is altered.
Animations (page 21) discusses defined animations that are explicitly created and invoked.
See Also
If you want to learn more about the CSS animation and transform properties, then you should read:
Safari CSS Transform Guide for iPhone OS describes how to use the CSS transform properties.
If you want to read the WebKit W3C visual effects proposals then go to: http://www.webkit.org/specs.
8 See Also
2008-10-15 | 2008 Apple Inc. All Rights Reserved.
Animation and Safari
Safari for iPhone introduces new CSS a animation properties that provide powerful animation possibilities
without having to use Flash or Dynamic HTML. Using these new animation properties elements can be
animated as they move, resize, change color and opacity, and other visual changes. When combined with
the new Safari for iPhone CSS transforms you can also animate rotation, scaling, and translation in two- and
three-dimensional space.
These new CSS properties support two types of animation: implicit animation (which we call transitions) and
declared animation. Transitions are triggered when you set a new value for an animatable CSS property. The
transition causes the property to animate to the new value over a specified duration. Declared animation,
on the other hand, allows you to specify a value, or series of values, which a property will have over a time
period, and to apply that animation directly to an element.
The following chapters discuss the CSS animation properties and their possible values, along with example
code fragments illustrating their usage.
The animations in Figure 1 and Figure 2 show some of the possibilities of using Safaris CSS animation and
transform properties together.
9
2008-10-15 | 2008 Apple Inc. All Rights Reserved.
Animation and Safari
10
2008-10-15 | 2008 Apple Inc. All Rights Reserved.
Animation and Safari
11
2008-10-15 | 2008 Apple Inc. All Rights Reserved.
Animation and Safari
12
2008-10-15 | 2008 Apple Inc. All Rights Reserved.
Transitions
This chapter describes new CSS properties that are used to animate smoothly from the element old state to
the new state, over time.
Normally when the value of a CSS property changes, the affected elements are rendered immediately using
the new property value. Changing the value of an elements left style property from a current value of
100px to 300px causes the element to immediately move to the new value. While this is fine for static pages,
it provides for a limited user-interface experience when designing rich web applications. A JavaScript function
could be used to iterate over an array of intermediate values, constantly updating the left property with
new values, but this is computationally expensive and requires significantly more code.
Safari for iPhone defines new CSS transition properties that are used to define new transitional behavior. If
you change a CSS property for which a transition has been configured, it will smoothly move to the new
value without requiring any further interaction from your code.
The transition for a property is defined using a number of new CSS properties. Listing 1 shows the definition
of a simple transition on the opacity property of a div element:
The above example defines a transition on the opacity property that, when a new value is assigned to that
property, it will cause a smooth change between the old value and the new value over a period of two
seconds. The example in Listing 2 shows an HTML implementation that will cause a blue box to fade away
when you tap it.
<html>
<head>
<style type="text/css" media="screen">
div {
-webkit-transition-property: opacity;
-webkit-transition-duration: 2s;
}
div.fadeAway {
opacity:0;
}
</style>
</head>
<body>
<div style="width:100px;
height:100px;
background-color:blue;"
onclick="this.className = 'fadeAway'">
Tap to fade
</div>
</body>
</html>
Each of the CSS transition properties can also accept a comma-separated list, allowing multiple transitions
to be defined, each acting on a different property. Each transition property takes its parameters from the
corresponding index in the other transition properties. For example, in Listing 3 transitions are defined for
both the opacity and the left CSS properties with two and four second durations respectively.
Any CSS property which accepts values that are numbers, lengths, percentages or colors can be animated.
Also, some CSS properties that accept discrete values, such as the visibility property can be animated,
although they will display a jump between values rather than a smooth transition.
Any CSS property which accepts values that are numbers, lengths, percentages or colors can be animated.
Also, some CSS properties that accept discrete values, such as 'visibility' can be animated, although they will
display a jump between values rather than a smooth transition.
The following is a list of CSS properties Safari for iPhone can currently animate:
left
right
top
bottom
width
height
border-left-width
border-right-width
border-top-width
border-bottom-width
margin-left
margin-right
margin-top
margin-bottom
padding-left
padding-right
padding-top
padding-bottom
color
background-color
-webkit-column-rule-color
-webkit-column-rule-width
-webkit-column-gap
-webkit-column-count
-webkit-column-width
text-stroke-color
text-fill-color
-webkit-border-horizontal-spacing
-webkit-border-vertical-spacing
border-left-color
border-right-color
border-top-color
border-bottom-color
z-index
line-height
outline-color
outline-offset
outline-width
letter-spacing
word-spacing
-webkit-box-shadow
text-shadow
-webkit-border-left-radius
-webkit-border-right-radius
-webkit-border-top-radius
-webkit-border-bottom-radius
visibility
-webkit-transform-origin-x
-webkit-transform-origin-y
-webkit-transform-origin-z
-webkit-transform (The animation of this property has been optimized in the current implementation.
However, the value returned via the computed style during the animation is not accurate.)
opacity (The animation of this property has been optimized in the current implementation. However,
the value returned via the computed style during the animation is not accurate.)
Safari for iPhone defines new CSS properties for specifying the CSS property to transition, the duration of
the transition, the timing of the transition (how intermediate values are distributed over the duration), and
delaying the start time of the transition. In addition, a shorthand property is defined that allows all these
transition properties to be combined into one.
-webkit-transition-property
The -webkit-transition-property property specifies the name of the CSS property to which the transition
is applied. Multiple properties can be supplied, separated by commas. Property names should be bare,
unquoted names.
Name: -webkit-transition-property
Initial: all
Inherited: no
Percentages: N/A
Media: visual
-webkit-transition-duration
The -webkit-transition-duration property defines how long the transition from the old value to the
new value should take.
By default the value is 0, meaning that the transition is immediate (there will be no animation). A negative
value for -webkit-transition-duration is treated as 0. Non-zero times must specify a unit: s for seconds,
ms for milliseconds.
Name: -webkit-transition-duration
Initial: 0
Inherited: no
Percentages: N/A
Media: visual
-webkit-transition-timing-function
The -webkit-transition-timing-function property describes how the intermediate values used during
a transition will be calculated. It allows for a transition to change speed over its duration. These effects are
commonly called easing functions. These are mathematical functions that produce a smooth curve.
The timing function is specified using a cubic Bezier curve, which is defined by four control points, P0 through
P3 (see Figure 1). P0 and P3 are always set to (0,0) and (1,1). The
-webkit-transition-timing-function property is used to specify the values for points P1 and P2.
These can be set to preset values using the keywords listed below, or can be set to specific values using the
cubic-bezier function. In the cubic-bezier function, P1 and P2 are each specified by both an X and Y
value.
1.0 P3
P2
0.5
Output percentage
P1
P0
The timing function takes as its input the current elapsed percentage of the transition duration and outputs
a percentage that determines how close the transition is to its goal state.
Value Definition
auto (This will change to ease The auto function is equivalent to cubic-bezier(0.25, 0.1,
post-beta.) 0.25, 1.0).
Value Definition
Name: -webkit-transition-timing-function
Initial: auto (Note: Post-beta the keyword auto will change to ease.)
Inherited: no
Percentages: N/A
Media: visual
-webkit-transition-delay
The -webkit-transition-delay property defines when the transition will start. It allows a transition to
begin execution some period of time from when it is applied. A -webkit-transition-delay value of 0
means the transition will execute as soon as the property is changed. Otherwise, the value specifies an offset
from the moment the property is changed, and the transition will delay execution by that offset.
Name: -webkit-transition-delay
Initial: 0
Inherited: no
Percentages: N/A
Media: visual
Name: -webkit-transition
Inherited: no
Percentages: N/A
Media: visual
Animations are similar to transitions in that they change the presentational value of CSS properties over time.
The principal difference is that while transitions trigger implicitly when property values change, animations
are explicitly executed when the animation properties are applied. Because of this, animations require explicit
values for the properties being animated.
This chapter discusses animation keyframes, the mechanism through which values are specified for explicit
animations.
Animation Keyframes
Keyframes are specified using a specialized at-rule. A @-webkit-keyframes rule consists of the keyword
"@-webkit-keyframes", followed by the name of the target animation (using -webkit-animation-name),
followed by a set of style rules (delimited by curly braces). For example, in Listing 1, the keyframes rule
describes an animation with the name wobble.
The keyframe selector for a keyframe style rule consists of a percentage value or the keywords from or to.
The selector is used to specify the percentage along the duration of the animation or transition that the
keyframe represents. The keyframe itself is specified by the block of property values declared on the selector.
The keyword from is equivalent to the value 0%. The keyword to is equivalent to the value 100%. For example,
in Listing 1, the keyframes rule contains keyframes describing the state of the animation at the start, at 40%
and 60% into the animation, and at the end.
The keyframe declaration for a keyframe rule consists of properties and values which describe the state of
those properties at that point in the animation. Properties that are not animating are ignored in these rules,
with the exception of -webkit-animation-timing-function.
The @-webkit-keyframes rule that is used by an animation will be the last one encountered in sorted rules
order that matches the name of the animation. @-webkit-keyframes rules do not cascade; therefore an
animation will never derive keyframes from more than one @-webkit-keyframes rule.
To determine the set of keyframes, all of the values in selectors are sorted in increasing order by time. If there
are any duplicates, then the last keyframe specified inside the @-webkit-keyframes rule will be used to
provide the keyframe information for that time. There is no cascading within a @-webkit-keyframes rule
if multiple keyframes specify the same keyframe selector values.
Listing 1 shows an @-web-keyframes declared animation called wobble, which moves the left position
of the target element back and forth over time.
0% {
left: 100px;
Animation Keyframes 21
2008-10-15 | 2008 Apple Inc. All Rights Reserved.
Animations
40% {
left: 150px;
}
60% {
left: 75px;
}
100% {
left: 100px;
}
Four keyframes are specified for the transition or animation named "wobble". In the first keyframe, the value
of the left property of the animation is 100px. By 40% of the animation duration, the value of the left
property has animated to 150px. At 60% of the animation duration, the value of the left property has
animated back to 75px. At the end of the animation cycle, the value of the left property has returned to
100px.
A keyframe style rule may also declare the timing function that is to be used as the animation moves to the
next keyframe. Listing 2 shows a declared animation that specifies several timing functions.
from {
top: 100px;
-webkit-animation-timing-function: ease-out;
}
25% {
top: 50px;
-webkit-animation-timing-function: ease-in;
}
50% {
top: 100px;
-webkit-animation-timing-function: ease-out;
}
75% {
top: 75px;
-webkit-animation-timing-function: ease-in;
}
to {
top: 100px;
}
22 Animation Keyframes
2008-10-15 | 2008 Apple Inc. All Rights Reserved.
Animations
Five keyframes are specified for the transition or animation named "bounce". Between the first and second
keyframe (the first quarter of the duration) an ease-out timing function is used. Between the second and
third keyframe (second quarter of the duration) an ease-in timing function is used. And so on. The effect
will appear as an element that moves up the page 50px, slowing down as it reaches its highest point then
speeding up as it falls back to 100px. The second half of the animation behaves in a similar manner, but only
moves the element 25px units up the page.
See -webkit-animation-timing-function (page 26) for more information about the available timing functions.
The declared animation in Listing 3 will produce an animation that moves an element from (0, 0) to (100px,
100px) over five seconds and repeats itself nine times (for a total of ten iterations).
@-webkit-keyframes 'diagonal-slide' {
from {
left: 0;
top: 0;
}
to {
left: 100px;
top: 100px;
}
Invoking an Animation
Once you have declared an animation, you must invoke it to make it actually animate. This is accomplished
by creating a style that set -webkit-animation-name to the name of the declared animation.
Listing 4 (page 23) shows a complete code fragement using the diagonal slide animation shown in Listing
3 (page 23).
div {
width:100px; height:100px; background-color:blue;
position:absolute;
}
.diagonalslide {
-webkit-animation-name: 'diagonal-slide';
-webkit-animation-duration: 5s;
Invoking an Animation 23
2008-10-15 | 2008 Apple Inc. All Rights Reserved.
Animations
-webkit-animation-iteration-count: 10;
}
@-webkit-keyframes 'diagonal-slide' {
from {
left: 0;
top: 0;
}
to {
left: 100px;
top: 100px;
}
}
</style>
<div onClick="this.className='diagonalslide'">
Tap to slide
</div>
CodeLine
When the user taps in the blue box that says Tap to slide the onClick attribute changes the style class of
the div to diagonalslide and the animation begins.
The effects of an animation will cease once the animation completes, or if the animation is removed. Removing
an animation can be accomplished by setting the -webkit-animation-name property to a value that does
not include the name of that animation.
When an animation finishes running, because it has executed the number of times described in its iteration
count, then the properties that were being animated return to their original, non-animated values.
To restart an animation, set the -webkit-animation-name property to a value that includes the name of
that animation. Because style changes are coalesced, you may have to do this after a short delay. Listing 5
shows how to restart the bounce animation declared in Listing 2.
24 Invoking an Animation
2008-10-15 | 2008 Apple Inc. All Rights Reserved.
Animations
</script>
<body>
<div class="bounce" onclick="restartBounce(this)">
</div>
</body>
Safari for iPhone defines new CSS properties for specifying animations. Many aspects of an animation can
be controlled, including its duration, how many times the animation iterates, whether or not it alternates
between the begin and end values, and whether or not the animation should be running or paused. An
animation can also delay its start time.
Each animation has a name that associates it with a keyframes declaration (see previous section). The name
and other animation parameters are defined via CSS, with each parameter having a corresponding CSS
property. In addition, a shorthand property is defined that allows all these animation properties to be
combined into one style rule.
-webkit-animation-name
The -webkit-animation-name property defines a name for the animation. The name is used to select the
keyframe at-rule that provides the property values for the animation. If the name does not match any keyframe
at-rule, there are no properties to be animated and the animation will not execute.
Name: -webkit-animation-name
Initial: ""
Inherited: No
Percentages N/A
Media: visual
-webkit-animation-duration
The -webkit-animation-duration property defines the length of time that an animation takes to complete
one cycle.
By default the value is 0, meaning that the animation cycle is immediate (there will be no animation). A
negative value for -webkit-animation-duration is treated as 0.
Name: -webkit-animation-duration
Initial: 0
Inherited: No
Percentages N/A
Media: visual
-webkit-animation-timing-function
The -webkit-animation-timing-function property describes how the animation will progress over
one cycle of its duration. See -webkit-transition-timing-function (page 17) for a complete description.
Name: -webkit-animation-timing-function
Initial: ease-in
Inherited: No
Percentages N/A
Media: visual
-webkit-animation-iteration-count
The -webkit-animation-iteration-count property defines the number of times an animation cycle is
played. The default value is 1, meaning the animation will play from beginning to end once. A value of
infinite will cause the animation to repeat forever. Non-integer numbers will cause the animation to end
part-way through a cycle. Negative values for -webkit-animation-iteration-count are treated as zero.
This property is often used with an -webkit-animation-direction value of alternate, which will cause
the animation to play in reverse on alternate cycles.
Name: -webkit-animation-iteration-count
Initial: 1
Inherited: No
Percentages N/A
Media: visual
-webkit-animation-direction
The -webkit-animation-direction property defines whether or not the animation should play in reverse
on alternate cycles. If alternate is specified, the animation cycle iterations that are odd counts are played in
the normal direction, and the animation cycle iterations that are even counts are played in a reverse direction.
When an animation is played in reverse the timing functions are also reversed. For example, when played in
reverse an ease-in animation would appear to be an ease-out animation.
Name: -webkit-animation-direction
Initial: normal
Inherited: No
Percentages N/A
Media: visual
-webkit-animation-play-state
The -webkit-animation-play-state property defines whether the animation is running or paused. A
running animation can be paused by setting this property to paused. To continue running a paused animation
this property can be set to running. A paused animation will continue to display the current value of the
animation in a static state, as if the time of the animation is unchanging. When a paused animation is resumed,
it restarts from the current value, not from the beginning of the animation.
Name: -webkit-animation-play-state
Initial: running
Inherited: No
Percentages N/A
Media: visual
-webkit-animation-delay
The -webkit-animation-delay property defines when the animation will start. It allows an animation to
begin execution some time after it is applied. An -webkit-animation-delay value of 0 means the animation
will execute as soon as it is applied. Otherwise, the value specifies an offset from the moment the animation
is applied, and the animation will delay execution by that offset.
Name: -webkit-animation-delay
Initial: 0
Inherited: No
Percentages N/A
Media: visual
-webkit-animation
The -webkit-animation shorthand property combines the five animation properties into a single property.
Name: -webkit-animation
Inherited: No
Percentages N/A
Media: visual
Animation Events
Several animation-related events are available through the DOM Event system The start and end of an
animation, and the end of each iteration of an animation all generate DOM events. The animation names
are animationstart, animationloop and animationend.
The example in Listing 6 adds an event listener for animationend events at page load time on the div
element with the id box. When the animationend event is received, the function checks to see if the
animation was the bounce animation, and, if so, hides the box by setting the elements display style to
hidden.
from {
top: 100px;
-webkit-animation-timing-function: ease-out;
}
Animation Events 29
2008-10-15 | 2008 Apple Inc. All Rights Reserved.
Animations
25% {
top: 50px;
-webkit-animation-timing-function: ease-in;
}
50% {
top: 100px;
-webkit-animation-timing-function: ease-out;
}
75% {
top: 75px;
-webkit-animation-timing-function: ease-in;
}
to {
top: 100px;
}
</style>
<body>
<div id="box" class="bounce">
</div>
</body>
An element can have multiple properties being animated simultaneously. This can occur either with a single
animation-name value with keyframes containing multiple properties, or with multiple animation-name
values. For the purposes of events, each animation-name specifies a single animation. Therefore an event
will be generated for each animation-name value and not necessarily for each property being animated.
The time the animation has been running is sent with each event generated. This allows the event handler
to determine the current iteration of a looping animation or the current position of an alternating animation.
This time does not include any time the animation was in the paused play state.
30 Animation Events
2008-10-15 | 2008 Apple Inc. All Rights Reserved.
R E V I S I O N H I S T O R Y
This table describes the changes to Safari CSS Animation Guide for iPhone OS.
Date Notes
2008-07-11 New document that describes how to use the CSS animation properties.
31
2008-10-15 | 2008 Apple Inc. All Rights Reserved.
R E V I S I O N H I S T O R Y
Document Revision History
32
2008-10-15 | 2008 Apple Inc. All Rights Reserved.