Web Platform Team Blog

Adobe

decor

Making the web awesome

Archive for the Transforms Category

CSS animations and transitions performance: looking inside the browser

You’ve probably used CSS Animations or CSS Transitions in a project. (If not, check out CSS-Trick’s almanac entries on animations and transitions.) Some of your animations might have performed smoothly. Other might have appeared choppy. Do you wonder why? In this article, we’ll explore how browsers handle CSS Animations and CSS Transitions, so you can develop... Continue reading →

Creating an Installed Application Experience on Mobile With Web Technologies

Adobe’s Web Platform team recently showcased a prototype demonstrating the future of digital layout on the web using content provided to us by National Geographic. Although the experience is fully responsive (meaning it adapts to screens of all sizes), we decided to push things a little further by creating an entirely new — and much... Continue reading →

Building a Screensaver in HTML

To get some experience working with and optimizing CSS 3D transformations, we decided to build an HTML screensaver demo (GitHub repo). Here’s how it works: Open the demo in any modern browser with proper 3D CSS transformation support (Chrome, Safari, or Firefox). Choose your favorite image sharing services (Flickr, 500px, Instagram, or Dribbble). Watch the... Continue reading →

Web Platform Roundup

As you can probably tell from the constant posts, we over at the Web Platform team like to talk about our work. After all, we think the contributions we’re making to the web are pretty cool. But we only know we’re making a difference when the community at large starts talking. The following is a... Continue reading →

SVG animations, CSS Animations, CSS Transitions

Recently there was a discussion in the SVG working group how SVG Animations (based on SMIL Animations), CSS3 Animations and CSS3 Transitions contribute to the animation sandwich model for SVG presentation attributes. SVG presentation attributes First, what are SVG presentation attributes? In SVG, a subset of all CSS properties can be set by SVG attributes.... Continue reading →

CSS transform-origin coming to SVG

Much effort is being invested in improving the integration of CSS and SVG.  Recently Dirk Schulze and Hans Muller added SVG support for the CSS transform-origin property to WebKit. Hans has written an article about transform-origin in general and about the new SVG support here. If your web pages and applications incorporate non-trivial graphics or... Continue reading →

CSS & SVG

With the addition of CSS transitions and transforms, web developers can create interactive content with relatively simple markup. Understanding how to use these features with SVG, which has its own transform and animation systems, can be a little difficult. For example, let’s take a look at a simple interactive element, which animates its color and... Continue reading →