css3 transition 예제

안녕 여러분. 아무도 전환의 기본 시간이 무엇인지 알고? 또는 호버에 응답의 기본 시간? 내 페이지의 빠른 이동 마우스에 응답하지 않기 때문에. 문제는 마우스가 onhover 화재 전에 얼마나 오래 마우스를 호버해야하는가? 구문은 매우 간단합니다, 당신은 당신이 애니메이션 할 속성을 지정, 모든 또는 테두리 반경 또는 색상 또는 무엇이든, 실행 시간, 다음 전환 타이밍 기능. 타이밍 함수에 대한 옵션은 다음과 같습니다. 그렇다면 변환과 전환이란 무엇일까요? 가장 기본적인 수준에서 변환은 요소의 모양을 이동하거나 변경하는 반면, 전환은 요소를 원활하고 점차적으로 한 상태에서 다른 상태로 변경합니다. 개별 transition-* 속성과 마찬가지로 전환 단축 속성을 사용하여 쉼표 로 구분된 목록을 사용하여 여러 전환을 정의할 수 있습니다. 현재 매우 인기 있는 효과는 사각형 요소를 원형으로 전환하고 그 반대의 경우도 마찬가지입니다. CSS를 사용하면 테두리 반경 속성을 전환하는 간단한 효과입니다. Aha! 이제 전환의 `모든` 값을 이해합니다. 감사. 다행히도 애니메이션은 전환과 마찬가지로 약식 형식으로 작성할 수 있습니다. 이 작업은 여러 선언이 아닌 하나의 애니메이션 속성으로 수행됩니다.

애니메이션 속성 내의 값 순서는 애니메이션 이름, 애니메이션 지속 시간, 애니메이션 타이밍 함수, 애니메이션 지연, 애니메이션 반복 횟수, 애니메이션 방향, 애니메이션 채우기 모드 및 마지막으로 애니메이션 재생 상태여야 합니다. CSS 전환은 CSS 속성을 변경할 때 애니메이션 속도를 제어하는 방법을 제공합니다. 속성 변경 사항이 즉시 적용되는 대신 속성의 변경 내용이 기간 동안 수행될 수 있습니다. 예를 들어 요소의 색상을 흰색에서 검은색으로 변경하면 일반적으로 변경이 즉시 변경됩니다. CSS 전환을 사용하도록 설정하면 가속 곡선을 따르는 시간 간격으로 변경이 발생하며, 이 모든 것을 사용자 지정할 수 있습니다. 마우스가 빨간색에서 녹색으로 전환하려면 마우스가 끝나면 그 div가 반 초정도 걸립니다. 다음은 이러한 전환에 대한 라이브 데모입니다. 즉, 스타일이 변경되면(예: 마우스를 가져가면) 속성이 전환되고 스타일이 다시 변경되면(예: 가리키기 해제시) 전환됩니다. 예를 들어, 다음 데모 는 가리키지 않고 가리키지 않습니다: 위에 있는 것과 같이 특정 속성을 지정하거나 “all” 값을 사용하여 전환 속성을 참조할 수 있습니다. div.exampletransitione div.transition { 너비: 20px; 높이: 20px; 배경 색: #ED8029; 색상: #fff; 패딩: 10px; 테두리 반경: 5px; 여백 왼쪽: 0; -webkit-전환: 3s 선형; -o-전환: 3s 선형; ms-전환: 3s 선형; 전환: 3s 선형; } 여러 속성을 전환할 때 여러 타이밍 함수를 식별할 수 있습니다.

이러한 타이밍 함수 값은 다른 전환 속성 값과 마찬가지로 쉼표 분리값으로 선언될 수 있습니다. 여러 속성을 전환할 때 각 속성에 대해 하나씩 여러 기간을 설정할 수 있습니다. 전환 속성 속성 값과 마찬가지로 쉼표 분리 된 값을 사용 하 여 여러 기간을 선언할 수 있습니다. 개별 속성 및 기간을 식별할 때 이러한 값의 순서가 중요합니다. 예를 들어 전환 속성 속성 내에서 식별된 첫 번째 속성은 전환 기간 속성 내에서 식별된 첫 번째 속성과 일치합니다. div.exampletransitionf:hover div.transition { 여백-왼쪽: 400px; 배경 색: 녹색; }css: .my-gallery .my-icon-gallery { 위치: 절대; z-인덱스: 10000; 상단: 50%; 왼쪽: 50%; 오른쪽: 0; -webkit-transform: 번역(-50%, -50%)- 모즈 변환 : 번역 (-50 %, -50 %); 변환: 변환(-50%, -50%); 너비: 80px; 높이: 80px; 디스플레이: 인라인 블록; 채우기: rgba (255, 255, 255, 0); 스트로크: rgba (255, 255, 255, 1); 스트로크-스트로크:.05em; 스트로크-불투명도; 1; 스트로크-스트로크 스트로크 라인 조인: 경사; 스트로크 대시어레이: 0, 150; – 웹킷 전환 : 채우기 1.5s, 스트로크 대시 어레이 .75s, 스트로크 불투명도 1.5s 용이성; – 모즈 전환 : 채우기 1.5s, 스트로크 대시 어레이 .75s, 스트로크 불투명도 1.5s 용이성; – ms-전환 : 채우기 1.5s, 스트로크 대시 어레이 .75s, 스트로크 불투명도 1.5s 용이성; – O -전환 : 채우기 1.5s, 스트로크 대시 어레이 .75s, 스트로크 불투명도 1.5s 용이성; 전환: 채우기 1.5s, 스트로크 대시어레이 .75s, 스트로크 불투명도 1.5s 용이성; } 전환 타이밍 함수 속성은 전환이 이동하는 속도를 설정하는 데 사용됩니다.