순수 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>답변
대신 전환을 사용할 수 있습니다.
.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;
}
답변
동일한 작업을 수행하는 또 다른 방법이 있습니다.
페이드 인 효과
.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 초이고 지연이있는 가시성 속성에 대한 전환을 선언하여이를 수행합니다. 여기에서 자세한 기사를 볼 수 있습니다 .
나는 대답하기에는 너무 늦었지만 다른 사람들의 시간을 절약하기 위해이 답변을 게시한다는 것을 알고 있습니다. 도움이 되었기를 바랍니다 !!
답변
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;
}
답변
이것은 귀하의 질문에 대한 작업 코드입니다.
코딩 즐기기 ….
<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>
답변
.dummy-wrap클래스에 위치 속성을 추가하는 것을 잊었고 위쪽 / 왼쪽 / 아래쪽 / 오른쪽 값이 정적으로 배치 된 요소에 적용되지 않습니다 (기본값).
답변
.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;
}
답변
