CSS 扩展和扩展

Posted 2023-03-06

【中文标题】CSS 扩展和扩展

【英文标题】：CSS scale in and out breaking

【发布时间】：2014-09-23 14:07:51

【问题描述】：

我有一个DIV，我想在单击按钮时缩小它，并在单击DIV 本身时缩小它。我的比例部分工作得很好，但是当我尝试删除 fadeIn 类时，当我扩大我的动画 fadeOut 休息时。

Here is my fiddle

HTML

<button id="myBtn">Click Me</button>
<div id="animateBox" class="box"><div>

CSS

.box 
    width: 200px;
    height: 200px;
    background-color:red;
    visibility: hidden;
    border-radius: 200px;

.fadeIn 
    animation-name: fadeIn;
    -webkit-animation-name: fadeIn;
    animation-duration: 0.25s;
    -webkit-animation-duration: 0.25s;
    animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;
    visibility: visible !important;

@keyframes fadeIn 
    0% 
        transform: scale(0);
        opacity: 0.0;
    
    /* 60% 
        transform: scale(0.4);  
    
    80% 
        transform: scale(0.8);
        opacity: 1; 
        */
    100% 
        transform: scale(1);
        opacity: 1;
    

@-webkit-keyframes fadeIn 
    0% 
        -webkit-transform: scale(0);
        opacity: 0.0;
    
    /* 60% 
        -webkit-transform: scale(0.4);
    
    80% 
        -webkit-transform: scale(0.8);
        opacity: 1; 
     */
    100% 
        -webkit-transform: scale(1);
        opacity: 1;
    

.fadeOut 
    animation-name: fadeOut;
    -webkit-animation-name: fadeOut;
    animation-duration: 0.25s;
    -webkit-animation-duration: 0.25s;
    animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;
    visibility: hidden;

@keyframes fadeOut 
    0% 
        transform: scale(1);
        opacity: 1;
    
    100% 
        transform: scale(0);
        opacity: 0;
    

@-webkit-keyframes fadeOut 
    0% 
        -webkit-transform: scale(1);
        opacity: 1;
    
    100% 
        -webkit-transform: scale(0);
        opacity: 0;
    

jQuery

$('#myBtn').click(function() 
    $('#animateBox').addClass("fadeIn");
);

$('#animateBox').click(function() 
    $( this ).addClass( "fadeOut" );
    $( this ).removeClass( "fadeIn" );  
);

【问题讨论】：

除了jsfiddle之外，请在问题本身中包含相关代码

【参考方案1】：

刚刚修改了 Nasir 的答案并引用了这个answer 以使动画流畅。

CSS

.box 
    width: 200px;
    height: 200px;
    background-color:red;
    visibility: hidden;
    border-radius: 200px;

.fadeIn 
    animation-name: fadeIn;
    -webkit-animation-name: fadeIn;
    animation-duration: 0.25s;
    -webkit-animation-duration: 0.25s;
    animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;
    visibility: visible !important;

@keyframes fadeIn 
    0% 
        transform: scale(0);
        opacity: 0.0;
    

    100% 
        transform: scale(1);
        opacity: 1;
    

@-webkit-keyframes fadeIn 
    0% 
        -webkit-transform: scale(0);
        opacity: 0.0;
    
    /* 60% 
        -webkit-transform: scale(0.4);
    
    80% 
        -webkit-transform: scale(0.8);
        opacity: 1; 
     */
    100% 
        -webkit-transform: scale(1);
        opacity: 1;
    

.fadeOut 
    animation-name: fadeOut;
    -webkit-animation-name: fadeOut;
    animation-duration: 0.25s;
    -webkit-animation-duration: 0.25s;
    animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-fill-mode:forwards;
    /*Chrome 16+, Safari 4+*/
    -moz-animation-fill-mode:forwards;
    /*FF 5+*/
    -o-animation-fill-mode:forwards;
    /*Not implemented yet*/
    -ms-animation-fill-mode:forwards;
    /*IE 10+*/
    animation-fill-mode:forwards;
    /*when the spec is finished*/
    visibility:visible;

@keyframes fadeOut 
    0% 
        transform: scale(1);
    
    100% 
        transform: scale(0.5);
    

@-webkit-keyframes fadeOut 
    0% 
        -webkit-transform: scale(1);
    
    100% 
        -webkit-transform: scale(0);
    

Working Fiddle

【参考方案2】：

试试这个。 一切都很好，但是在 css 中我已经改变了，让你看看....

.box 
    width: 200px;
    height: 200px;
    background-color:red;
    visibility: hidden;
    border-radius: 200px;


.fadeIn
    animation-name: fadeIn;
    -webkit-animation-name: fadeIn; 

    animation-duration: 0.25s;  
    -webkit-animation-duration: 0.25s;

    animation-timing-function: ease-in-out; 
    -webkit-animation-timing-function: ease-in-out;

    visibility: visible !important; 


@keyframes fadeIn 
    0% 
        transform: scale(0);
        opacity: 0.0;       
    
    /* 60% 
        transform: scale(0.4);  
    
    80% 
        transform: scale(0.8);
        opacity: 1; 
        */
    100% 
        transform: scale(1);
        opacity: 1; 
           


@-webkit-keyframes fadeIn 
    0% 
        -webkit-transform: scale(0);
        opacity: 0.0;       
    
    /* 60% 
        -webkit-transform: scale(0.4);
    
    80% 
        -webkit-transform: scale(0.8);
        opacity: 1; 
     */    
    100% 
        -webkit-transform: scale(1);
        opacity: 1; 
           


.fadeOut
    animation-name: fadeOut;
    -webkit-animation-name: fadeOut;    

    animation-duration: 0.75s;  
    -webkit-animation-duration: 0.75s;

    animation-timing-function: ease-in-out; 
    -webkit-animation-timing-function: ease-in-out;

    visibility:visible


@keyframes fadeOut 
    0% 
        transform: scale(1);
        opacity: 1;     
    
    100% 
        transform: scale(0.5);
        opacity: 1; 
           


@-webkit-keyframes fadeOut 
    0% 
        -webkit-transform: scale(1);
        opacity: 1;     
    
    100% 
        -webkit-transform: scale(0);
        opacity: 1;