我如何在CSS shr中缩小线路

问题描述 投票:0回答:1
我有一条纯白色的水平线。我目前有此CSS将其动画起来以将其缩小为一无所有:

HTML: <div class="container"> <div class="white-line"></div> </div> CSS: .container { width: 530px; height: 530px; background-color: black .white-line { position: absolute; top: 50%; left: 50%; width: 5px; height: 3px; background-color: white; transform: translate(-50%, -50%); opacity: 0; animation: expandLine 0.3s ease-in-out forwards 8.2s, moveUp 1.5s ease-in-out forwards 8.41s, contractLine 0.5s ease-in-out forwards 10.3s; z-index: 1000; } /* Expanding Horizontal Line */ @keyframes expandLine { 0% {width: 5px; opacity: 1;} 100% {width: 100%; opacity: 1;} } /* Moving Line Up */ @keyframes moveUp { 0% {top: 50%;} 100% {top: 0%;} } @keyframes contractLine { 0% {width: 100%;} 100% {width: 0;} }
,这使得它从左右向右缩小到线的中心。但是,我希望线从左到右缩小。

我做错了什么?

html css
1个回答
0
投票
contractLine

left

width

body { margin: 0; background: black; } .white-line { position: absolute; top: 50%; left: 50%; width: 5px; height: 10px; background-color: red; transform: translate(-50%, -50%); animation: expandLine 0.3s ease-in-out forwards 1.2s, moveUp 1.5s ease-in-out forwards 1.41s, contractLine 0.5s ease-in-out forwards 3.3s; z-index: 1000; } @keyframes expandLine { 100% {width: 100%; opacity: 1;} } @keyframes moveUp { 100% {top: 0%;} } @keyframes contractLine { 100% {width: 0; left: 100%;} }
    
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.