특정 CSS 전환

Question

버튼으로 활성화되는 일부 이미지를 화면에 저장하고 싶습니다 : 사용 중입니다.

스타일 : 나는 전환 속성에 넣을 때

.image { 
    opacity: 0; 
    position: fixed; 
    top: -500px; 
    left: 20%; 
    transition:0.5s; 
} 
.button1:active .image01 { 
    opacity: 1; 
    top:5%; 
    left:20%; 
} 

내가 그들 그러나 불투명 1. 에 불투명도 0에서 페이드하려면, 그것은 불투명도 및 위치를 모두 애니메이션. 불투명도 만 애니메이션화하고 위치 변경을 즉시 수행 할 수있는 방법이 있습니까?

Answer 1

간단하게 다음과 같이 전환에 (귀하의 경우 opacity) 속성을 추가

.image { 
    opacity: 0; 
    position: fixed; 
    top: -500px; 
    left: 20%; 
    transition:opacity 0.5s; 
} 
.button1:active .image01 { 
    opacity: 1; 
    top:5%; 
    left:20%; 
} 

---

트란 지션은 다음과 같이 별도로 정의 할 수있는 것보다 4 개 속성이 있습니다

transition-property: opacity; /*Default value is all */ 
transition-duration: 2s; /* Default value is 0 (no transition effect) */ 
transition-timing-function: linear; /* Default value is linear */ 
transition-delay: 1s; /* Default value is 0 */ 

을 또는 속기 속성을 사용하여 :

transition: opacity 2s linear 1s; 

그래서 일부 속성을 생략하면 기본값을 사용하게됩니다.

자세히 알아보기