【CSS3】CSS3 动画 ① ( CSS3 动画简介 | CSS3 动画实现步骤 | 动画定义 | 代码示例 )
在CSS3中，我们可以使用@keyframes规则创建动画，并使用animation属性将其应用到元素上。
以下是创建CSS3动画的基本步骤：
- 使用
@keyframes规则定义动画。 - 使用
animation-name属性引用动画名称。 - 设置动画时长
animation-duration。 - 设置动画的其他属性，如延迟
animation-delay、重复次数animation-iteration-count、是否逆向animation-direction等。
示例代码：
/* 定义一个名为 'fadeIn' 的动画 */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* 应用动画到具体元素 */
.element {
animation-name: fadeIn;
animation-duration: 2s;
animation-fill-mode: forwards; /* 动画结束后保持最后一帧的样式 */
}在这个例子中，我们创建了一个淡入动画，使用了opacity属性进行透明度的变化，并将其应用到了类名为element的HTML元素上。动画从完全透明(opacity: 0;)开始，在2秒内逐渐过渡到完全不透明(opacity: 1;)。
评论已关闭