纯 CSS 滑块单选按钮先点击无动画

我需要你的帮助来制作一个几乎完全是 css 的滑块。 当我第一次点击一个单选按钮时,没有动画完成......在第二次点击它没问题。我不知道是 javascript 还是 css。 你能帮我解决这个错误吗?

https://jsfiddle.net/italya/prbtna3o/

<!DOCTYPE html>
<html>
<head>
    <title>TEST</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="description" content="TEST created with cssSlider,a free wizard program that helps you easily generate beautiful web slideshow" />

    
</head>
<body style="background-color:#d7d7d7; margin: auto; text-align: center;">

        <!-- Start cssSlider.com -->
        <!-- Generated by cssSlider.com 2.1 -->
        <link rel="stylesheet" href="cssslider5_files/csss_engine1/style.css">
        <!--[if IE]><link rel="stylesheet" href="cssslider5_files/csss_engine1/ie.css"><![endif]-->
        <!--[if lte IE 9]><script type="text/javascript" src="cssslider5_files/csss_engine1/ie.js"></script><![endif]-->
        <script type="text/javascript" src="cssslider5_files/csss_engine1/gestures.js"></script> <div class='csslider1 autoplay '>
        <input name="cs_anchor1" id='cs_slide1_0' type="radio" class='cs_anchor slide' >
        <input name="cs_anchor1" id='cs_slide1_1' type="radio" class='cs_anchor slide' >
        <input name="cs_anchor1" id='cs_slide1_2' type="radio" class='cs_anchor slide' >
        <input name="cs_anchor1" id='cs_slide1_3' type="radio" class='cs_anchor slide' >
        <input name="cs_anchor1" id='cs_play1' type="radio" class='cs_anchor' checked>
        <input name="cs_anchor1" id='cs_pause1_0' type="radio" class='cs_anchor pause'>
        <input name="cs_anchor1" id='cs_pause1_1' type="radio" class='cs_anchor pause'>
        <input name="cs_anchor1" id='cs_pause1_2' type="radio" class='cs_anchor pause'>
        <input name="cs_anchor1" id='cs_pause1_3' type="radio" class='cs_anchor pause'>
        <ul>
            <li class="cs_skeleton"><img src="https://st.depositphotos.com/1987177/3470/v/950/depositphotos_34700099-stock-illustration-no-photo-available-or-missing.jpg" style="width: 100%;"></li>
            <li class='num0 img slide'> <img src='https://st.depositphotos.com/1987177/3470/v/950/depositphotos_34700099-stock-illustration-no-photo-available-or-missing.jpg' alt='SLIDE1' title='SLIDE1' /></li>
            <li class='num1 img slide'> <img src='https://st.depositphotos.com/1987177/3470/v/950/depositphotos_34700099-stock-illustration-no-photo-available-or-missing.jpg' alt='SLIDE2' title='SLIDE2' /></li>
            <li class='num2 img slide'> <img src='https://st.depositphotos.com/1987177/3470/v/950/depositphotos_34700099-stock-illustration-no-photo-available-or-missing.jpg' alt='SLIDE3' title='SLIDE3' /></li>
            <li class='num3 img slide'> <img src='https://st.depositphotos.com/1987177/3470/v/950/depositphotos_34700099-stock-illustration-no-photo-available-or-missing.jpg' alt='SLIDE4' title='SLIDE4' /></li>
        </ul><div class="cs_engine"><a href="http://cssslider.com">slider</a> by cssSlider.com v2.1</div>
        <div class='cs_description'>
            <label class='num0'><span class="cs_title"><span class="cs_wrapper">SLIDE1</span></span></label>
            <label class='num1'><span class="cs_title"><span class="cs_wrapper">SLIDE2</span></span></label>
            <label class='num2'><span class="cs_title"><span class="cs_wrapper">SLIDE3</span></span></label>
            <label class='num3'><span class="cs_title"><span class="cs_wrapper">SLIDE4</span></span></label>
        </div>
        
        
        <div class='cs_bullets'>
            <label class='num0' for='cs_slide1_0'> <span class='cs_point'></span>
                <span class='cs_thumb'><img src='cssslider5_files/csss_tooltips1/slide1.jpg' alt='SLIDE1' title='SLIDE1' /></span></label>
            <label class='num1' for='cs_slide1_1'> <span class='cs_point'></span>
                <span class='cs_thumb'><img src='cssslider5_files/csss_tooltips1/slide2.jpg' alt='SLIDE2' title='SLIDE2' /></span></label>
            <label class='num2' for='cs_slide1_2'> <span class='cs_point'></span>
                <span class='cs_thumb'><img src='cssslider5_files/csss_tooltips1/slide3.jpg' alt='SLIDE3' title='SLIDE3' /></span></label>
            <label class='num3' for='cs_slide1_3'> <span class='cs_point'></span>
                <span class='cs_thumb'><img src='cssslider5_files/csss_tooltips1/slide4.jpg' alt='SLIDE4' title='SLIDE4' /></span></label>
        </div>
        </div>
        <!-- End cssSlider.com -->
    
        
</body>
</html>

非常感谢

iCMS 回答:纯 CSS 滑块单选按钮先点击无动画

暂时没有好的解决方案,如果你有好的解决方案,请发邮件至:iooj@foxmail.com
本文链接:https://www.f2er.com/134574.html

大家都在问