CSS3 Transform and Animation Properties for Web Content

Resolve Bottlenecks,
Find Innovative SolutionsGenerate Solutions

Solution Overview

Problem

Current technologies for web-based content, such as CSS and SVG, face limitations in providing rich, dynamic, and interactive experiences due to the need for separate developmental platforms and lack of full support in document rendering models, leading to inefficiencies and poor performance, especially on mobile devices.

Innovation Solution

The implementation of new CSS properties for transforms and animations allows for rotation, translation, scaling, skewing, perspective, and other transformational properties, enabling three-dimensional effects and animations within web content using only CSS and HTML, without requiring separate platforms or extensive coding.

Engineering Contradictions & Design Principles

VSEngineering Contradiction Analysis

1Adaptability or versatility

If Flash technology is used to provide rich animations and transforms, then the dynamic and interactive experience is improved, but the device complexity and energy consumption increase significantly

Engineering Contradiction:

Improvedynamic and interactive experienceVSAvoiddevice complexity

Core Design Contradiction:

Adaptability or versatilityVSDevice complexity

Solution Approach 1:

The patent replaces the Flash plugin-based animation system with native CSS3 transform and animation capabilities. This substitution eliminates the need for external plugins and complex development workflows, allowing developers to create rich animations using standard web technologies that are natively supported by modern browsers, thereby reducing device complexity while maintaining versatility.

Inventive Principle:

Principle #28Mechanics substitution (Replace mechanical system)

Solution Approach 2:

The patent enables CSS to perform multiple functions including layout, styling, and animation within a single technology framework. By making CSS capable of handling transforms and animations that previously required separate technologies like Flash, the system achieves multi-functionality, allowing a single platform to deliver rich interactive experiences without increasing device complexity.

Inventive Principle:

Principle #6Universality (Multi-functionality)

2Adaptability or versatility

If Flash technology is used to provide rich animations and transforms, then the dynamic and interactive experience is improved, but the energy consumption increases significantly

Engineering Contradiction:

Improvedynamic and interactive experienceVSAvoidenergy consumption

Core Design Contradiction:

Adaptability or versatilityVSUse of energy by moving object

Solution Approach 1:

The patent substitutes the energy-intensive Flash plugin system with native CSS3 animation capabilities that are optimized by the browser's rendering engine. This replacement eliminates the overhead of running a separate plugin process, reducing energy consumption while maintaining the ability to deliver rich animations and transforms through efficient, hardware-accelerated CSS properties.

Inventive Principle:

Principle #28Mechanics substitution (Replace mechanical system)

3Adaptability or versatility

If SVG is used to provide three-dimensional effects and animations, then the cohesive platform experience is improved, but the compatibility with existing HTML/CSS content decreases

Engineering Contradiction:

Improvecohesive platform experienceVSAvoidease of manufacture

Core Design Contradiction:

Adaptability or versatilityVSEase of manufacture

Solution Approach 1:

The patent merges SVG's three-dimensional transform capabilities with HTML/CSS content by enabling CSS to directly control SVG element transformations. This integration allows developers to maintain existing HTML/CSS content while adding 3D effects through CSS properties, combining the strengths of both technologies without requiring complete content rewrites, thus improving ease of manufacture while maintaining cohesive platform experience.

Inventive Principle:

Principle #5Merging (Combining)

4Ease of manufacture

If CSS is enhanced with transform and animation properties, then the ease of manufacture is improved, but the document complexity increases

Engineering Contradiction:

Improveease of manufactureVSAvoiddocument complexity

Core Design Contradiction:

Ease of manufactureVSDevice complexity

Solution Approach 1:

The patent segments complex animations into discrete CSS transform properties (translate, rotate, scale, skew) that can be independently controlled and combined. This segmentation allows developers to build complex animations from simple, manageable building blocks using CSS transitions and keyframes, making it easier to manufacture animations while the browser's rendering engine handles the complexity of executing these segmented transformations efficiently.

Inventive Principle:

Principle #1Segmentation

Data Source

PatentUS8234564B2Transforms and animations of web-based content

Publication Date: 2012.07.31 APPLE INC

AI summary

Embodiments of the present invention provide a way to perform transforms and animations using Cascading Style Sheets (CSS). CSS may be used to define colors, fonts, layout, and other aspects of document presentation, such as for a webpage. Embodiments of the present invention provide CSS properties for transforms and animations of document content. New CSS properties for transforms allow for rotation, translation, scaling, skewing, perspective, origin, and the like. CSS properties are also provided for animating document content, such as movement, transitions, and the like.