CSS scaling and fading effect

Question

CSS scaling and fading effect

I am trying to recreate the following effect (click one of the colors on this page to see what I mean: http://flatuicolors.com ) overlay when the link is clicked.

A transition looks something like this: an overlay with a successful message scales and disappears, pauses, and then scales and disappears.

However, it does not give the desired effect. What's more, scaling is not visible at all. Any help is greatly appreciated.

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>

Run code Hide result

+4

html5 css3 css-animations

user1038814 Sep 23 '15 at 6:30

source share

1 answer

Alvaro Menéndez · Accepted Answer · 2015-10-15T11:54:27+0000

Well, I hope this answer can help you.

, ( ), css3 jquery. , , , , , .

html :

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

square - , effect - , div 0 , , ( "" ).

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;
}

, 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

CSS scaling and fading effect

More articles: