한번 적용된 CSS3 애니메이션(@keyframes)을 다시 적용하기

DOM 요소에 CSS3의 animation-name을 지정해 애니메이션을 지정해 플레이하고 난 뒤, 다시 이 DOM 요소에 animation-name을 지정하면 애니메이션이 플레이 되지 않는다. 이에 대한 CSS와 JS 코드는 다음과 같다.

id가 dom_id인 DOM 객체에 blank 클래스를 처음 지정할때는 애니메이션이 발생하지만, 두번째부터는 애니메이션이 발생하지 않는다. 이럴 때는 23번과 24번 코드 사이에 아래의 코드를 추가한다.

이건 Bug일까.. 아니면 의도된 것일까..

div 안의 img에 Inner Shadow 적용하기

아래와 같은 DOM 계층이 있다고 하자.

위의 div에 아래와 같은 스타일을 적용해 안쪽 그림자(Inner Shadow) 효과를 넣고자 한다면..

div 요소의 자식인 img에 부모인 그림자 효과가 표시되어야 할 것이라고 기대했지만, 부모인 div의 그림자가 자식인 img에 가려져 아래와 같은 결과만을 볼 수 있다.

그렇다면 자식인 img에 의해 가려진 부모의 그림자를 들어내기 위해서 어떻게 해야할까? 부모의 그림자 역시 DOM 계층적으로 보면 또 하나의 공개되지 않은 DOM 요소이다. 이 그림자 DOM 요소가 img에 가려지므로 이 img의 z-index의 값과 z-index 속성값이 영향을 받도록 하기 위해 position 속성을 relative나 absolute로 지정하면 되는데, 아래와 같다.

이제 그 결과를 보면, div 요소에 안쪽 그림자 효과가 반영되어, 좀더 입체적으로 이미지가 표현되는 것을 확인할 수 있다.