2017-03-13 7 views
5

पर सीएसएस रिवर्स एनीमेशन मेरे पास एक दो-चरणीय सीएसएस एनीमेशन है जिसे मैं "सक्रिय" होने पर एक बार आगे बढ़ना चाहता हूं, और फिर "निष्क्रिय" होने पर पिछड़ा भागना चाहता हूं। मुझे पता है कि अलग-अलग आगे और पिछड़े एनिमेशन, like so को परिभाषित करके हासिल करना संभव है, लेकिन मैं सोच रहा था कि यह एक एकल एनीमेशन और animation-direction: reverse संपत्ति के साथ प्राप्त करने योग्य था या नहीं।माउसलेव

उत्तर

0

ऐसा कुछ? यदि ऐसा है तो क्या आप देख रहे हैं

-o-transition: all 0.5s ease; 
    -ms-transition: all 0.5s ease; 
    -moz-transition: all 0.5s ease; 
    -webkit-transition: all 0.5s ease; 
    transition: all 0.5s ease; 

है आप हमारे लिए स्क्रिप्ट onClick

#test{ 
 
    position:absolute; 
 
    height: 100px; 
 
    width: 100px; 
 
    background-color: #A8A8A8; 
 
    border-bottom: 0px solid black; 
 
    
 
    -o-transition: all 0.5s ease; 
 
    -ms-transition: all 0.5s ease; 
 
    -moz-transition: all 0.5s ease; 
 
    -webkit-transition: all 0.5s ease; 
 
    transition: all 0.5s ease; 
 
} 
 

 
#test:hover{ 
 
    border-bottom: 10px solid black; 
 
}
<div id="test"> 
 
</div>

+0

यह 2 कदम संक्रमण नहीं है – woojoo666

0

साथ toggleClass करने के क्रम में इसे करने के लिए जोड़ सकते हैं एक क्लिक में अटैच करने की जरूरत है

div { 
 
    background: aqua; 
 
    color: #fff; 
 
    margin: 0 auto; 
 
    padding: 100px 0; 
 
    -webkit-transition: -webkit-border-radius 1.5s ease-in; 
 
    -moz-transition: -moz-border-radius 1.5s ease-in; 
 
    -o-transition: border-radius 1.5s ease-in; 
 
    -ms-transition: border-radius 1.5s ease-in; 
 
    transition: border-radius 1.5s ease-in; 
 
    text-align: center; 
 
    width: 200px; 
 
\t \t 
 
\t \t -webkit-transition: all 3s ease; 
 
    -moz-transition: all 3s ease; 
 
    -o-transition: all 3s ease; 
 
    -ms-transition: all 3s ease; 
 
    transition: all 3s ease; 
 
    -webkit-transform: rotate(-360deg); 
 
    -moz-transform: rotate(-360deg); 
 
    -o-transform: rotate(-360deg); 
 
    -ms-transform: rotate(-360deg); 
 
    transform: rotate(-360deg); 
 
} 
 

 
div:hover { 
 
    background: red; 
 
    -webkit-border-radius: 100px; 
 
    -moz-border-radius: 100px; 
 
    border-radius: 100px; 
 
    -webkit-transition: -webkit-border-radius 1.5s ease-in; 
 
    -moz-transition: -moz-border-radius 1.5s ease-in; 
 
    -o-transition: border-radius 1.5s ease-in; 
 
    -ms-transition: border-radius 1.5s ease-in; 
 
    transition: border-radius 1.5s ease-in; 
 
\t \t 
 
\t \t -webkit-transition: all 3s ease; 
 
    -moz-transition: all 3s ease; 
 
    -o-transition: all 3s ease; 
 
    -ms-transition: all 3s ease; 
 
    transition: all 3s ease; 
 
    -webkit-transform: rotate(360deg); 
 
    -moz-transform: rotate(360deg); 
 
    -o-transform: rotate(360deg); 
 
    -ms-transform: rotate(360deg); 
 
    transform: rotate(360deg); 
 
}
<div></div>

संबंधित मुद्दे