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.
@keyframes 'wobble' {
0 {
left: 100px;
}
40% {
left: 150px;
}
60% {
left: 75px;
}
100% {
left: 100px;
}
}
@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;
}
}
Learn more about the new property for creating animation here.
div {transform: translate (100px, 100px); }
div {
height: 100px; width: 100px;
transform: translate(80px, 80px) scale(1.5, 1.5) rotate(45deg);
}
Details on the properties of the transformation can be found here.
@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);
}
Read more about css-variables
Source: https://habr.com/ru/post/23356/