css애니메이션 썸네일형 리스트형 [SASS]애니메이션 mixin 설치하기 yarn add node-sass mixin 제작 //animation @mixin ani($num) { -webkit-transition: $num ease-in-out; -moz-transition: $num ease-in-out; -o-transition: $num ease-in-out; transition: $num ease-in-out; } 사용하기 .example{ width: 100px; height: 100px; opacity:1; @include ani(0.3s); &:focus, &:hover{ width: 100px; height: 100px; opacity:0.8; @include ani(0.3s); } } 2019/07/11 - [프로그램 강좌] - [SASS]#1 설치방.. 더보기 [css]keyframe 애니메이션 활기차게 움직여보고 싶어? 코딩하다보면 정적인 것보다 움직이는게 더 보기 좋더라구요. 역시 기술이 있다면 쳐발라야합니다. 오늘 알려드릴 방법은 애니메이션 사용법인데요. 예제 보시고 잘 따라해보세요. 아주 쉽게 만들었습니다. html 사실 여기서 중요한 내용은 없고 div.box 하나 만들어준거네요. css 이제 css도 적용해보겠습니다. .box{ width:100px; height:100px; background: red; position: relative; -webkit-animation: boxmove 3s infinite; /* Safari 4.0 - 8.0 */ animation: boxmove 3s infinite; } /* 애니메이션 제작 */ @-webkit-keyframes boxmove.. 더보기 이전 1 다음