css3 动画

最新推荐文章于 2024-07-22 19:12:50 发布

Liwker

最新推荐文章于 2024-07-22 19:12:50 发布

阅读量228

点赞数

分类专栏：学习簿文章标签： css3 css

本文链接：https://blog.csdn.net/qq_36146167/article/details/113054291

版权

本文介绍了CSS3的动画原理和应用，通过@keyframes设置关键帧，结合animation属性实现各种动态效果。详细讲解了animation-name、animation-duration、animation-timing-function等属性，并通过米兔、奔跑的小男孩、弹力小球三个实例展示动画效果。

摘要由CSDN通过智能技术生成

动画

动画和过渡类似，都是可以实现一些动态的效果
不同的是过渡需要在某个属性发生变化时，才会触发
而动画可以自己触发动态效果

设置动画效果，必须先要设置一个关键帧，关键帧里设置了动画每一步的效果

@keyframes

@keyframes name {} 设置关键帧

可选值：

from 表示动画的开始状态
to 表示动画的结束状态
% 将动画过程百分化，可以设置 n 个状态，0% 等于 from，100% 等于 to，50% 时间一半的状态

animation 属性

animation-name
animation-duration
animation-delay
animation-timing-function
animation-iteration-count
animation-direction
animation-play-state
animation-fill-mode

animation-name

要对当前元素生效的关键帧的名字

animation-duration

一次动画的执行时间

animation-delay

动画开始前的延迟，默认为 0

animation-timing-function

和 transition 一样的时间函数，默认为 ease

animation-iteration-count

动画执行的次数
可选值：

n 次数
infinity 无限次数

animation-direction

指定动画运行的方向
可选值：

normal 默认值，从 from 向 to 运行，每次都是这样
reverse 反向，从 to 向 from 运行，每次都是这样
alternate 轮流交替，先从 from - to，再 to - from，反复如此
alternate-reverse 反向轮流，先从 to - from，再 from - to，反复如此

animation-play-state

设置动画的执行状态
可选值：

running 默认值动画执行
paused 动画暂停

这个属性用于控制动画的执行状态，比如 hover 时就执行，否则就暂停，等等

animation-fill-mode

动画的填充模式
可选值：

none 默认值动画执行完毕元素回到原来的状态
forwards 动画执行完毕元素会停留在 动画结束 的状态
不一定会是 to 的状态，如是偶数次，又设置了 alternate 交替，那么结束时会是 form 的状态
backwards 在动画延迟等待时，元素就会处于 动画开始 的状态，如果没有设置延迟，那么就没效果
和上面一样，如果设置了 reverse，那么动画一开始就是 to 的状态
both 结合了 forwards 和 backwards，延迟等待元素处于动画开始，动画结束后停留在动画结束的状态

animation

和过渡 transition 一样可以简写，延迟时间必须写在执行时间之后

.box2{
   
    background-color: #bfa;
    animation: test 2s 2 1s alternate-reverse both;
    /* 执行test动画，一次2s完成，执行2次，延迟1s开始，反向交替执行，延迟等待元素处于 动画开始，动画结束后停留在 动画结束的状态 */
}
@keyframes test {
   
    from{
   
        margin-left: 0;
        background-color: orange;
    } 

    to{
   
        background-color: red;
        margin-left: 700px;
    }
}

效果

动画1

练习

米兔

上次使用了过渡效果来使米兔动起来，详见 css3 过渡

这次，就用 animation 来实现，像这种把每张画都放在一张图，称作 sprite animation（精灵动画）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>米兔</title>
    <style>
        .mitu {
    
            width: 132px;
            height: 271px;
            margin: 100px auto;
            background-image: url("https://gitee.com/Liwker/picture/raw/master/img/20210106145912.png");
            background-position: 0 0;

            animation-name: move;
            /* 一个周期为 0.6s */
            animation-duration: 0.6s;
            /* 每3(n-1)步为一个周，但这里是移动的整张图，所以就是 n */
            animation-timing-function: steps(4 ,end);
            /* 动画执行无数次 */
            animation-it