YoonStudyNote

animation-iteration-count 애니메이션의 반복 횟수를 설정 값 의미 기본값 숫자 반복 횟수를 설정 1 infinite 무한 반복 숫자를 작성하지않음 animation-direction 애니메이션의 반복 방향을 설정 값 의미 기본값 normal 정방향만 반복 normal reverse 역방향만 반복 alternate 정방향에서 역방향으로 반복(왕복) alternate-reverse 역방향에서 정방향으로 반복(왕복) **주의사항*** .box{ width: 100px; height: 100px; background: tomato; border-radius: 10px; margin:30px; animation: movemove 2s; animation-timing-function: linea..

animation-timing-function 타이밍 함수(애니메이션 효과를 계산하는 방법) 지정 animation-delay 애니메이션의 대기 시간 설정 값 의미 기본값 시간 대기 시간을 설정 0s 음수가 허용이 된다. 음수가 있을 경우 애니메이션은 바로 시작되지만, 그 값만큼 애니메이션이 앞서 시작한다(애니메이션 주기 도중에 시작). ho .box{ width: 150px; height: 100px; border-radius: 10px; margin: 10px; color: white; font-size: 24px; display: flex; justify-content: center; align-items: center; } .box1{ background: tomato; } .box2{ backg..

animation-name @keyframes규칙(애니메이션 프레임)의 이름을 지정 값 의미 기본값 none 애니메이션을 지정하지 않음 none @keyframes 이름 이름이 일치하는 @keyframes 규칙의 애니메이션을 적용 animation-duration 애니메이션의 지속시간 설정 ms단위도 사용 가능하다. 값 의미 기본값 시간 지속 시간을 설정 0s -->지속시간이 없는 경우이다. .box { width: 100px; height: 100px; background: tomato; border-radius: 10px; } .box:hover{ animation-name: my-animation; animation-duration: 3s; } @keyframes my-animation{ 0%{ w..

@keyframes 2개 이상의 애니메이션 중간 상태(프레임)을 지정 @keyframes 애니메이션이름 { 0%{속성: 값;} 50%{속성: 값;} 100%{속성: 값;} } @keyframes move-box { 0%{left: 100px;} 100%{top: 200px;} } .box { width: 100px; height: 100px; background: tomato; border-radius: 10px; } .box:hover{ animation: my-animation 3s infinite alternate; } @keyframes my-animation{ 0%{ width: 100px; background: tomato; } 75%{ width: 500px; background: dodge..

요소에 애니메이션을 설정/ 제어 값 의미 기본값 animation-name @keyframes 규칙의 이름을 지정 none animation-duration 애니메이션의 지속 시간 설정 0s animation-timing-function 타이밍 함수 지정 ease animation-delay 애니메이션의 대기 시간 설정 0s aniamtion-iteratrion-count 애니메이션의 반복 횟수 설정 1 anination-direction 애니메이션의 반복 방향 설정 normal animation-fill-mode 애니메이션의 전후 상태(위치) 설정 none animation-play-state 애니메이션의 재생과 정지 설정 running animation: 애니메이션이름 지속시간 [타이밍함수 대기시간 ..

matrix(a, b, c, d, e, f) 요소의 2차원 변환(Transforms)효과를 지정 scale(), skew(), translate() 그리고 rotate()를 지정 요소에 일반 변환(Transforms) 함수(2D, 3D)를 사용하더라도 브라우저에 의해 matrix 함수로 계산되어 적용된다. (2D 변환 함수는 matrix로, 3D 변환 함수는 matrix3d로) 따라서 일반적인 경우는 matrix함수가 아닌 일반 함수를 사용하면 된다.) 무슨말인지 모르겠어서 스킵했음

3D 변환으로 회전된 요소의 뒷면 숨김을 설정 값 의미 기본값 visible 뒷면 숨기지 않음 visible hidden 뒷면 숨김 img{ width: 300px; border: 1px solid lightgray; transition: 1s; transform: perspective(400px) rotateY(180deg); } 이렇게 뒤집힌 상태에서 hidden을 추가하면 이미지는 사라지게 된다. 하지만 뒤집히지 않는 상태에서는 그대로 있다. *hidden을 사용 주의사항 img{ width: 300px; border: 1px solid lightgray; transition: 1s; transform: perspective(400px) rotateY(180deg); backface-visibili..

1. perspective 하위 요소를 관찰하는 원근 거리를 설정 값 의미 기본값 단위 px, em, cm 등 단위로 지정 .perspective{ width: 200px; perspective: 500px; padding: 70px; } .grand-parent{ width: 200px; border: 3px solid tomato; transition: 1s; transform: rotateX(-45deg); transform-style: preserve-3d; } .parent{ width: 200px; border: 3px solid blue; transition: 1s; transform: rotateY(45deg); transform-style: preserve-3d; } img{ width:..

3D 변환 요소의 자식요소도 3D 변환을 사용할지 결정 값 의미 기본값 flat 자식 요소의 3D 변환을 사용하지 않음 flat preserve-3d 자식 요소의 3D 변환을 사용함 .perspective{ width: 200px; perspective: 500px; padding: 70px; } .grand-parent{ width: 200px; border: 3px solid tomato; transition: 1s; transform: rotateX(-45deg); } .parent{ width: 200px; border: 3px solid blue; transition: 1s; transform: rotateY(45deg); } img{ width: 200px; } grand-parent클래스에서..

transform 변환 속성 속성 의미 transform-origin 요소 변환의 기준점을 설정 transform-style 3D 변환 요소의 자식 요소도 3D 변환을 사용할지 설정 perspective 하위 요소를 관찰하는 원근 거리를 설정 perspective-origin 원근 거리의 기준점을 설정 backface-visibility 3D 변환으로 회전된 요소의 뒷면 숨김을 설정 transform-origin 요소의 변환의 기준점을 설정 값 의미 기본값 x축 left, right, center, %, 단위 50% y축 top, bottom, center, %, 단위 50% z축 단위 0 img{ width: 200px; border: 1px solid lightgray; transition: 1s; ..