css 動畫使用

使用CSS動畫 (Using CSS Animations)

CSS animations add beauty to the webpages and make transitions from one CSS style to the other beautiful.

CSS動畫可以使網頁更加美觀，并可以從一種CSS樣式過渡到另一種CSS樣式。

To create a CSS animation sequence, we have different sub-properties in the animation property in CSS :

要創建CSS動畫序列，我們在CSS的animation屬性中具有不同的子屬性：

• animation-delay

  animation-delay

• animation-direction

  animation-direction

• animation-duration

  animation-duration

• animation-iteration-count

  animation-iteration-count

• animation-name

  animation-name

• animation-play-state

  animation-play-state

• animation-timing-function

  animation-timing-function

• animation-fill-mode

  animation-fill-mode

示例CSS動畫序列可在屏幕上移動文本 (Sample CSS animation sequence to move text across the screen)

In the HTML part we will have a div with class container and a h3 with the text Hello World:

在HTML部分，我們將有一個帶類container的div和一個帶文本Hello World的h3 ：

<div class="container"><h3> Hello World ! </h3> </div>

For the CSS part:

對于CSS部分：

.container {/* We will define the width, height and padding of the container *//* The text-align to center */width: 400px;height: 60px;padding: 32px;text-align: center;/* Use the animation `blink` to repeat infinitely for a time period of 2.5s*/animation-duration: 2.5s; animation-iteration-count: infinite;animation-direction: normal; animation-name: blink; /* The same can be written shorthand as *//* -------------------------------------- *//* animation: 2.5s infinite normal blink; */ } @keyframes blink {0%, 100% { /* Defines the properties at these frames */background: #333;color: white;}50% { /* Defines the properties at these frames */background: #ccc;color: black;border-radius: 48px;} }

有關CSS動畫的更多信息： (More information on CSS Animations:)

• A Quick intro to CSS Animations

  CSS動畫快速入門

翻譯自: https://www.freecodecamp.org/news/how-to-use-animations-in-css/

css 動畫使用

總結

以上是生活随笔為你收集整理的css 动画使用_如何在CSS中使用动画的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。