关键帧（@keyframes）

最新推荐文章于 2024-04-30 09:57:30 发布

Dariuslwk

最新推荐文章于 2024-04-30 09:57:30 发布

阅读量2k

点赞数 1

分类专栏： DAYNOTE 文章标签： css html css3

本文链接：https://blog.csdn.net/qq_44158936/article/details/104993363

版权

DAYNOTE 专栏收录该内容

27 篇文章 3 订阅

订阅专栏

@keyframes 规则通过在动画序列中定义关键帧（或waypoints）的样式来控制CSS动画序列中的中间步骤。这比转换更能控制动画序列的中间步骤。

1、语法

1.1、取值

帧列表的名称。名称必须符合 CSS 语法中对标识符的定义。
from 等效于 0%
to 等效于 100%
动画序列中，触发关键帧的时间点，使用百分值来表示。

1.2、语法格式

@keyframes <keyframes-name> {
  <keyframe-block-list>
}
where 
<keyframes-name> = <custom-ident> | <string>
<keyframe-block-list> = <keyframe-block>+

where 
<keyframe-block> = <keyframe-selector># {
  <declaration-list>
}

where 
<keyframe-selector> = from | to | <percentage>

2、案例分析

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>css关键帧动画</title>

        <style>

            /* 让元素做关键帧动画： */
            /* 第一步，创建动画 */

            @keyframes move{
                /* 0%表示动画开始的关键帧 */
                0%{
                    transform: translate(0,0);
                    animation-timing-function: ease-out;
                }

                25%{
                    transform: translate(300px,0);
                    animation-timing-function: ease-in;
                }
                50%{
                    transform: translate(300px,300px);
                }
                75%{
                    transform: translate(0px,300px);
                }

                /* 动画结束时的关键帧 */
                0%{
                    transform: translate(0,0);
                }
            }

            #box{
                width: 100px;
                height: 100px;
                background-color: red;

                /* 第二步，把动画添加到元素上 */

                /* animation-name:动画名字，设置本元素要执行哪个动画 */
                animation-name: move;

                /* 设置单次动画的执行时间 */
                animation-duration: 2s;
                /* 动画状态是否保留，设置为both可以保留动画结束时元素的样式 */
                animation-fill-mode: both;
                /* 设置动画执行速率，默认为ease-in-out，匀速使用linear */
                animation-timing-function: linear;

                /* 动画延时时间 */
                animation-delay: 0s;

                /* 设置动画方向 */
                /* animation-direction: reverse; */

                /* 动画执行次数，默认为1，设置为infinite表示无限次 */
                animation-iteration-count: infinite;
            }
            #d2{
                width: 100px;
                height: 100px;
                background-color: blue;
                margin: 50px auto;
                text-align: center;
                line-height: 100px;
            }

            @keyframes spin{
                0%{
                    transform: rotate(0deg);
                }

                100%{
                    transform: rotate(360deg);
                }
            }
            .spin{
                animation-name: spin;
                animation-duration: 2s;
                animation-timing-function: linear;
                animation-iteration-count: infinite;

            }
            #d2:hover{
                /* animation-play-state，设置动画执行状态，默认为running，设置为paused可以暂停动画 */
                animation-play-state: paused;
                cursor: pointer;
            }
            #d2:active{
                animation-play-state: running;
                animation-direction: reverse;
            }
        </style>

    </head>
    <body>
    <div id="box"></div>
    <div id="d2" class="spin">旋转动画</div>
    </body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8BOXCcJ2-1584693547477)(D:\DAYNOTE\keyframe.PNG)]$

Dariuslwk

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
关键帧（@keyframes）

@keyframes 规则通过在动画序列中定义关键帧（或waypoints）的样式来控制CSS动画序列中的中间步骤。这比转换更能控制动画序列的中间步骤。1、语法1.1、取值帧列表的名称。名称必须符合 CSS 语法中对标识符的定义。from 等效于 0%to 等效于 100% 动画序列中，触发关键帧的时间点，使用百分值来表示。1.2、语法格式@keyframes <...
复制链接

扫一扫