Catpow SCSS

background image

trn

トランジション、変形、透明などのプロパティを設定します。

Params

t
transition

Keyword
  • tf
    transform
  • o
    opacity
  • v
    visibility
  • l
    left
  • r
    right
  • t
    top
  • b
    bottom
  • pd
    padding
  • pdl
    padding-left
  • pdr
    padding-right
  • pdt
    padding-top
  • pdb
    padding-bottom
  • mg
    margin
  • mgl
    margin-left
  • mgr
    margin-right
  • mgt
    margin-top
  • mgb
    margin-bottom
  • w
    width
  • mnw
    min-width
  • mxw
    max-width
  • h
    height
  • mnh
    min-height
  • mxh
    max-height
  • bg
    background
  • c
    color

d
transition-delay

e
transition-timing-function

to
transform-origin

a
animation

Keyword
  • i
    infinite
  • r
    reverse
  • a
    alternate
  • e
    ease
  • l
    linear
  • fw
    forwards
  • bw
    backwards
  • b
    both

o
opacity

hue
filter [hue-rotate]

str
filter [saturate]

brt
filter [brightness]

inv
filter [invert]

shd
filter [drop-shadow]

blr
filter [blur]

cnt
filter [contrast]

gry
filter [grayscale]

clr
filter [color]

bm
mix-blend-mode

Keyword
  • n
    normal
  • m
    multiply
  • d
    darken
  • s
    screen
  • l
    lighten
  • o
    overlay
  • cd
    color-dodge
  • cb
    color-burn
  • hl
    hard-light
  • sl
    soft-light
  • hue
    hue
  • str
    saturation
  • clr
    color
  • lmn
    luminosity
  • df
    difference
  • ex
    exclusion
  • a
    isoration:auto
  • i
    isoration:isolate

y
transform [translateY]

z
transform [translateZ]

r
transform [rotateZ]

rx
transform [rotateX]

ry
transform [rotateY]

s
transform [scale]

sx
transform [scaleX]

sy
transform [scaleY]

k
transform [skew]

kx
transform [skewX]

ky
transform [skewY]

bf
backface-visibility

Keyword
  • h
    hidden
  • v
    visible

p
perspective

scss
@import 'catpow';

@include trn((t:.4s,o:.5));
css
-webkit-transition: 0.4s;
transition: 0.4s;
opacity: 0.5;
scss
@import 'catpow';

@include trn((a:my-animation .4s i b));
css
animation: my-animation 0.4s infinite both;