CSS3에서translate,transform,translation,애니메이션animation

밤을 들다.
요소 전체 가운데
.box{
     position
:absolute;top:50%;left:50%;
    width:50px;
    height:50px;
    transform:translate(-50%,-50%);
    background:gray;
}
1.translate:이동,transform의 한 방법
translate () 방법으로 원소를 현재 위치에서 이동하고 주어진left (x 좌표) 와 top (y 좌표) 위치 파라미터에 따라 이동합니다.
용법transform:translate(50px, 100px);
-ms-transform: translate(50px,100px);
-webkit-transform: translate(50px,100px);
-o-transform: translate(50px,100px);
-moz-transform: translate(50px,100px);
2.transform: 변형, 변경
CSS3에는 주로 다음이 포함됩니다.
CSS3에서transform은 주로 다음과 같은 몇 가지를 포함한다. 회전rotate, 비뚤어짐skew, 축소scale와 이동translate, 행렬 변형matrix이다.
회전:rotate() 주어진 각도를 시계 방향으로 회전하고 음수로tate(30deg) 허용
휨:skew() 요소는 지정된 각도를 반전하고 지정된 수평선(X축)과 수직선(Y축) 매개변수에 따라:skew(30deg, 20deg)
확대/축소:scale() 확대 또는 축소, 지정된 너비(X축) 및 높이(Y축) 매개변수에 따라:scale(2,4)
이동:translate () 평행 이동, x, y 값으로 전송되며, x 축과 y 축을 따라 평행 이동하는 거리를 나타낸다
모든 2D 변환 방법 조합: matrix() 회전, 확대, 이동 및 기울기 요소
matrix(scale.x ,, scale.y , translate.x, translate.y)
시작점 위치transform-origin:bottom left 바꾸기;
transform:rotate 회전 | scale 축소 | skew 비틀림 | translate 이동 |matrix 매트릭스 변형;
종합적으로 사용:transform: 30deg 1.5 30deg 20deg 100px 200px;//공백이 있어야 돼.
3. transition: CSS 속성 값을 일정 시간 동안 부드럽게 변환할 수 있습니다.(변환 애니메이션)

Transition           （ width、left、transform ）          。                                                  

          Transiton，                 Transition         ，        。

transition에는 다음과 같은 네 가지 속성 값이 포함됩니다.
(1) 변환된 속성 실행:transition-property;
(2) 연장 시간을 바꾸다:transition-duration;
(3) 지속 시간대에 변환의 속도 변화:transition-timing-function//예: 완만하게 진입하고 먼저 빠르고 나중에 느리다.
(4) 변환 지연 시간:transition-delay.
이벤트 트리거가 필요합니다. 예를 들어 클릭, 초점 얻기, 초점 잃기 등입니다.
문법:transition:property duration timing-function delay;
예: transition:width 2s ease 0s;

4.Animation

Animation           （ width、left、transform ）                ，

 Transition    ：

1.Animation    keyframe           ， Transition       

（          ），      Animation       ；

2.Animation              ，               ； Transition      

     ，                ；   ，               。

Animation     animation-name、animation-duration、animation-timing-function、

animation-delay、animation-iteration-count、animation-play-state   。

animation 사용법은 다음 블로그: css 애니메이션 참조