분류 전체보기 (157) 썸네일형 리스트형 animation (3) animation 예제 (3) DOCTYPE html> Step03_example2.html .rubber { animation: rubberBand 1s linear; } button { width: 100px; height: 100px; } click me! /* 위의 버튼을 누를때 마다 rubberBand 라는 키프레임이 버튼에 적용되도록 프로그래밍 해 보세요. */ document.querySelector("#myBtn").addEventListener("click", (e)=>{ e.target.classList.add("rubber"); }); document.querySelector("#myBtn").addEventListener("animationend", (e)=>{ e.target.cl.. animation (2) animation 예제 (2) DOCTYPE html> Step03_example.html @keyframes dropAni { 0%{ transform: translateY(-500px); } 50%{ transform: translateY(100px); } 100%{ transform: translateY(0px); } } .drop{ animation: dropAni 1s ease-out; } Animation 예제 @keyframes 으로 animation 효과를 줄 수 있다. 웹브라우저 실행) animation (1) animation 예제 (1) DOCTYPE html> Step03_Animation.html .round{ border: 1px solid red; border-radius: 50%; } /* 페이지 로딩 시점에 한번만 수행된다 */ #kim { animation: rotateAni 3s linear; } /* 마우스가 hover 될때 마다 수행된다 */ #kim2:hover { /* animation: rotateAni 3s linear; */ animation-name: rotateAni; animation-duration: 3s; animation-timing-function: linear; } /* rotate 클래스가 추가되는 시점에 수행된다. 추가 될때마다 여러번 수행하고 싶으면 애니메이션이.. Transition (7) Transition 예제 (7) DOCTYPE html> Step02_Transform3.html .box{ width: 100px; height: 100px; border: 1px solid red; cursor: pointer; background-color: yellow; transition: transform 0.4s ease-out; /* 나중에 천천히 */ } .tran { transform: translateX(50px) translateY(50px) rotate(45deg) scale(1.5); } transform 테스트 리셋 document.querySelectorAll(".box").forEach((item)=>{ item.addEventListener("click",(e)=>{ e... Transition (6) Transition 예제 (6) DOCTYPE html> Step02_Transform2.html .box{ width: 100px; height: 100px; border: 1px solid red; cursor: pointer; background-color: yellow; transition: transform 0.4s ease-out; /* 나중에 천천히 */ } .tran { transform: translateX(50px) translateY(50px) rotate(45deg) scale(1.5); } transform 테스트 document.querySelector(".box").addEventListener("click", ()=>{ document.querySelector(".box")... Transition (5) Transition 예제 (5) DOCTYPE html> Step02_Transform.html .box{ width: 100px; height: 100px; border: 1px solid red; cursor: pointer; background-color: yellow; transition: transform 0.4s ease-out; /* 나중에 천천히 */ } .box:hover { /* 평행이동, 확대, 축소, 회전, 비틀기 등을 수행할수 있는 transform 속성 */ transform: translateX(50px) translateY(50px) rotate(45deg) scale(1.5); } transform 테스트 평행이동, 확대, 축소, 회전, 비틀기 등을 수행할 수 있는 tran.. Transition (4) Transition 예제 (4) DOCTYPE html> Step02_example2.html .container{ width: 80%; margin: 0 auto; } .wrapper{ width: 300px; height: 300px; border: 1px solid red; overflow: hidden; } #one { width: 300px; height: 300px; background-color: aqua; transform: translateX(-300px); transition: transform 0.4s ease-out; } transform 예제 토글 one let count=0; let isShow=false; document.querySelector("#toggleBtn").add.. Transition (3) Transition 예제 (3) DOCTYPE html> Step02_example.html .container{ width: 80%; margin: 0 auto; } .wrapper{ width: 300px; height: 300px; border: 1px solid red; overflow: hidden; } #one { width: 300px; height: 300px; background-color: aqua; transform: translateX(-300px); transition: transform 0.4s ease-out; } transform 예제 보이기 숨기기 one document.querySelector("#showBtn").addEventListener("click",()=>{ d.. 이전 1 2 3 4 ··· 20 다음
