css animations

what css properties can be transitioned

transition

1. transition-property（属性）: all / other property
2. transition-duration（持续时间） : 1s
3. transition-timing-function （方法）: how the change in the property will occur
   1. ease : the change starts slow then go faster then finishes slow
   2. linear : the change occurs at the same rate
   3. ease-in : the change starts slow then go faster before the end
   4. ease-out : the changes starts fast then slows down before the end
   5. ease-in-out : the change starts slow then go faster then finishes slow
4. transition-delay（延迟时间）: 3000ms / 3s
5. 多个属性写在 transition 中，顺序为 property duration timing-function delay，可写多个，以逗号隔开

transform

1. translate(x: px, y: px) => translate(x, y) => translateX(x: px) + translateY(y: px)
   1. 水平、垂直方向偏移
   2. 单位是 px
   3. 数字可为负，向相反方向偏移
2. scale(n) => scale(n1, n2) => scaleX(n) + scaleY(n)
   1. 水平、垂直方向放大或缩小
   2. 无单位，数字表示是原来大小的 n 倍
   3. 数字可为负，向相反方向缩放
3. rotate(n:deg / turn / grad / rad)
   1. 顺时针旋转 n 度
   2. 单位是 css 角度单位: deg（360 度）、turn（1 圈）、grad（梯度，一个圆 400 梯度）、rad（弧度，一个圆 2pi 弧度）
   3. 可为负数，逆时针旋转
4. skew(n:deg / turn / grad / rad) => skew(n1, n2) => skewX(n) + skewY(n)
   1. 水平、垂直方向倾斜
   2. 单位是 css 角度单位: deg（360 度）、turn（1 圈）、grad（梯度，一个圆 400 梯度）、rad（弧度，一个圆 2pi 弧度）
   3. 可为负数，相反方向倾斜

transform-origin

1. 接受关键词：top / right / bottom / left / top right / bottom right / top left / bottom left
2. 接受百分比：(30% , 50%)，x 轴偏移 30%，y 轴偏移 50%，找到中心点
3. 接受像素值

perspective (3d 视图)

1. 需要设置一个视图容器大小

   body {
     perspective: 500px;
   }

2. translateZ -> 向前、向后偏移

3. rotateZ 沿 z 轴旋转，与 2d rotate 旋转相同

creative-rotating-button-effect

creative-swipe-button-effect

creative-swipe-text-button-effect

creative-button-hover-effect

creative-button-stretching-effect

creative-button-glowing-effect

creative-two-layers-swapping-button-effect

creative-text-scaling-button-effect

creative-circular-swapping-button-effect

creative-rotating-3-layers-button-effect

creative-layers-swapping-from-left-to-right-button-effect

creative-3-circles-to-background-button-effect

creative-hover-button-effect

creative-splitted-button-effect

creative-border-swapping-button-effect

creative-border-growing-button-effect

creative-first-letter-rotating-button-effect

creative-4-borders-growing-button-effect

creative-wavy-button-effect

creative-2-cuts-button-effect

creative-2-parts-skewed-button-effect

creative-pulsing-button-effect

diagonal-swipe-button-effect

creative-image-effect-1

creative-image-effect-2

creative-image-effect-3

creative-image-effect-4

creative-image-effect-5

creative-image-effect-6

creative-image-effect-7

creative-image-effect-8

creative-image-effect-9

creative-image-effect-10

creative-growing-borders-menu-effect

creative-background-and-borders-menu-effect

creative-splitted-background-menu-effect

creative-2-moving-bottom-borders-menu-effect

creative-menu-border-rotation-effect

borders-and-a-background-menu-effect

creative-colorful-layered-menu-effect

background-translation-card-effect

creative-double-face-card-effect

creative-layered-card-hover-effect

smoky-text-effect-using-css-transforms

fill-text-effect-on-hover

social-media-icons-hover-effect

creative-rotated-text-boder-effect

using-css-animation-floating-text

using-css-animation-rotating-loading-effect

using-css-animation-driving-a-car

using-css-animation-text-rotator

using-css-animation-button-shaking-hover

using-css-animation-button-animated

using-css-animation-lighting-text

using-css-animation-heartbeat

using-css-animation-text-background-animated

using-css-animation-bouncing-balls

using-css-animation-rain-effect

using-css-animation-icon-hover-effects

using-css-animation-loading-text

using-css-animation-awesome-pulse-effect

using-css-animation-simple-images-slider-show

using-css-animation-newtons-cradle

using-css-animation-nice-loading-effect

using-css-animation-nice-loading-effect-2

using-css-animation-nice-loading-effect-3

using-css-animation-nice-loading-effect-4

using-css-animation-nice-loading-effect-5

using-css-animation-nice-loading-effect-6

using-css-animation-nice-loading-effect-7

using-css-animation-nice-loading-effect-8

using-css-animation-background-animated

using-css-animation-hexagon-loader

creative-css-wavy-effect

creative-image-hover-effect