HTML5 CSS动画 animation使用

最新推荐文章于 2024-01-14 09:41:07 发布

我脾气呢

最新推荐文章于 2024-01-14 09:41:07 发布

阅读量894

点赞数

文章标签： css html5 css3

本文链接：https://blog.csdn.net/qq_45690359/article/details/128283280

版权

首先看一下页面的布局

<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>

animation（动画）和transition（过渡）其实差不多，就是一个自己会动（动画），一个需要触发才可以动。

动画的定义（@keyframes（关键帧））
设置动画效果，必须要先设置一个关键帧，关键帧设置了动画的每一个步骤，最简单的关键帧的定义如下：(定义在css文件或者在style标签中，moveToRight是自己取的名字，类似于我们的函数名，需要被调用）

        @keyframes moveToRight {
            from{
                margin-left: 0%;
            }
            to{
                margin-left: 100%;
            }
        }

也可以写成：

0% 100%都是可以调整的也可以25% 50% 75%都是可以的

数值自己定根据自己想要的效果进行设置（类似）

        @keyframes moveToRight {
            0%{
                margin-left: 0%;
            }
            100%{
                margin-left: 100%;
            }
        }

        @keyframes moveToRight {
            0%{
                margin-left: 0%;
            }
            25%{
                 margin-left: 33%;            
            }
            50%{
                 margin-left: 50%;
            }
            75%{
                 margin-left: 77%;
            }
            100%{
                margin-left: 100%;
            }
        }

动画的调用（使用）

只需要使用animation-name:关键帧名；来使用即可

.box2{
            width: 100px;
            height: 100px;
            background-color: orange;
            animation-name: moveToRight;
            animation-duration: 2s;
        }

animation也可以使用

animation-duration定义动画时间，
animation-delay设置延迟时间，
animation-timing-function设置动画的时序函数

注意：动画不需要指定动画的属性，可以直接让他过渡。
演示代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画</title>
    <style>
        .box1{
            width: 600px;
            height: 600px;
            background-color: grey;
            overflow: hidden;
        }

        .box2{
            width: 100px;
            height: 100px;
            background-color: orange;
            animation-name: moveToRight;
            animation-duration: 2s;
        }

        @keyframes moveToRight {
            from{
                margin-left: 0%;
            }
            to{
                margin-left: 100%;
            }
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>
</html>

显示：（自动滑动，因为设置了100%，所以会直接滑动到外边，然后被overflow:hidden所隐藏）

animation-iteration-count（动画执行的次数）
可选值：

N（常数，执行N次）
inifinite（无数次）

animation-direction(动画执行的方向）
可选值：

normal：每次从from到to（默认）
reverse：每次都从to到from
alternate：先from到to，然后再从to到from 反复
alternate-reverse：从to到from，然后再从from到to 反复

animation-play-state（动画的执行状态）
可选值：

running：动画执行（默认）
paused：动画暂停

animation-fill-mode（动画的填充模式）
可选值：

none：动画执行完毕回到原来位置（默认）
forward：动画执行完毕，停止在动画结束的位置
backwards：动画延时等待时，元素会处于开始位置
both：结合了forward和backwards。

animation的简写

			/*关键帧名为moveToRight*/
            animation-name: moveToRight;
            /*每次运动时常为2s*/
            animation-duration: 2s;
            /*移动三次*/
            animation-iteration-count: 3;
            /*延迟2s*/
            animation-delay: 2s;
            /*运动方向先from到to，然后再从to到from 反复*/
            animation-direction: alternate;
            /*动画执行完毕，停止在动画结束的位置*/
            animation-fill-mode: forwards;

可以简写为:

            animation: moveToRight 2s infinite 2s alternate forward;

我脾气呢

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML5 CSS动画 animation使用

h5 animation的使用
复制链接

扫一扫

HTML5 CSS动画 animation使用

动画的调用（使用）

animation-iteration-count（动画执行的次数） 可选值：

animation-direction(动画执行的方向） 可选值：

animation-play-state（动画的执行状态） 可选值：

animation-fill-mode（动画的填充模式） 可选值：

animation的简写

animation-iteration-count（动画执行的次数）
可选值：

animation-direction(动画执行的方向）
可选值：

animation-play-state（动画的执行状态）
可选值：

animation-fill-mode（动画的填充模式）
可选值：