CSS縮小和淡入淡出效果

我試圖在單擊鏈接時重新生成以下效果（單擊此頁上的其中一種顏色以查看我的意思：http://flatuicolors.com）。CSS縮小和淡入淡出效果

過渡是這樣的：一個成功消息的覆蓋範圍擴大和淡入，暫停然後擴大和淡出。

但是，它沒有產生預期的效果。更重要的是，縮放根本不可見。任何幫助深表感謝。

html, body { height: 100%; } 
 
.container { 
 
    position: relative; 
 
    margin: 0 auto; } 
 
.container.questionnaire { 
 
    background:#f1c40f; 
 
    width: 100%; 
 
    max-width: 100%; 
 
    height: 100%; 
 
} 
 
.row-flex.buttons-only { 
 
    height:100%;} 
 
.row-flex { 
 
    display: table; 
 
    width: 100%; } 
 
.column { 
 
    box-sizing: border-box; } 
 
.one-third-flex.column { 
 
    width: 33.3333%; 
 
    display: table-cell; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    float: none; } 
 
.overlay { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
    display: table; 
 
    background-color:#1abc9c; 
 
    z-index: 10; 
 
} 
 
h1.success-message { display: table-cell; text-align: center; 
 
    vertical-align: middle;} 
 

 
.animated { 
 
    -webkit-animation-duration: 2s; 
 
    animation-duration: 2s; 
 
    -webkit-animation-fill-mode: both; 
 
    animation-fill-mode: both; 
 
    -webkit-animation-timing-function: ease-out; 
 
    animation-timing-function: ease-out; 
 
} 
 

 
@-webkit-keyframes fadeOut { 
 
    0% {visibility:visible; opacity: 1;transform: scale(2);} 
 
    40% {opacity: 1;transform: scale(1.5);} 
 
    60% {opacity: 1;transform: scale(1.5);} 
 
    100% {visibility:hidden; opacity: 0;transform: scale(1);} 
 
} 
 
@keyframes fadeOut { 
 
    0% {visibility:visible; opacity: 1; transform: scale(2);} 
 
    40% {opacity: 1;transform: scale(1.5);} 
 
    60% {opacity: 1;transform: scale(1.5);} 
 
    100% {visibility:hidden;opacity: 0; transform: scale(1);} 
 
} 
 
.fadeOut { 
 
    -webkit-animation-name: fadeOut; 
 
    animation-name: fadeOut; 
 
}

<body> 
 
    
 
    <div class="overlay animated fadeOut"><h1 class="success-message">Success</h1></div> 
 
    <div class="container questionnaire"> 
 
    <div class="row row-flex buttons-only"> 
 
     <div class="one-third-flex column"></div> 
 
     <div class="one-third-flex column" style="background-color: #f4f4f4;"> 
 
      <div role="button" class="ico-btn btn-settings-lg"><a href="#">CLICK</a> 
 
      </div> 
 
     </div> 
 
     <div class="one-third-flex column"></div> 
 
     </div> 
 
    </div> 
 
</body>

來源

2015-09-23 user1038814

這裏一定有一點JS。您無法使用CSS鏈接您的動作（點擊）和動畫。 – Sebastien

Thans回覆Sebastien。我知道沒有JS，我只是在尋找一個關於幀動畫的解決方案。謝謝 – user1038814

嗯，我希望這個答案可以幫助你。

正如我認爲這是一個有趣的效果（使用flash創建的），我用css3和jquery從頭開始創建它。對我來說，做我的代碼是很容易的，因爲它可以保證你試圖修改你的代碼，所以這對你來說可能不是有用的，但也許可能是其他用戶使用它的原因。

的HTML是簡單：

<div class="square "> 
</div> 
<div class="effect "> 
<div class="text">TEXT HERE</div> 
</div>

凡square是區域點擊並effect是動畫的容器，其是具有0高度和寬度一個div放置在窗口中時的中心你想添加更多的動畫（以使其「增長」或縮小）。

利用，此外，一些簡單的jQuery：

$('. square).click(function() { 
    $('. effect).addClass("animation"); 
    $('.text').addClass("text-effect"); 
    setTimeout(function() { 
     $('. effect).removeClass("animation"); 
     $('.text').removeClass("text-effect"); 
    }, 1500); 
});

添加一個類來effect和text上點擊刪除動畫完成

後，再經過一些基本的CSS樣式我做動畫爲effect：

.animation { 
    animation-name: background; 
    animation-duration: 1.5s; 
    animation-timing-function: linear; 
    animation-delay: 0s; 
    animation-iteration-count: 1; 
    } 
@keyframes background { 
    0% {height:100%; width:100%; opacity:1} 
    80% {height:100%; width:100%; opacity:1} 
    99.999% {height:100%; width:100%; opacity:0} 
    100% {height:0; width:0; opacity:0} 
}

而對於text我剛纔使用的過渡：

.text { 
    background-color:rgba(255,255,255,0.6); 
    width:100%; 
    text-align:center; 
    font-size:50px; 
    color:#fff; 
    font-weignt:bold; 
    text-shadow: 1px 1px 0 #000000; 
    font-family:arial; 
    padding:20px 0; 
    transition:all 0.2s linear; 
    position:absolute; 
    top:50%; 
    transform: translateY(-50%); 
    transition:all 0.2s linear; 
} 

.text-effect { 
    padding:10px 0; 
    font-size:40px; 
}

所有toguether並加入8個方塊具有不同的顏色：

JSFIDDLE

，正如我上面寫的，所述背景衰落和收縮剛剛與

@keyframes background { 
    0% {height:100%; width:100%; opacity:1} 
    80% {height:100%; width:100%; opacity:1} 
    100% {height:0; width:0; opacity:0} 
}

JSFIDDLE2

來源

2015-10-15 11:54:27

CSS縮小和淡入淡出效果

回答

相關問題