Question

我正在制作一个复选框，我从未选中到检查时都有动画。

我已设置animation-fill-mode: forwards，以便在检查时初始化的第一个动画之后应用css状态。如何从该状态获得下一个动画。目前它读取css文件中指定的内容，即初始状态，而不是第一个动画应用的状态。此外，如果我在第二个动画上设置from { ... }动画（打算在未选中时选中），则会在页面加载时播放，因为它在未选中状态下播放，这是初始状态。

input[type="checkbox"] {
    display: none;
}

input[type="checkbox"]:checked + .outer_checkbox  {     
    -webkit-animation-name: checked_color;       
}

input[type="checkbox"]:checked + .outer_checkbox > .inner_checkbox {
    -webkit-animation-name: checked_placement;      
}

.inner_checkbox, .outer_checkbox {
    border: 1px solid black;
   -webkit-animation-duration: 0.3s;
   -webkit-animation-fill-mode: forwards;
}

.outer_checkbox {
    cursor: pointer;
    width: 32px;
    height: 16px;

    border-radius: 8px;     
    background-color: grey;

    -webkit-animation-name: unchecked_color;

}

.inner_checkbox {
    width: 18px;
    height: 18px;
    border-radius: 9px;   
    margin: -2px;     
    background-color: white;

    -webkit-animation-name: unchecked_placement;       
}

@-webkit-keyframes checked_color {
    to {
        background-color: green;
    }
}

@-webkit-keyframes checked_placement {  
    to {
        margin-left: 14px;
    }
}

@-webkit-keyframes unchecked_color {
    to {
        background-color: grey;
    }
}

@-webkit-keyframes unchecked_placement {  
    to {
        margin-left: -2px;
    }
}

https://jsfiddle.net/sg86n25L/1/

如何制作CSS动画使用上一个动画中应用的样式

0 个答案: