javascript - jQuery在伪之后制作动画

Question

我有这样的标记和 CSS

<div class="box">Box Content</div>

css 是这样的

    <style>
    @-webkit-keyframes widthresize {
        0% {
            width:10px
        }
        50% {
            width:50px
        }
        100% {
            width:100px
        }
    }
@-moz-keyframes widthresize {
        0% {
            width:0%
        }
        50% {
            width:50%
        }
        100% {
            width:100%
        }
}
@-ms-keyframes widthresize {
        0% {
            width:0%
        }
        50% {
            width:50%
        }
        100% {
            width:100%
        }
}
@keyframes widthresize {
        0% {
            width:0%
        }
        50% {
            width:50%
        }
        100% {
            width:100%
        }
    }   
    body {
        background-color: #333;
    }
    .box {
        color: #FFF;
    }
    .box::after {
        background: #FFF;
        content: '';
        position: relative;
        width: 0;
        height: 1px;
        left: 0;
        display: block;
        clear: both;
    }
    .widthanimation::after {
      -webkit-animation-name: widthresize;
      -moz-animation-name: widthresize;
      -o-animation-name: widthresize;
      -ms-animation-name: widthresize;
      animation-name: widthresize;
      animation-timing-function: ease;
      -webkit-animation-timing-function: ease;
      -moz-animation-timing-function: ease;
      -o-animation-timing-function: ease;
    }

    </style>

像这样的 jQuery

jQuery(document).ready(function($) {
    $('div.box').addClass('widthanimation');
});

我希望当 jQuery 将类 widthanimation 添加到 div 时，然后在它开始将宽度设置为 100% 的伪动画之后。对于动画，我使用了 css 关键帧，您可以在 css 中看到它。但它根本不起作用。抱歉，我无法更改我的标记。那么有人可以告诉我如何使用此标记获取动画吗？任何帮助和建议都将非常感激。 fiddle链接可见here谢谢。

Answer 1

它不起作用，因为您没有指定动画需要多长时间才能完成。试试这个:

.widthanimation::after {
    -webkit-animation: widthresize 1s ease;
    -moz-animation: widthresize 1s ease;
    -o-animation: widthresize 1s ease;
    -ms-animation: widthresize 1s ease;
    animation: widthresize 1s ease;
}

Updated fiddle

请注意，1s 是 1 秒。您可以根据需要进行调整。

要在 100% 关键帧处停止动画，请使用 animation-fill-mode: forwards:

Example fiddle