CSS Movement (transition)

transition property

1-1. syntax

.element{
	transition: [property] [duration] [ease] [delay]
}

1-2. example

.element{
	transition: opacity 300ms ease-in-out 1s; 여기서 ,찍고 다른 transition을 적어도 된다.
}

1-3. animate할 수 있는 property

font-size, background-color, width, left

1-4. animate할 수 없는 property

display, font-family, position

1-5. 가장 많이 사용되는 property

position, scale, rotation, opacity

1-6. trigger

1-6-1. Hover 수도 클래스
    
1-6-2. 클래스 변경

1-7. transition이 존재할 때 해당 property를 더해주면서 움직임을 추가하는 것이다.

``` 
.box{transition: transform 300ms ease-in-out};
.box:hover{transform: translate(200px,150px) rotate(20deg)};
```

1-8. pointer-events 라는 property로 event가 자식으로 가지 않게 할 수 있음. 영상에서는 hover event가 container에만 적용되고 box에는 적용되지 않도록 하는데에 사용됨.

animation property + keyframes