Emmet – raccourcis css – @-webkit-keyframes, @media screen, Animation, Transform, Transition

25 juillet 2017

Introduction

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

abréviation	résultat
`@kf`	@-webkit-keyframes identifier { from { } to { } } **
`@m, @media`	@media screen { }

@kf

@-webkit-keyframes identifier {
  from { }
  to { }
}

@m, @media

@media screen { }

Animation

abréviation	résultat	abréviation	résultat
`anim`	animation:; **	`anim-`	animation:name duration timing-function delay iteration-count direction fill-mode; **
`animdel`	animation-delay:time; **	`animdir`	animation-direction:normal; **
`animdur`	animation-duration:0s; **	`animfm`	animation-fill-mode:both; **
`animdir:a`	animation-direction:alternate; **	`animdir:ar`	animation-direction:alternate-reverse; **
`animic`	animation-iteration-count:1; **	`animn`	animation-iteration-count:infinite; **
`animic:i`	animation-name:none; **	`animps`	animation-play-state:running; **
`animps:p`	animation-play-state:paused; **	`animps:r`	animation-play-state:running; **
`animtf`	animation-timing-function:linear; **	`animtf:cb`	animation-timing-function:cubic-bezier(0.1, 0.7, 1.0, 0.1); **
`animtf:e`	animation-timing-function:ease; **	`animtf:ei`	animation-timing-function:ease-in; **
`animtf:eio`	animation-timing-function:ease-in-out; **	`animtf:eo`	animation-timing-function:ease-out; **
`animtf:l`	animation-timing-function:linear; **

Transform, Transition

abréviation	résultat	abréviation	résultat
`trf`	transform:; **	`trf:r`	transform: rotate(angle); **
`trf:rx`	transform: rotateX(angle); **	`trf:ry`	transform: rotateY(angle); **
`trf:rz`	transform: rotateZ(angle); **	`trf:sc`	transform: scale(x, y); **
`trf:sc3`	transform: scale3d(x, y, z); **	`trf:scx`	transform: scaleX(x); **
`trf:scy`	transform: scaleY(y); **	`trf:scz`	transform: scaleZ(z); **
`trf:skx`	transform: skewX(angle); **	`trf:sky`	transform: skewY(angle); **
`trf:t`	transform: translate(x, y); **	`trf:t3`	transform: translate3d(tx, ty, tz); **
`trf:tx`	transform: translateX(x); **	`trf:ty`	transform: translateY(y); **
`trf:tz`	transform: translateZ(z); **	`trfo`	transform-origin:; **
`trfs`	transform-style:preserve-3d; **	`trs`	transition:prop time; **
`trsde`	transition-delay:time; **	`trsdu`	transition-duration:time; **
`trsp`	transition-property:prop; **	`trstf`	transition-timing-function:tfunc; **
`us`	user-select:${none}; **	`wfsm`	-webkit-font-smoothing:${antialiased}; **