如何在 CSS3 中實現淡出效果：關鍵影格動畫與轉場？-css教學-PHP中文網

首頁

web前端

css教學

如何在 CSS3 中實現淡出效果：關鍵影格動畫與轉場？

Linda Hamilton

Oct 27, 2024 am 09:46 AM

How to Achieve a Fade-Out Effect in CSS3: Keyframe Animations vs. Transitions?

CSS3 轉場 - 淡出效果

在 CSS3 中，可以透過使用關鍵影格動畫來實現淡出效果。但是，確保正確配置動畫設定以達到所需的效果非常重要。

在提供的程式碼中，上滑動畫不起作用，因為頂部屬性正在動畫化，這會垂直移動元素離開頁面。若要實現淡出效果，應將不透明度屬性設為動畫。以下是程式碼的更新版本：

<code class="css">@keyframes slideup {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

.dummy-wrap {
  animation: slideup 2s;
  -moz-animation: slideup 2s;
  -webkit-animation: slideup 2s;
  -o-animation: slideup 2s;
}</code>

或者，可以使用更簡潔的CSS3 過渡方法：

<code class="css">.visible {
  visibility: visible;
  opacity: 1;
  transition: opacity 2s linear;
}

.hidden {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 2s, opacity 2s linear;
}</code>

要使用此方法淡出元素，只需添加元素的隱藏類：

<code class="css"><div class="success-wrap successfully-saved visible">Saved</div></code>

這將在2 秒內將元素轉換為opacity: 0，從而創建淡出效果。請注意，visibility: hide 添加了延遲，允許淡出動畫在元素隱藏之前完成。

以上是如何在 CSS3 中實現淡出效果：關鍵影格動畫與轉場？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

PHP教程

1651

276

NYT連接提示和答案

264

836

抖音等級價格表

Related knowledge

如何使用CSS創建玻璃塑料效應 Aug 22, 2025 am 07:54 AM

要創建CSS的玻璃擬態效果，需使用backdrop-filter實現背景模糊，設置半透明背景如rgba(255,255,255,0.1)，添加細微邊框和陰影以增強層次感，並確保元素背後有足夠視覺內容；1.使用backdrop-filter:blur(10px)模糊背景內容；2.採用rgba或hsla定義透明背景控制通透程度；3.添加1pxsolidrgba(255,255,255,0.3)邊框及box-shadow提升立體感；4.確保容器具有豐富背景如圖片或紋理以呈現模糊穿透效果；5.為兼容舊瀏

如何在CSS中創建虛線邊框 Aug 15, 2025 am 04:56 AM

使用CSS創建點狀邊框只需設置border屬性為dotted即可，例如“border:3pxdotted#000”可為元素添加3像素寬的黑色點狀邊框，通過調整border-width可改變點的大小，較寬的邊框產生更大的點，且可單獨為某一邊設置點狀邊框如“border-top:2pxdottedred”，點狀邊框適用於div、input等塊級元素，常用於焦點狀態或可編輯區域以提升可訪問性，需注意顏色對比度，同時區別於dashed的短線樣式，dotted呈現圓形點狀，該特性在所有主流瀏覽器中均被廣泛

如何更改CSS中的列表樣式 Aug 17, 2025 am 10:04 AM

要更改CSS列表樣式，首先使用list-style-type改變項目符號或編號樣式，1.使用list-style-type設置ul的項目符號為disc、circle或square，ol的編號為decimal、lower-alpha、upper-alpha、lower-roman或upper-roman，2.用list-style:none完全移除標記，3.使用list-style-image:url('bullet.png')替換為自定義圖像，4.通過list-style-position:in

如何使用CSS創建垂直線 Aug 11, 2025 pm 12:49 PM

使用帶邊框的div可快速創建垂直線，通過設置border-left和height定義樣式和高度；2.利用::before或::after偽元素可在無額外HTML標籤的情況下添加垂直線，適合裝飾性分隔；3.在Flexbox佈局中，通過設置divider類的寬度和背景色，可實現彈性容器間的自適應垂直分隔線；4.在CSSGrid中，將垂直線作為獨立列（如auto寬度列）插入網格佈局，適用於響應式設計；應根據具體佈局需求選擇最合適的方法，確保結構簡潔且易於維護。

如何使用CSS實現黑暗模式主題 Aug 22, 2025 am 09:55 AM

實現暗黑模式有兩種主要方式：一是使用prefers-color-scheme媒體查詢自動適配系統偏好，二是通過JavaScript添加手動切換功能。 1.使用prefers-color-scheme可自動根據用戶系統設置應用暗黑主題，無需JavaScript，只需定義媒體查詢內的樣式；2.實現手動切換需定義light-theme和dark-themeCSS類，添加切換按鈕，並用JavaScript管理主題狀態和localStorage保存用戶偏好；3.可結合兩者，在頁面加載時優先讀取localSt

如何在CSS中使用網格 - 板序列 Aug 22, 2025 am 07:56 AM

Grid-template-areaspropertyallowsdevelopspocrockearteeintuitive，ReadableLayoutsByDefiningNemedGridareas; everystringrepresentsarowresentsarowandeashwordeachwordaColumnCell，withGrid-areanamesonamesonameSonemaneMeAnemesonChildEllementsMatchingThoseNoseNementsMatchingTheSoseIntheTemplate，suchans'headerheaderheaderheaderheaderheaderheaderheaderheader for for for for for for

如何在CSS中使用過濾器屬性 Aug 11, 2025 pm 05:29 PM

TheCSSfilterpropertyallowsvisualeffectslikeblur,brightness,andgrayscaletobeapplieddirectlytoHTMLelements.1)Usethesyntaxfilter:filter-function(value)toapplyeffects.2)Combinemultiplefilterswithspaceseparation,e.g.,blur(2px)brightness(70%).3)Commonfunct

如何更改CSS中的光標 Aug 16, 2025 am 05:00 AM

Usebuilt-incursortypeslikepointer,help,ornot-allowedtoprovideimmediatevisualfeedbackfordifferentinteractiveelements.2.ApplycustomcursorimageswiththecursorpropertyusingaURL,optionallyspecifyingahotspotandalwaysincludingafallbacklikeautoorpointer.3.Fol

See all articles

如何在 CSS3 中實現淡出效果：關鍵影格動畫與轉場？

熱AI工具

Undress AI Tool

Undresser.AI Undress

AI Clothes Remover

ArtGPT

Stock Market GPT

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題