Animation动画

最新推荐文章于 2024-03-30 01:25:31 发布

一李

最新推荐文章于 2024-03-30 01:25:31 发布

阅读量551

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_43641432/article/details/108322510

版权

前端专栏收录该内容

102 篇文章 1 订阅

订阅专栏

animation-name：关键帧的名称

animation-duration：一个动画周期的时长

animation-timing-function：动画的默认效果

animation-delay：延迟时间---动画外的属性

animation-iteration-count：动画执行效果重复-delay对其不起作用

animation-direction:normal（顺时针）reverse(反转) 动画执行的方向

animation-fill-mode:backwards（与之前的状态一致） forwards（to之后的状态）both（backwards+forwards）控制元素在动画外的状态。 from之前，to之后。

animation-play-state：paused 控制动画状态

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;

        }
        #wrap{
            position: absolute;
            width: 300px;
            height: 300px;
            margin: 0 auto;
            right: 0;
            bottom: 0;
            margin: auto;
            left: 0;
            top: 0;
            border: 1px solid;

        }
        .inner{
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -50px;
            margin-top: -50px;
            width: 100px;
            height: 100px;
            background-color: pink;
            font: 50px/100px "微软雅黑";
            text-align: center;
            border-radius: 100%;
           

            animation-name: move;
            animation-duration: 2s;
            animation-timing-function:liner;
            animation-delay: 2s;
            animation-iteration-count: 2;
            animation-direction: normal;
            animation-fill-mode: both;
           
        }
        #wrap:hover .inner{
            animation-play-state: paused;
        }
        @keyframes move{
            
            from{
                transform: translateY(-100px);
            }
            to{
                transform: translateY(100px);
            }

        }
    </style>
</head>
<body>
    <div id="wrap">
        <div class="inner">
           li
        </div>
    </div>
</body>
</html>

关键帧选择器：

timing-function：作用于一个动画帧周期

这个形式作用于一个动画周期

关键帧定义动画的形式；

一李

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Animation动画

animation-name：关键帧的名称animation-duration：一个动画周期的时长animation-timing-function：动画的默认效果animation-delay：延迟时间---动画外的属性animation-iteration-count：动画执行效果重复-delay对其不起作用animation-direction:normal（顺时针）reverse(反转)动画执行的方向animation-fill-mode:backwards（与之前的状态一.
复制链接

扫一扫