null

如果我手动将height和width写入过渡，一切都能正常工作，但显然这会破坏使用变量的目的，所以我希望计算能正常工作。

@keyframes panIn {
                        from { width: var(--actorWidth); } 
                        to { width: calc(var(--actorWidth) + 200); }

                        from { height: var(--actorHeight);} 
                        to { height: calc(var(--actorHeight) + 200); }
            
                    }

下面的代码用于调试目的，注意您将不得不将mp4文件名更改为一些可访问的，谢谢！

CSS

                    :root {
                        --actorWidth: 400px;
                        --actorHeight: 400px;
                    }

                    .actor {
                        height: var(--actorHeight);
                        width: var(--actorWidth);
                        margin-left: 200px;
                    }

                .pan {
                        position: relative;
                        animation: panIn 5s 1;
                        animation-timing-function: ease-in;
                        animation-fill-mode: forwards;
                    }

                    @keyframes panIn {
                        from { width: var(--actorWidth); } 
                        to { width: calc(var(--actorWidth) + 200); }
                    }

HTML

                    <video id="RobertDeNiro" class="actor pan" muted preload="auto">
                    <source  src="./RoberyDeNiro.mp4" type="video/mp4" alt="">
                    Your browser does not support the video tag.
                    </video>