css animation (1) 썸네일형 리스트형 외곽선 그리는 애니메이션 안녕하세요. 오늘은 CSS3 transition 으로 외곽선을 그리는 다양한 애니메이션 효과를 구현해 볼 예정입니다. CSS3 transition 속성은 CSS 속성을 변경할 때 애니메이션 속도를 조절할 수 있습니다. 먼저 outline이라는 클래스를 갖는 div를 하나 만듭니다. 그안에 빈 span 태그 4개를 넣어줍니다. 각각의 span 태그 하나 하나가 상 하 좌 우 외곽선이 됩니다. div 에 width 랑 height를 부여하고 margin auto를 줘서 가운데 정렬해웁니다. .outline{position: relative; width: 150px; height: 150px; margin: 50px auto; border: 1px solid #ccc;} 그 안에 span 태그들은 positi.. 이전 1 다음