CSS Обратная анимация не работает

Question

Я пытаюсь изменить анимацию, но класс добавляется, но анимация не возникает. Что-то не так с моим кодом? Или мне не хватает важного принципа анимации?

На данный момент существуют классы анимации, которые занимаются форвардной и обратной анимацией, но мне нужно изменить анимацию вместо создания новой анимации, чтобы вернуть элементы в исходное состояние.

Вот код:

<div class="posrel"> 
    <h1 class="white heading-abs">Heading</h1> 
    <div class="redbg round divabs"></div> 
    <button role="button" class="clickButton white customfont">Click</button> 
    <button role="button" class="originalState white customfont">Original State</button> 
<div> 

CSS:

тело { фон: черный; font-family: 'Ubuntu Mono'; }

.posrel 
{ 
    position: relative; 
    width: 500px; 
    height: 500px; 
} 

.white 
{ 
    color: white; 
} 

.heading-abs 
{ 
    position: absolute; 
    left: 30%; 
    top: 5%; 
} 

.round 
{ 
    width: 200px; 
    height: 200px; 
    border-radius: 50%; 
    -webkit-transform: scale(1.0); 
} 

.clickButton 
{ 
    width: 50px; 
    height: 50px; 
    border-radius: 50%; 
    background-color: blue; 
    border: none; 
} 

.redbg 
{ 
    background-color: red; 
} 

.divabs 
{ 
    position: absolute; 
    top: 30%; 
    left: 100%; 
    cursor: pointer; 
} 

.scalebubbleani 
{ 
    -webkit-animation: scalebubbleanim 0.5s forwards ease-in-out; 
} 

@-webkit-keyframes scalebubbleanim 
{ 
    0% 
    { 
     -webkit-transform: scale(1.0); 
    } 

    100% 
    { 
     -webkit-transform: scale(0.2); 
    } 
} 

*:focus 
{ 
    outline: none; 
} 

.moveheadingani 
{ 
    -webkit-animation: moveheadinganim 0.5s forwards ease-in-out; 
} 

@-webkit-keyframes moveheadinganim 
{ 
    0% 
    { 
     position: absolute; 
     top: 5%; 
     left: 30%; 
    } 

    100% 
    { 
     position: absolute; 
     left: 110%; 
     top: 25%; 
    } 
} 

.customfont 
{ 
    font-family: 'Ubuntu Mono'; 
} 

.originalState 
{ 
    width: 70px; 
    height: 70px; 
    border-radius: 50%; 
    background-color: rgba(255, 145, 0, 0.66); 
    border: none; 
    position: absolute; 
    top: 15%; 
    left: 0%; 
} 

.moveheadingbackani 
{ 
    -webkit-animation: moveheadingbackanim 0.5s forwards ease-in-out; 
} 

@-webkit-keyframes moveheadingbackanim 
{ 
    0% 
    { 
     position: absolute; 
     left: 110%; 
     top: 25%; 
    } 

    100% 
    { 
     position: absolute; 
     top: 5%; 
     left: 30%; 
    } 
} 

.scalebubbleoriginalani 
{ 
    -webkit-animation: scalebubbleoriginalanim 0.5s forwards ease-in-out; 
} 

@-webkit-keyframes scalebubbleoriginalanim 
{ 
    0% 
    { 
     -webkit-transform: scale(0.2); 
    } 

    100% 
    { 
     -webkit-transform: scale(1.0); 
    } 
} 

JS:

$(document).ready(function(){ 

    $('.clickButton').click(function(){ 
     $('.round').addClass('scalebubbleani'); 
     $('.heading-abs').addClass('moveheadingani'); 
     $('.round').removeClass('scalebubbleoriginalani'); 
     $('.heading-abs').removeClass('moveheadingbackani'); 
    }); 

    $('.originalState').click(function(){ 
     $('.heading-abs').addClass('moveheadingbackani'); 
     $('.round').addClass('scalebubbleoriginalani'); 
     $('.round').removeClass('scalebubbleani'); 
     $('.heading-abs').removeClass('moveheadingani'); 
    }); 
}); 

Имея отменить анимацию бы сделать мой CSS код более простым и кратким.

Jsfiddle - http://jsfiddle.net/qyya3521/

Answer 1

Это лучше использовать с CSS transitions:

$(document).ready(function(){ 
 

 
    $('.clickButton').click(function(){ 
 
\t \t $('.round').addClass('round-pressed'); 
 
     $('.heading-abs').addClass('heading-abs-pressed'); 
 
\t }); 
 

 
\t $('.originalState').click(function(){ 
 
\t \t $('.round').removeClass('round-pressed'); 
 
\t \t $('.heading-abs').removeClass('heading-abs-pressed'); 
 
\t }); 
 
});

body 
 
{ 
 
\t background: black; 
 
\t font-family: 'Ubuntu Mono'; 
 
} 
 
.posrel 
 
{ 
 
\t position: relative; 
 
\t width: 500px; 
 
\t height: 500px; 
 
} 
 
.white 
 
{ 
 
\t color: white; 
 
} 
 
.heading-abs 
 
{ 
 
\t position: absolute; 
 
\t left: 30%; 
 
\t top: 5%; 
 
    -webkit-transition: all 1s ease-in-out; 
 
    transition: all 1s ease-in-out; 
 
} 
 
.heading-abs-pressed { 
 
\t left: 110%; 
 
\t top: 25%; 
 
} 
 
.round 
 
{ 
 
\t width: 200px; 
 
\t height: 200px; 
 
\t border-radius: 50%; 
 
\t -webkit-transform: scale(1.0); 
 
    transform: scale(1.0); 
 
    -webkit-transition: all 1s ease-in-out; 
 
    transition: all 1s ease-in-out; 
 
} 
 
.round-pressed{ 
 
    -webkit-transform: scale(0.2); 
 
    transform: scale(0.2); 
 
} 
 
.clickButton 
 
{ 
 
\t width: 50px; 
 
\t height: 50px; 
 
\t border-radius: 50%; 
 
\t background-color: blue; 
 
\t border: none; 
 
} 
 
.redbg 
 
{ 
 
\t background-color: red; 
 
} 
 
.divabs 
 
{ 
 
\t position: absolute; 
 
\t top: 30%; 
 
\t left: 100%; 
 
\t cursor: pointer;  
 
} 
 
.customfont 
 
{ 
 
\t font-family: 'Ubuntu Mono'; 
 
} 
 
.originalState 
 
{ 
 
\t width: 70px; 
 
\t height: 70px; 
 
\t border-radius: 50%; 
 
\t background-color: rgba(255, 145, 0, 0.66); 
 
\t border: none; 
 
\t position: absolute; 
 
\t top: 15%; 
 
\t left: 0%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="posrel"> 
 
\t <h1 class="white heading-abs">Heading</h1> 
 
\t <div class="redbg round divabs"></div> 
 
\t <button role="button" class="clickButton white customfont">Click</button> 
 
\t <button role="button" class="originalState white customfont">Original State</button> 
 
<div>

Чтобы сделать это кросс-браузер Вы должны также использовать transform и transition вместе с -webkit-transform и -webkit-transition.