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 theanimationproperty 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 adivwith classcontainerand ah3with the textHello 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动画快速入门
翻译自: /news/how-to-use-animations-in-css/
css 动画使用
