CSS3 전환-페이드 아웃 효과

98

순수 CSS에서 "페이드 아웃"효과를 구현하려고합니다. 여기에 바이올린이 있습니다. 온라인에서 몇 가지 솔루션을 살펴 보았지만 온라인 설명서를 읽은 후 슬라이드 애니메이션이 작동하지 않는 이유를 파악하려고합니다. 포인터가 있습니까?

.dummy-wrap {
  animation: slideup 2s;
  -moz-animation: slideup 2s;
  -webkit-animation: slideup 2s;
  -o-animation: slideup 2s;
}

.success-wrap {
  width: 75px;
  min-height: 20px;
  clear: both;
  margin-top: 10px;
}

.successfully-saved {
  color: #FFFFFF;
  font-size: 20px;
  padding: 15px 40px;
  margin-bottom: 20px;
  text-align: center;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  background-color: #00b953;
}

@keyframes slideup {
  0% {top: 0px;}
  75% {top: 0px;}
  100% {top: -20px;}
}

@-moz-keyframes slideup {
  0% {top: 0px;}
  75% {top: 0px;}
  100% {top: -20px;}
}

@-webkit-keyframes slideup {
  0% {top: 0px;}
  75% {top: 0px;}
  100% {top: -20px;}
}

@-o-keyframes slideup {
  0% {top: 0px;}
  75% {top: 0px;}
  100% {top: -20px;}
}
<div class="dummy-wrap">
  <div class="success-wrap successfully-saved">Saved</div>
</div>
스 니펫 확장

css  css-transitions 
— 페니 리우
소스

답변:

97

대신 전환을 사용할 수 있습니다.

.successfully-saved.hide-opacity{
    opacity: 0;
}

.successfully-saved {
    color: #FFFFFF;
    text-align: center;

    -webkit-transition: opacity 3s ease-in-out;
    -moz-transition: opacity 3s ease-in-out;
    -ms-transition: opacity 3s ease-in-out;
    -o-transition: opacity 3s ease-in-out;
     opacity: 1;
}
— 카르 티크 르
소스
4
요즘에는 브라우저 접두어가 필요하지 않습니다. 그냥 평범한 ol '... 전환 : 불투명도 3s ease-in-out;
— danday74
178

동일한 작업을 수행하는 또 다른 방법이 있습니다.

페이드 인 효과

.visible {
  visibility: visible;
  opacity: 1;
  transition: opacity 2s linear;
}

fadeOut 효과

.hidden {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 2s, opacity 2s linear;
}

UPDATE 1: 더 많은 최신 튜토리얼 CSS3 Transition : fadeIn 및 fadeOut like effects to hide show elements and Tooltip Example : Show Hide Hint or Help Text using CSS3 Transition with sample code.

UPDATE 2: (@ big-money가 요청한 세부 정보 추가)

요소를 표시 할 때 (visible 클래스로 전환하여) visible : visible이 즉시 시작되기를 원하므로 opacity 속성 만 전환해도 괜찮습니다. 요소를 숨길 때 (히든 클래스로 전환하여), 먼저 fade-out 전환을 볼 수 있도록 visible : hidden 선언을 지연시키고 싶습니다. 우리는 시간이 0 초이고 지연이있는 가시성 속성에 대한 전환을 선언하여이를 수행합니다. 여기에서 자세한 기사를 볼 수 있습니다 .

나는 대답하기에는 너무 늦었지만 다른 사람들의 시간을 절약하기 위해이 답변을 게시한다는 것을 알고 있습니다. 도움이 되었기를 바랍니다 !!

— Immayankmodi
소스
10
좋은 대답입니다 display:none. "숨기기"애니메이션이 끝날 때 상자를 지우 도록 추가 하려고합니다.
— Apolo
1
나는 확실히 당신이 여기에서 필요로하는 무슨 아니에요하지만 당신은 시도 할 수 있습니다 display:block대신 visibility: visible에 .visible클래스 마찬가지로 display:none대신 visibility: hidden에 .hidden위의 예에서 클래스입니다.
— immayankmodi 2014 년
4
@MMTac 애니메이션 가능한 CSS 속성display 중 하나가 아니기 때문에 작동하지 않습니다 . "display : block"에서 "display : none"으로 애니메이션을 참조하십시오 .
— peterflynn
@MayankModi fadeOut 효과의 가시성에 대한 첫 번째 0의 포인트는 무엇입니까? 내 이해는 당신이 2s가 필요하다는 것입니다
— Big Money
1
@BigMoney는 기간과 지연을위한 것입니다 (요구 사항에 따라 해당 숫자를 수정할 수 있는지 확인하기 위해 예를 들어 사용됨). 이 답변이 아직 활성화되어 있으므로 세부 정보를 업데이트했습니다.를 확인하십시오.
— immayankmodi 2010 년
13

display애니메이션 가능한 CSS 속성 중 하나가 아니기 때문에 . 하나의 display:none페이드 아웃 애니메이션을 순수한 CSS3 애니메이션으로 대체 하고 마지막 프레임에 설정 width:0하고 유지 하고 속성을 height:0사용 합니다.animation-fill-mode: forwardswidth:0height:0

@-webkit-keyframes fadeOut {
    0% { opacity: 1;}
    99% { opacity: 0.01;width: 100%; height: 100%;}
    100% { opacity: 0;width: 0; height: 0;}
}  
@keyframes fadeOut {
    0% { opacity: 1;}
    99% { opacity: 0.01;width: 100%; height: 100%;}
    100% { opacity: 0;width: 0; height: 0;}
}

.display-none.on{
    display: block;
    -webkit-animation: fadeOut 1s;
    animation: fadeOut 1s;
    animation-fill-mode: forwards;
}
— 왕 루이
소스
1
고성능 애니메이션을 살펴보십시오 . 다시 레이아웃을 트리거 width하고 height민감한 CSS 속성을 사용하지 않아야 합니다.
— Penny Liu
5

이것은 귀하의 질문에 대한 작업 코드입니다.
코딩 즐기기 ....

<html>
   <head>

      <style>

         .animated {
            background-color: green;
            background-position: left top;
            padding-top:95px;
            margin-bottom:60px;
            -webkit-animation-duration: 10s;animation-duration: 10s;
            -webkit-animation-fill-mode: both;animation-fill-mode: both;
         }

         @-webkit-keyframes fadeOut {
            0% {opacity: 1;}
            100% {opacity: 0;}
         }

         @keyframes fadeOut {
            0% {opacity: 1;}
            100% {opacity: 0;}
         }

         .fadeOut {
            -webkit-animation-name: fadeOut;
            animation-name: fadeOut;
         }
      </style>

   </head>
   <body>

      <div id="animated-example" class="animated fadeOut"></div>

   </body>
</html>
— 비샬 비라 다르
소스
솔루션에 대한 설명을 첨부하십시오 : 작동 원리 이미 게시 된 다른 솔루션과 다른 이유는 무엇입니까?
— lifeisfoo
@lifeisfoo 나는 모든 솔루션을 시도했지만 이것은 간단하고 쉬운 방법이며 한 가지 더 중요한 것은 텍스트가 몇 초 후에 자동으로 사라진다는 것입니다 (10). 따라서 클릭 할 필요가 없습니다.
— 이씨 Biradar
3

.dummy-wrap클래스에 위치 속성을 추가하는 것을 잊었고 위쪽 / 왼쪽 / 아래쪽 / 오른쪽 값이 정적으로 배치 된 요소에 적용되지 않습니다 (기본값).

http://jsfiddle.net/dYBD2/2/

— 제이슨 야 라기
소스
감사합니다.하지만 전환 후에는 어떻게 숨길까요?
방법은 여러 가지가 있습니다 - 당신은 단지 증가 할 수 top는 뷰포트 "OFF"이동하도록 값을하거나 페이드 아웃 있도록 ... 원하는 것처럼 애니메이션에 대한 불투명도를 사용할 수 있습니다
— 제이슨 Yaraghi
1
좋아요 .. 알겠습니다. 질문이 하나 더 있습니다. 왜 숨겨진 div가 페이드 아웃으로 돌아 오나요?
3 
.fadeOut{
    background-color: rgba(255, 0, 0, 0.83);
    border-radius: 8px;
    box-shadow: silver 3px 3px 5px 0px;
    border: 2px dashed yellow;
    padding: 3px;
}
.fadeOut.end{
    transition: all 1s ease-in-out;
    background-color: rgba(255, 0, 0, 0.0);
    box-shadow: none;
    border: 0px dashed yellow;
    border-radius: 0px;
}

여기 데모.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.