取消选中复选框css3动画

我有一个动画时，我的复选框被选中，但我想做一个相反的动画，当你取消选中它们。我曾尝试伪类：未检查，我发现没有工作。有没有css3的方法或可能是一个小jQuery的修复？取消选中复选框css3动画

HTML

<div> 
    <input type="checkbox" name="cc" id="c1"> 
    <label for="c1">Checkbox Button 1</label> 
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,700); 

@-moz-keyframes checked { 
    0% { tranform: scale(1); } 
    50% { transform: scale(1.05); } 
    100% { transform: scale(1); } 
} 
@-webkit-keyframes checked { 
    0% { tranform: scale(1); } 
    50% { transform: scale(1.05); } 
    100% { transform: scale(1); } 
} 
@keyframes checked { 
    0% { tranform: scale(1); } 
    50% { transform: scale(1.05); } 
    100% { transform: scale(1); } 
} 

* { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
} 

body { 
    color: #fff; 
    font-family:"Open Sans"; 
    background: #DA5838; 
    padding: 20px; 
} 
h2 { 
    font-size: 24px; 
    margin-bottom: 14px; 
} 
div { 
    margin-bottom: 18px; 
} 
input[type="radio"], 
input[type="checkbox"]{ 
    display: none; 
} 
input[type="radio"] + label, 
input[type="checkbox"] + label{ 
    -webkit-appearance: none; 
    -moz-appearance: none; 
    -ms-appearance: none; 
    -o-appearance: none; 
    appearance: none; 
    cursor: pointer; 
    display: inline-block; 
    padding-left: 34px; 
    position: relative; 
    vertical-align: middle; 
} 
input[type="radio"]:checked + label, 
input[type="checkbox"]:checked + label{ 
    -webkit-backface-visibility: hidden; 
    -moz-backface-visibility: hidden; 
    backface-visibility: hidden; 
    -webkit-animation: checked 200ms ease 1; 
    -moz-animation: checked 200ms ease 1; 
    animation: checked 200ms ease 1; 
} 
input[type="radio"] + label:before { 
    background: none repeat scroll 0 0 rgba(255, 255, 255, 0); 
    border-radius: 100% 100% 100% 100%; 
    content: " "; 
    height: 7px; 
    left: 12px; 
    position: absolute; 
    top: 6px; 
    width: 7px; 
} 
input[type="radio"] + label:hover:before { 
    background: none repeat scroll 0 0 rgba(255, 255, 255, 0.5); 
} 
input[type="radio"]:checked + label:before { 
    background: none repeat scroll 0 0 rgba(255, 255, 255, 1); 
} 
input[type="checkbox"] + label:before { 
    content: ''; 
    position: absolute; 
    width: 7px; 
    height: 3px; 
    top: 6px; 
    left: 11px; 
    border: 2px solid rgba(255,255,255,0); 
    border-top: none; 
    border-right: none; 
    -webkit-transform: rotate(-45deg); 
    -moz-transform: rotate(-45deg); 
    transform: rotate(-45deg); 
} 
input[type="checkbox"] + label:hover:before { 
    border-color: rgba(255, 255, 255, 0.5); 
} 
input[type="checkbox"]:checked + label:before { 
    border-color: rgba(255, 255, 255, 1); 
} 
input[type="radio"] + label:after, 
input[type="checkbox"] + label:after{ 
    border: 3px solid #FFFFFF; 
    border-radius: 100% 100% 100% 100%; 
    content: " "; 
    height: 15px; 
    left: 5px; 
    position: absolute; 
    top: -1px; 
    width: 15px; 
} 
input[type="radio"]:checked + label:after, 
input[type="checkbox"]:checked + label:after{ 
    border-color: rgba(255,255,255,1); 
}

来源

2013-10-30 2ne

'：没有（：选中）'？ – azz

那很容易嘿！？欢呼@DerFlatulator – 2ne

作为答案发布。 – azz

简单的解决方案是最好的！

:not(:checked)

来源

2013-10-30 14:03:31 azz

我在你CODEPEN DEMO了一个小变化here，现在用键盘可访问性支持。

/* ... */ 
 
input[type="radio"], 
 
input[type="checkbox"]{ 
 
    opacity: 0; 
 
    position: absoute; 
 
} 
 
/* ... */ 
 
input[type="radio"]:focus + label:before, 
 
input[type="radio"] + label:hover:before { 
 
    background: none repeat scroll 0 0 rgba(255, 255, 255, 0.5); 
 
} 
 
/* ... */ 
 
input[type="checkbox"]:focus + label:before, 
 
input[type="checkbox"] + label:hover:before { 
 
    border-color: rgba(255, 255, 255, 0.5); 
 
} 
 
/* ... */

来源

2015-10-05 19:43:35

取消选中复选框css3动画

回答

相关问题