New in CSS 3: animation, transformation, variables.

Something seems to me that this time the developers have overdone the ideas of introducing new rules ...
Dave Hyatt, Dean Jackson and Chris Marrin (all three of them work for Apple) suggested introducing into CSS 3 support for creating animation, transforming objects, changing them over time and introducing css variables.

On the reason for the implementation of the possibility of creating animation, they write:

To date, the creation of animation is supported only in the SVG language, but there is not a single system that would support the creation of animation using CSS. Therefore, our goal is to solve this problem by introducing special CSS properties that will have the values ​​responsible for creating and managing animation.

These values ​​will be described in the keyframe selector:

@keyframes 'wobble' {
0 {
left: 100px;
}

40% {
left: 150px;
}

60% {
left: 75px;
}

100% {
left: 100px;
}
}

where “wobble” is the name of the animation, and the corresponding values ​​of 0, 40%, 60% and 100% determine the point in time from the total time interval.

The picture above shows an example of an animation element in 10 seconds.
Another embodiment is the task for each fragment of a certain function that controls the drawing:

@keyframes 'bounce' {
from {
top: 100px;
animation-timing-function: ease-out;
}

25% {
top: 50px;
animation-timing-function: ease-in;
}

50% {
top: 100px;
animation-timing-function: ease-out;
}

75% {
top: 75px;
animation-timing-function: ease-in;
}

to {
top: 100px;
}
}

In this example, we create an animation called “bounce” that has 4 frames, each of which takes 25% of the total animation time. At the same time, each fragment is assigned a “ease-in” or “easy-out” function. The first is responsible for changing the rendering of an element inside a region, and the second is outside of it. All of these properties of animation creation management are based on the idea of ​​introducing an element control over time .

Learn more about the new property for creating animation here.

The second idea, it seems to me, is more justified - it is the control of the position of the element on the plane . Here are a couple of examples of implementation:

  div {transform: translate (100px, 100px);  } 

Such a code will result in the following element transformation:

Or, a more descriptive description of the possibilities:

div {
height: 100px; width: 100px;
transform: translate(80px, 80px) scale(1.5, 1.5) rotate(45deg);
}

I would like to use such a property.

Details on the properties of the transformation can be found here.

And the latest fantasy of developers certainly seems a little crazy - the introduction of css-variables . Does CSS really turn into a full-fledged programming language and control html elements?

Examples of using:

@variables {
CorporateLogoBGColor: #fe8d12;
}

div.logoContainer {
background-color: var(CorporateLogoBGColor);
}

@variables {
myMargin1: 2em;
}

@variables print {
myMargin1: 2em;
}

.data, div.entry {
margin-left: 30px;
margin-left: var(myMargin1);
}

The meaning of this code is as follows: the variables selector determines the name and value of a variable, which can be further assigned to any element. The idea is still not worked out. Why define a color for a color if you can just specify it?

Read more about css-variables

From myself I just want to add that, in my opinion, the creation of new CSS 3 properties should be based primarily on the requests of webmasters, and not only on the ideas of super-specialists from large companies. Can create a campaign: "Webmaster, give ideas for CSS 3"?

Cross-post: Blog for webmasters