Safari was the first browser to support CSS transitions and animations. Using these technologies, you can animate programmatic changes to style properties that would otherwise be instantaneous. Most CSS properties can be animated — you can add rich animations for changes to basic properties such as height, width, opacity, and visibility, and advanced properties such as z-index and word-spacing.
View CSS animations in action
Using the latest CSS effects available in Safari, developers can style any element on a web page with eye-catching gradients, precise masks, and stunning reflections, providing an extra layer of polish to their websites by adding just a few lines of code.
CSS3 Text Effects
Safari also includes support for CSS3 text effects like auto-hyphenation, vertical text and text emphasis, making websites more customizable and easy to read.
View CSS web fonts in action
CSS Web Fonts
With CSS web fonts, you can use standards-based technology to display fonts outside of the set of standard web-safe fonts. Safari automatically recognizes web pages that use CSS web fonts to display a custom font, and downloads the appropriate font files as needed. By using CSS web fonts instead of images to display a custom font, you can create stunning text effects quickly and easily. Web pages that use web fonts instead of text images will download faster, and can be interpreted by screen readers without any additional coding effort.
With Safari support for CSS filters, you can use CSS to create advanced filter and pixel effects such as blurs and gradients. CSS filters also let you vary brightness, adjust hues, invert colors or convert elements to sepia or grayscale. You can animate changes to a filter or combine multiple filters, all while tapping into hardware acceleration for fast, smooth rendering.