CSS3의transform &transition &animation

transform: translate(x, y);    X   Y      。
transform: translate(100px, 100px);

transform: rotate(angle);     。
transform: rotate(45deg);

transform: scale(x, y);             。
transform: scale(2, 3);

transform: skew(x, y);    X   Y    。
transform: skew(45deg, -45deg);

transform-origin: x y;        （  center center）。
transform-origin: right bottom;

transform: translateX(45px) rotate(45deg);     

-webkit-transform:    translateX(160px); Chrome、Safari
-moz-transform: rotate(60deg); FF
-o-transform: skew(30deg, 60deg); Opera
-ms-transform-origin: center center; IE  

transition: all 6s ease-in-out 2s;

transition-property: width;         CSS      。
transition-duration: 2s;            。    0。
transition-timing-function: ease-in-out;            。    ease   。
transition-delay: .5s;           。    0。

.box{
    width: 100px;
    height: 100px;
    background: red;
    transition-property: background-color, width;
    transition-duration: 6s;
    transition-timing-function: ease-in-out;
    transition-delay: 2s;
    
    /* transition:all 6s ease-in-out 2s; */
}
.box:hover{
    background: #f0f;
    width: 500px;            
}

animation-name: forward;      
animation-duration: 5s;         
animation-timing-function: ease-in-out | step(5);       
animation-delay        
animation-iteration-count: infinite;        
animation-direction: alternate;         
animation-play-state: paused;         
    
@keyframes forward {
    10%, 90%{
        /* css   */
    }

    50%{
        /* css   */
    }

    100%{
        /* css   */
    }
}

transform-style: "preserve-3d";
perspective: 24px;                
perspective-oragin: center center;        

transform: translate3d();
transform: translateX();
transform: translateY();
transform: translateZ();

transform: rotate3d();
transform: rotateX();
transform: rotateY();
transform: rotateZ();

transform: scale3d();
transform: scaleX();
transform: scaleY();
transform: scaleZ();