Emmet – raccourcis css – @-webkit-keyframes, @media screen, Animation, Transform, Transition
- CSS module uses fuzzy search to find unknown abbreviations, e.g.
ov:h == ov-h == ovh == oh.
- If abbreviation wasn’t found, it is transformed into property name:
foo-bar → foo-bar: | ;
- You can prefix abbreviations with hyphen to produce vendor-prefixed properties:
-foo
@-webkit-keyframes, @media screen { }
abréviation | résultat |
@kf | @-webkit-keyframes identifier { from { } to { } } |
@m, @media | @media screen { } |
Animation
abréviation | résultat | abréviation | résultat |
anim | animation:; | animps | animation-play-state:running; |
anim- | animation:name duration timing-function delay iteration-count direction fill-mode; | animps:p | animation-play-state:paused; |
animdel | animation-delay:time; | animps:r | animation-play-state:running; |
animdir | animation-direction:normal; | animtf | animation-timing-function:linear; |
animdur | animation-duration:0s; | animtf:cb | animation-timing-function:cubic-bezier(0.1, 0.7, 1.0, 0.1); |
animfm | animation-fill-mode:both; | animtf:e | animation-timing-function:ease; |
animdir:a | animation-direction:alternate; | animtf:ei | animation-timing-function:ease-in; |
animdir:ar | animation-direction:alternate-reverse; | animtf:eio | animation-timing-function:ease-in-out; |
animic | animation-iteration-count:1; | animtf:eo | animation-timing-function:ease-out; |
animn | animation-iteration-count:infinite; | animtf:l | animation-timing-function:linear; |
animic:i | animation-name:none; |
Transform, Transition
abréviation | résultat | abréviation | résultat |
trf | transform:; | trf:t3 | transform: translate3d(tx, ty, tz); |
trf:r | transform: rotate(angle); | trf:tx | transform: translateX(x); |
trf:rx | transform: rotateX(angle); | trf:ty | transform: translateY(y); |
trf:ry | transform: rotateY(angle); | trf:tz | transform: translateZ(z); |
trf:rz | transform: rotateZ(angle); | trfo | transform-origin:; |
trf:sc | transform: scale(x, y); | trfs | transform-style:preserve-3d; |
trf:sc3 | transform: scale3d(x, y, z); | trs | transition:prop time; |
trf:scx | transform: scaleX(x); | trsde | transition-delay:time; |
trf:scy | transform: scaleY(y); | trsdu | transition-duration:time; |
trf:scz | transform: scaleZ(z); | trsp | transition-property:prop; |
trf:skx | transform: skewX(angle); | trstf | transition-timing-function:tfunc; |
trf:sky | transform: skewY(angle); | us | user-select:${none}; |
trf:t | transform: translate(x, y); | wfsm | -webkit-font-smoothing:${antialiased}; |