CSS动画学习笔记

发布时间：2024-11-08 18:05:38

CSS动画学习笔记

CSS动画概述

CSS动画（CSS Animations）允许通过指定关键帧来创建复杂的动画效果。

与过渡的区别：

transition 需要用户交互触发，且只能定义起始与结束状态。 animation 支持自动播放动画，且可以自定义多个关键帧。

CSS动画语法

animation属性（简写形式）

.box {
    animation: fadeIn 2s ease-in-out infinite alternate;
}

animation的各个属性：

animation-name：定义关键帧动画的名称。 animation-duration：动画持续时间。 animation-timing-function：时间曲线（如ease, linear, ease-in-out）。 animation-delay：动画延迟时间。 animation-iteration-count：动画播放次数（如infinite无限循环）。 animation-direction：动画方向。 animation-fill-mode：定义动画前后的样式状态。

@keyframes关键帧

使用 @keyframes 定义动画关键帧：

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

关键帧百分比写法

@keyframes fadeIn {
    0% { opacity: 0; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

CSS动画属性详解

1. animation-duration

定义动画播放的时间。 单位：秒（s）或毫秒（ms）。 

animation-duration: 3s;

2. animation-timing-function

控制动画速率。 可用值： ease（默认） linear ease-in ease-out ease-in-out 

animation-timing-function: ease-in;

3. animation-delay

延迟动画的开始时间。 

animation-delay: 2s;

4. animation-iteration-count

控制动画播放次数。 infinite 表示无限次播放。 

animation-iteration-count: infinite;

5. animation-direction

控制动画播放方向。 可用值： normal（默认，正向播放） reverse（反向播放） alternate（奇数次正向，偶数次反向） alternate-reverse（奇数次反向，偶数次正向） 

animation-direction: alternate;

6. animation-fill-mode

控制动画前后的样式状态。 可用值： none（默认） forwards（动画结束时保持最后状态） backwards（动画延迟前应用初始状态） both（结合forwards和backwards） 

animation-fill-mode: both;

多个动画同时应用

可以使用逗号分隔多个动画。

.box {
    animation: fadeIn 2s ease-in-out, moveRight 3s ease-out;
}

@keyframes moveRight {
    from { transform: translateX(0); }
    to { transform: translateX(100px); }
}

CSS动画示例

旋转动画

.box {
    width: 100px;
    height: 100px;
    background: red;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

呼吸灯效果

.circle {
    width: 100px;
    height: 100px;
    background: blue;
    border-radius: 50%;
    animation: breathing 3s ease-in-out infinite;
}

@keyframes breathing {
    0% { opacity: 0.5; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1); }
    100% { opacity: 0.5; transform: scale(0.8); }
}

总结

CSS动画通过animation属性和@keyframes实现平滑动画效果。 可以通过animation-timing-function自定义动画速率。 支持多种动画方向、次数与延迟控制。

评论数：0