css 动画使用_如何在CSS中使用动画

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 动画使用