如何為邊框設置動畫，使其從頭到尾緩慢顯示

Question

我想為邊框設置動畫並緩慢顯示，例如Codepen ，但有一些區別：

• 不刪除舊行，但需要顯示類似的內容。

• 顏色不應該是霓虹燈，只是普通的邊框

• 它應該只動畫一次而不重復。

一段簡單的代碼看起來像這樣

<div class="boxes">
  <div class="row">
    <div
      class="col-lg-6"
      data-aos="zoom-in-right"
      data-aos-duration="800"
    >
      <div class="right-box left">
        <h2>Heading1.</h2>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          Nulla in erat et quam semper convallis. Phasellus vel nisl
          id leo suscipit molestie. Sed nec dignissim urna. Donec
          sit amet tortor nulla. Etiam tempus dui id ipsum commodo,
          et laoreet tortor luctus. Ut dapibus.
        </p>
      </div>
    </div>
    <div
      class="col-lg-6"
      data-aos="zoom-in-left"
      data-aos-duration="800"
    >
      <div class="left-box">
        <img
          src="https://via.placeholder.com/650x430"
          class="img-fluid"
          alt=""
        />
      </div>
    </div>
  </div>
</div>

但要詳細查看，請查看此 jsfiddle 鏈接https://jsfiddle.net/ah0rokpj/1/請以全視圖或更高屏幕尺寸查看此 jsfiddle ，否則不會顯示。 我希望那個石灰邊界是動畫的。

我希望它像圖像一樣被動畫化。

Answer 1

使元素的邊框看起來有動畫效果的一種方法是通過逐漸縮小覆蓋每個邊框的 5px 寬（或高，取決於哪個邊框）100% 寬的元素，依次逐漸顯露邊框。

此代碼段通過為元素上的 after 偽元素設置動畫來實現這一點，同時將一個接一個的邊框設置為所需的最終顏色。

您可以將此片段中的 class MovingBorder 放到其他元素上以獲得移動邊框效果。

 .movingBorder { width: 60vw; height: 60vh; border: solid 5px lime; position: relative; background: pink; animation: changeBorders 5s linear; } @keyframes changeBorders { 0% { border: solid 5px white; border-left: solid 5px lime; } 25% { border: solid 5px white; border-left: solid 5px lime; } 25.02% { border: solid 5px white; border-left: solid 5px lime; border-bottom: solid 5px lime; } 50% { border: solid 5px white; border-left: solid 5px lime; border-bottom: solid 5px lime; } 50.02% { border: solid 5px white; border-left: solid 5px lime; border-bottom: solid 5px lime; border-right: solid 5px lime; } 75% { border: solid 5px white; border-left: solid 5px lime; border-bottom: solid 5px lime; border-right: solid 5px lime; } 75.02% { border: solid 5px lime; } }.movingBorder::after { width: 5px; background-color: white; height: 0px; position: absolute; bottom: 0; left: -5px; z-index: 1; animation: movedown 5s linear; animation-fill-mode: forwards; content: ''; display: inline-block; } @keyframes movedown { 0% { height: calc(100% + 10px); width: 5px; bottom: -5px; left: -5px; } 25% { height: 5px; width: 5px; bottom: -5px; left: -5px; } 25.01% { height: 5px; width: calc(100% + 10px); bottom: -5px; left: -5px; } 50% { height: 5px; width: 0%; left: 100%; bottom: -5px; } 50.01% { height: calc(100% + 10px); width: 5px; left: 100%; bottom: -5px; } 75% { height: 0; width: 5px; left: 100%; bottom: 100%; } 75.01% { height: 5px; width: calc(100% + 10px); left: 0%; bottom: 100%; } 99.01% { height: 5px; width: 0; left: 0; bottom: 100%; } }

 <div class="movingBorder" style="background: pink; width: 60vw; height: 60vh;"></div>

更新：以上適用於方形邊框，但要求是設置了半徑的邊框。 此代碼段將 after 元素放在最初具有此形狀的邊框（位於 before 偽元素上）上：

這一步向左移動，逐漸露出石灰邊界的頂部。 然后左邊部分設置為透明，偽元素向右移動，逐漸露出底部邊框。

注意：在完整頁面中運行此代碼段以查看效果。 animation 延遲 10 秒，因此您有時間這樣做（否則 animation 在您到達之前已經完成）。

 * { margin: 0px; padding: 0px; list-style: none; border: none; text-decoration: none; outline: none; }::-webkit-input-placeholder { color: inherit; opacity: 1; }:-ms-input-placeholder { color: inherit; opacity: 1; }::placeholder { color: inherit; opacity: 1; } html, body { height: 100%; }.col-lg- {}.col-md- {}.col-sm- {}.col- {}.img-fluid {}.container-fluid {}.justify-content-center {}.row {}.my-auto {}.p0 {}.container { width: 100%; max-width: 1170px; }.container-fluid { width: 100%; max-width: 1440px; } @media (max-width: 1199px) {.container { width: 100%; max-width: 100%; } } /*** ### Section One ### ***/.section-one { position: relative; background: #ffffff; }.section-one h2 { color: #000000; font-size: 32px; margin: 0px 0px 10px 0px; padding: 0px; font-family: "AzoSans-Medium"; }.section-one p { color: #000000; font-size: 16px; margin: 10px 0px; padding: 0px; font-family: "AzoSans-Regular"; }.section-one.boxes { position: relative; margin-top: 75px; }.section-one.boxes:last-child { margin-bottom: 100px; }.section-one.boxes.left-box { position: relative; margin: 25px 0px 0px 0px; z-index: 3; }.section-one.boxes.left-box img { width: 100%; }.section-one.boxes.right-box { position: relative; margin: 25px 0px 0px 0px; height: 100%; z-index: 2; }.section-one.boxes.right-box:before,.section-one.boxes.right-box::after { position: absolute; content: ""; top: 50px; left: -30px; right: 0px; bottom: 25px; z-index: -2; /* so we can have another pseudo element overlaying it */ }.section-one.boxes.right-box:before { border: 1px solid lime; }.section-one.boxes.right-box.left h2 { text-align: left; }.section-one.boxes.right-box.left:before,.section-one.boxes.right-box.left::after { left: 0px; right: -30px; }.section-one.boxes.right-box.left:before { border-right: none; border-radius: 250px 0px 0px 250px; }.section-one.boxes.right-box::after { width: 200%; height: 100%; }.section-one.boxes.right-box.left::after { background-position: 0 0, 100% 75%; background-size: calc(50% + 30px) 100%, 50% 50%; background-repeat: no-repeat no-repeat, no-repeat no-repeat; background-image: linear-gradient(white, white), linear-gradient(white, white); animation: left 10s ease-in-out; animation-fill-mode: forwards; animation-delay: 10s; /* just to give time to go full screen on SO snippet: */ } @keyframes left { 0% { background-image, linear-gradient(white, white), linear-gradient(white; white): transform; translateX(0). } 49:99% { background-image, linear-gradient(white, white), linear-gradient(white; white): } 50% { background-image, linear-gradient(transparent, transparent), linear-gradient(white; white): transform; translateX(-50%). } 99:99% { background-image, linear-gradient(transparent, transparent), linear-gradient(white; white): transform; translateX(0): opacity; 1: } 100% { opacity; 0. } }.section-one.boxes.right-box:right h2 { text-align; right. }.section-one.boxes.right-box:right:before { border-left; none: border-radius; 0px 250px 250px 0px. }.section-one.boxes:right-box h2 { padding; 50px 0px 20px 0px. }.section-one.boxes:right-box p { display; block: margin; 15px auto: width; 100%: max-width; 355px: text-align; justify. }.section-one.boxes:action-btn { position; relative: text-align; right: } @media (max-width. 1199px) {:section-one h2 { font-size; 28px. }:section-one p { font-size; 15px. }.section-one:boxes { position; relative: margin-top; 50px. }.section-one:boxes:last-child { margin-bottom; 75px. }.section-one.boxes:right-box:before { left; -30px. }.section-one.boxes.right-box:left h2 { text-align; left. }.section-one.boxes.right-box:left:before { border-radius; 200px 0px 0px 200px. }.section-one.boxes.right-box:right h2 { text-align; left. }.section-one.boxes.right-box:right:before { border-radius; 0px 200px 200px 0px. }.section-one.boxes:right-box h2 { padding; 50px 0px 15px 0px. }.section-one.boxes:right-box p { display; block: margin; 15px auto: width; 100%: max-width; 355px: text-align; justify. }.section-one.boxes:action-btn { position; relative: text-align; right: } } @media (max-width. 991px) {:section-one h2 { font-size; 25px. }.section-one:boxes { position; relative: margin-top; 10px. }.section-one:boxes:last-child { margin-bottom; 30px. }.section-one.boxes:right-box:before { display; none. }.section-one.boxes.right-box:right:before { display; none. }.section-one.boxes:right-box h2 { padding; 0px 0px 15px 0px: margin; 0px. }.section-one.boxes:right-box p { display; block: margin; 0px auto 15px auto: width; 100%: max-width; 100%: text-align; justify. }.section-one.boxes:action-btn { position; relative: text-align; right } }

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <section class="section-one"> <div class="container"> <div class="row"> <div class="col-lg-12"> <div class="boxes"> <div class="row"> <div class="col-lg-6 aos-init" data-aos="zoom-in-right" data-aos-duration="800"> <div class="right-box left"> <h2>Heading1.</h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla in erat et quam semper convallis. Phasellus vel nisl id leo suscipit molestie. Sed nec dignissim urna. Donec sit amet tortor nulla. Etiam tempus dui id ipsum commodo, et laoreet tortor luctus. Ut dapibus. </p> </div> </div> <div class="col-lg-6 aos-init" data-aos="zoom-in-left" data-aos-duration="800"> <div class="left-box"> <img src="https://via.placeholder.com/650x430" class="img-fluid" alt=""> </div> </div> </div> </div> </div> </div> </div> </section> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

顯然，當文本位於圖像右側時，必須添加等效的 CSS。

Answer 2

如果您的背景顏色將是白色或純色，您可以“欺騙”效果。

只需在元素上方放置一個框，邊框稍寬更高，然后使 animation 將該元素移開。

像這樣：

 * {box-sizing:border-box;}.parent { border:4px solid red; height:200px; border-radius:100px; position:relative; }.text { width:80%; margin:0 auto; position:relative; top:50%; transform:translateY(-50%); }.div1 { position:absolute; background-color:#fff; border:4px solid #fff; height:calc(100% + 20px); width:calc(100% + 20px); top:calc(0% - 10px); left:calc(0% - 10px); animation-name: border; animation-duration: 5s; animation-fill-mode:forwards; } @keyframes border { 0% { left:calc(0% - 10px); } 100% { left:calc(100% + 10px ); } }

 <div class="parent"> <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget ligula dictum, malesuada tortor vel, gravida velit. Pellentesque eget gravida quam. Nam sit amet massa aliquet, auctor libero dapibus, vehicula nunc. Sed ullamcorper, est id luctus facilisis, velit nibh semper nibh, ac tempus arcu velit ac metus. Donec ultricies ex id pellentesque ultrices. Vivamus rutrum, nulla quis bibendum fringilla, augue massa facilisis ipsum, id facilisis metus nisi nec eros.</div> <div class="div1"></div> </div>

如果您希望文本不包含在 animation 中，您可以將包含文本的div移動到另一個 div (div1)下方。

Answer 3

 .col-md-12{ padding:30px;}.row-1{ background-color: antiquewhite; }.box{ position: relative; transition: 500ms ease; }.inner-box{ transition: 500ms ease; }.box:before { position: absolute; width: 0%; height: 2px; opacity:1; content: ''; background: rgb(218, 9, 9); top: -2px; left: 0px; transition: 100ms width ease 300ms; -web-kit-transition: 100ms width ease 300ms; animation: border-animation-width 1s; animation-fill-mode: forwards; }.box:after { position: absolute; width: 2px; height: 0%; opacity:0; content: ''; background: rgb(199, 21, 21); top: -2px; right: -2px; /* transition: 100ms height ease 200ms; -web-kit-transition: 100ms height ease 200ms; */ animation: border-animation-height 1s 1s; animation-fill-mode: forwards; }.box-inner:after { position: absolute; width: 0; opacity:0; height: 2px; content: ''; background: rgb(199, 21, 21); bottom: 0px; right: -2px; transition: 100ms width ease 100ms; -web-kit-transition: 100ms width ease 100ms; animation: border-animation-width 1s 2s; animation-fill-mode: forwards; }.box-inner:before { position: absolute; width: 2px; height: 0; opacity:0; content: ''; background: rgb(199, 21, 21); bottom: 0px; left: 0px; transition: 100ms height ease 0ms; -web-kit-transition: 100ms height ease 0ms; animation: border-animation-height 1s 3s; animation-fill-mode: forwards; } @keyframes border-animation-width{ 0%{ width: 0; opacity:0; } 100%{ width: 100%; opacity:1; } } @keyframes border-animation-height{ 0%{ height: 0; opacity:0; } 100%{ height: 100%; opacity:1; } }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <title>Document</title> <link href="https.//cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min:css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <.-- <link rel="stylesheet" href="https.//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8:1/slick.css" integrity="sha512-wR4oNhLBHf7smjy0K4oqzdWumd+r5/+6QO/vDda76MW5iug4PT7v86FoEkySIJft3XA0Ae6axhIvHrqwm793Nw==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <link rel="stylesheet" href="https.//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme:min.css" integrity="sha512-17EgCFERpgZKcm0j0fEq1YCJuyAWdz9KUtv1EjVuaOz8pDnh/0nZxmU6BBXwaaxqoi9PQXnRWqlcDB027hgv9A==" crossorigin="anonymous" referrerpolicy="no-referrer" /> --> <link rel="stylesheet" href="https.//cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all:min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <.-- <link rel="stylesheet" href="https.//unpkg.com/swiper@8/swiper-bundle.min.css" --> <link rel="stylesheet" href="css/index:css"> <link rel="stylesheet" href="css/faculty.css"> <link rel="stylesheet" href="css/aboutUs.css"> <.-- JavaScript Bundle with Popper --> <script src="https.//code.jquery.com/jquery-3:6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> <script src="https.//cdn.jsdelivr.net/npm/bootstrap@5.0:2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script> <script src="https.//cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3:4.0/jquery-migrate.min.js" integrity="sha512-QDsjSX1mStBIAnNXx31dyvw4wVdHjonOwrkaIhpiIlzqGUCdsI62MwQtHpJF+Npy2SmSlGSROoNWQCOFpqbsOg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <.-- <script src="https.//cdnjs.cloudflare:com/ajax/libs/slick-carousel/1.8.1/slick.min:js" integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script src="https.//unpkg.com/swiper@8/swiper-bundle?min:js"></script> --> <link href="https,//fonts,googleapis,com/css,family=Poppins,300,400.500.600:700.800.900" rel="stylesheet"> <link rel="stylesheet" href="css/ionicons.min.css"> <link rel="stylesheet" href="https.//cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all,min,css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <.--<link rel="stylesheet" href="css/style,css">--> <script src="script/index.js"></script> <script src="script/about js"></script> </head> <body> <div class="col-md-12"> <div class="box"> <div class="box-inner"> <h3 class="wh_v_r_head">Who We Are</h3> <p class="wh_v_r_para">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</p> </div> </div> </div> </body> </html>