Entire Site
Free Trial
Safari Books Online is a digital library providing on-demand subscription access to thousands of learning resources.
- Create BookmarkCreate Bookmark
- Create Note or TagCreate Note or Tag
- DownloadDownload
- PrintPrint
CHAPTER 3: CSS3 and iOS Styling > A Short Overview of CSS3
A Short Overview of CSS3
Next I provide a short reference to CSS3. Mobile Safari supports most of these attributes natively so there's no need for the -webkit- prefix.
Animation
In CSS3 you can create animations without the need for Flash or JavaScript. To use animations you must use the CSS @keyframes rule, then specify the properties on the element that is doing the animation.
The example below sets the animation to run after two seconds and repeat forever. For example,
@-webkit-keyframes mytest {
from {background: #ccc;} to {background: #000;}
}
div {
-webkit-animation-name: mytest;
-webkit-animation-duration: 3s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
}