웹 프런트엔드-CSS3 변환 모듈

CSS3 변환 모듈의 간단한 사용
예: div 위로 마우스를 이동할 때 div 너비 수정

div {
    width: 100px;
    height: 50px;
    background-color: #0094ff;
    /*         */
    transition-property: width;
    /*           ,0.5s     0.5      */
    transition-duration: .5s;
}
div:hover{
    /*         */
    width: 200px;
}

상기 세 가지를 기억하면 CSS3를 통해 과도 애니메이션을 할 수 있다

변환 속성 지정transition-property: 속성 이름

변환 애니메이션의 지속 시간을 지정합니다transtion-duration: 시간(초)은 소수

를 지원합니다.

실행하는 과도 속성에 변화가 있어야 합니다.

단일 변환 속성에 대해 위의 방식만 있으면 됩니다. 여러 변환 속성이 쉼표로 구분될 수 있다면 변환 속성을 중복 선언해서는 안 됩니다. 그렇지 않으면 뒤의 것이 앞의 것을 덮어씁니다.

/*         */
div {
            width: 100px;
            height: 50px;
            background-color: #0094ff;
            /*         */
            transition-property: width,height;
            /*           ,0.5s     0.5      */
            transition-duration: .5s,2s;/*.5s     width    ,2s  height    */
        }
        div:hover{
            /*         */
            width: 200px;
            height: 100px;
        }

CSS3 변환 모듈의 추가 속성

transstion-delay 얼마나 지연되어 과도를 집행하는지, 단위는 초(s) 예시 양식은 다음과 같다

.container{
    width:300px;
    height: 300px;
    background-color: #0094ff;
}
.container ul{
    list-style:none;
    padding:0;
    margin: 0;
}
.container ul li{
    background-color: red;
    color:#fff;
    position: relative;
    left: -150px;
    height: 50px;
    width: 150px;
    margin-top: 2px;
    opacity: 0;
    transition-property: left,opacity;
    transition-duration: .5s,0.5s;

}
.container ul li:nth-child(1){
    transition-delay: .1s;
}
.container ul li:nth-child(2){
    transition-delay: .2s;
}
.container ul li:nth-child(3){
    transition-delay: .3s;
}
.container ul li:nth-child(4){
    transition-delay: .4s;
}
.container ul li:nth-child(5){
    transition-delay: .5s;
}
.container ul:hover li{
    left:0;
    opacity:1;
}

html

transition-timing-function: 과도 효과를 설명하는 속도 곡선, 기본값ease

ease: 점점 느려진다

ease-in: 가속

ease-out: 감속

ease-in-out: 가속 후 감속

linear: 평균 속도

cubic-bezier(n,n,n,n): n의 수치는 0-1사이

예제 demo
CSS3 변환 속성transition 약자 형식

형식transition: 속성명 과도시간 운동방식(속도곡선) 지연시간, 속성명 과도시간 운동방식(속도곡선) 지연시간;

여러 속성은 쉼표로 분할한다.

약자 방식도 뒤에 있는 두 개의 매개 변수를 생략할 수 있다. 왜냐하면 과도 속성을 지정하면 과도 시간을 지정하면 되기 때문이다.예제

div{
    /* width        ,     2s,      ease,   1s*/
    transition:width 2s ease 1s;
}

모든 속성에 전환 효과를 추가하면 수정할 속성을 직접 all로 작성할 수 있습니다.

div{
    transition:all 2s ease-in 1s;
}

과도 모듈 신축성 효과 데모
전환 효과를 위한 방법:

분석 효과, 그 속성에 변화가 생겼는지 확인

과도의 세 가지 조건을 만족시키면 된다.

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

다양한 언어의 JSON

JSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

웹 프런트엔드-CSS3 변환 모듈

좋은 웹페이지 즐겨찾기