CSS 간단한 애니메이션 (전이 특성)

전환 속성 우선, 이해

1 전이 특성은 전이는 네 개의 속성을 설정하는데 사용될 수 속기 속성이다
전이 속성 이름 전이 효과 CSS 특성 (높이, 폭, 불투명 등등).
전이 시간 효과는 전환을 완료하는 데 시간이 걸릴 것입니다.
전환 타이밍 기능은 미리 정해진 속도의 속도 프로파일에 영향을 미친다.
전환 효과는 전환 지연 (지연 시간)을 시작합니다.
참고 : 전이 시간 속성의 길이가 더 전환 0없는 경우.

두 함수의 기울기 값 :

함수는 경사 - 타이밍 - 전이 인 기능, 
베 지어 곡선의 소정 값은 상기 
    큐빅 둔화 서서히 빠르고 일정한 속도를 완화 (-bezier 0.25 , 0.1 , 0.25 , . 1 ) 
    완화 -IN 균일 베지 큐빅 점차 빠른 ( 0.42 , 0 , . 1 , . 1 ) 
    쉽게 균일 -out 천천히 지어 큐빅 ( 0 , 0 , 0.58 , 1. ) 
    완화 - 에 -out 용이성 등이나 가속도 (대 진폭) 큐빅 Bezier-보다 쉽게 ( 0.42 , 0 , 0.58 , . 1 ) 
    선형 전체 균일 한 차-bezier ( 0 , 0 , 1 , 1 )

3 속기 방법 : 전환 : CSS 이름이 지연 시간의 시간 값보다 그레이딩 기능 속성;

둘째, 간단한 애니메이션 동작 예

1 개의 제 그림 삽입

<div 클래스 = " " > 
        <IMG SRC = " IMG /吃药.JPG " ALT = "" > 
        <IMG SRC =의 " IMG / main_bg.jpg " ALT = "" > 
    </ div>

2, 사진에 스타일을 설정

<스타일> 
        .A { 
            마진 : 자동으로 100 픽셀; 
            높이 : 400 픽셀; 
            폭 : 600PX; 
            위치 : 상대; 
        } 
        
        n 번째 : IMG .A -child ( 1 ) { 
            높이 300 픽셀을; 
            폭 : 300 픽셀; 
            위치 : 절대; 
        } 
        
        n 번째 : IMG .A -child ( 2 ) { 
            높이 300 픽셀을; 
            폭 : 300 픽셀; 
            위치 : 절대; 
            전환 : 불투명도 3S 쉽게 - 에 2 초; 
        } 
        
        .A의 IMG : n 번째 -child (2 ) 호버 { 
            불투명도 : 0 ; 
        } 
        
        IMG { 
            높이 300 픽셀; 
            폭 : 300 픽셀; 
        }
         </ 스타일>

(3) 생성 된 애니메이션은 :

CSS 간단한 애니메이션 (전이 특성)

추천