Css 可以使用：after和：focus之间的转换设置动画吗？

通常，转换用于在选择器及其伪类之间设置动画。我正在尝试使用“不透明度”（opacity）设置长方体阴影属性的动画，因为如果直接使用“过渡”（Transition）设置其动画，则会降低性能，因此我需要从一个伪类设置到另一个伪类的动画。仅使用CSS是否可以实现这一点？

您在问题标题中提出的方式没有真正意义-：after不是元素可以处于的状态，例如：focus，因此它们之间也没有切换

：：before/：：after通常被称为伪元素，而不是类。为了使它们与实际的伪类之间的区别更加明显，语法已经更新，以便现在使用双冒号（可选），您仍然可以使用旧的单冒号语法

您实际需要的是，当实际元素处于：focus状态时，将由：创建的伪元素赋予不同的不透明度，因此您只需要这样做：将&:focus置于&:after{…}内，这样最终的选择器将成为。输入容器：after:focus

---

不要担心顺序-。输入容器：焦点：after可能看起来更符合逻辑，毕竟真正的元素处于焦点状态，而不是伪元素-但这里的顺序并不重要，两者都达到了相同的效果。

噢，对了：after和：：before是伪元素，我的错。好的但是如何设置输入动画：after:focus？有可能吗？我不明白你想问什么。您希望在什么事件上实际设置动画、过渡和动画？我假设您希望在真实元素具有焦点时更改伪元素的不透明度？然后输入：after:focus是指定不透明度的正确选择器。以及为伪元素的正常状态或仅此选择器添加的转换（如果希望转换仅在一个方向上发生），或者如果希望指定不同的转换参数，则为两个方向都添加转换。

.input-container {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    border: solid 2px $light;
    border-radius: 2em;
    margin-bottom: 1.5625em;


    &:after{
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        box-shadow: 0 0 20px white;
        border-radius: 2em;
        pointer-events: none;
        opacity: 0; //animate this
        transition: opacity 1s; // using this
    }

    &:focus{
        opacity: 1; //to this
    }
}