CSS3 전환-페이드 아웃 효과
순수 CSS에서 "페이드 아웃"효과를 구현하려고합니다. 여기에 바이올린이 있습니다. 온라인에서 몇 가지 솔루션을 살펴 보았지만 온라인 설명서를 읽은 후 슬라이드 애니메이션이 작동하지 않는 이유를 파악하려고합니다. 포인터가 있습니까?
다음은 HTML입니다.
<div class="dummy-wrap">
<div class="success-wrap successfully-saved">Saved</div>
</div>
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;
}
}
대신 전환을 사용할 수 있습니다.
.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가 요청한 세부 정보 추가)
When showing the element (by switching to the visible class), we want the visibility:visible to kick in instantly, so it’s ok to transition only the opacity property. And when hiding the element (by switching to the hidden class), we want to delay the visibility:hidden declaration, so that we can see the fade-out transition first. We’re doing this by declaring a transition on the visibility property, with a 0s duration and a delay. You can see detailed article here.
I know i am too late to answer but posting this answer to save others time. Hope it helps you!!
Since display is not one of the animatable CSS properties; One display:none fadeOut animation replacement with pure css3 animations, just set width:0 and height:0 at last frame, and use animation-fill-mode: forwards to keep width:0 and height:0 properties;
@-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;
}
You forgot to add a position property to the .dummy-wrap class, and the top/left/bottom/right values don't apply to statically positioned elements (the default)
.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;
}
This is the working code for your question.
Enjoy Coding....
<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>
참고URL : https://stackoverflow.com/questions/15907079/css3-transition-fade-out-effect
'Program Tip' 카테고리의 다른 글
| PHP : 문자열의 공백을 % 20으로 변환 하시겠습니까? (0) | 2020.10.15 |
|---|---|
| VIM : 왼쪽 NerdTree 패널에서 vsplit으로 오른쪽에있는 파일을 어떻게 열 수 있습니까? (0) | 2020.10.15 |
| Django 템플릿에서 관련 항목 정렬 (0) | 2020.10.15 |
| 최소 / 최대를 얻기 위해 자바 스크립트 객체 배열 비교 (0) | 2020.10.15 |
| 페이지에 PDF 뷰어를 삽입하는 방법은 무엇입니까? (0) | 2020.10.15 |