css完成简单动画

最新推荐文章于 2024-09-10 22:55:28 发布

~Butterfly~

最新推荐文章于 2024-09-10 22:55:28 发布

阅读量125

点赞数 2

文章标签： css

本文链接：https://blog.csdn.net/tjsnbb/article/details/132416101

版权

css动画

动画执行三要素：

1.告诉系统需要执行那个动画 animation-name:动画名

2.告诉系统我们需要创建一个名称叫什么的动画
@keyframes mymove{
     from{初始状态属性}
     to{结束状态属性}
}

@keyframes mymove{
     0%{初始状态属性}
     100%{结束状态属性}
}（中间再可以添加关键帧）

3.告诉系统动画持续的时长
animation-duration:3s;

animation属性和语法：

1.animation-name  检索或设置对象所应用的动画名称
说明：必须与规则@keyframes配合使用，
@keyframes mymove{}  animation-name:mymove;

2.animation-duration  检索或设置对象动画的持续时间
说明：animation-duration:3s;    动画完成使用的时间为3s

3.animation-timing-function  检索或设置对象动画的过渡类型
说明：
linear：线性过渡

ease：平滑过渡

ease-in：由慢到快

ease-out：由快到慢

ease-in-out：由慢到快再到慢

step-start:马上跳到动画每一结束桢的状态

4.animation-delay  检索或设置对象动画延迟的时间
说明：animation-delay:0.5s; 动画开始前延迟的时间为0.5s

5.animation-iteration-count  检索或设置对象动画的循环次数
说明：
animation-iteration-count: infinite | number;

infinite：无限循环

number: 循环的次数

6.animation-direction  检索或设置对象动画在循环中是否反向运动
说明：
normal：正常方向

reverse：反方向运行

alternate：动画先正常运行再反方向运行，并持续交替运行

alternate-reverse：动画先反运行再正方向运行，并持续交替运行

7.animation-play-state  检索或设置对象动画的状态
说明：
animation-play-state:running | paused;

running:运动

paused: 暂停

8、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;
        }
        div{
            width: 200px;
            height: 200px;
            background-color: hotpink;
            /* 动画名称 */
            /* animation-name: dc; */
            /* 动画执行时间 */
            /* animation-duration: 2s; */
            /* 动画延迟时间 */
            /* animation-delay: 3s; */
            /* animation-timing-function: linear; */
            /* 动画执行次数，infinite无限执行 */
            /* animation-iteration-count: infinite; */
            /* 动画执行方向 */
            /* animation-direction: alternate-reverse; */
            animation: dc 2s linear infinite alternate-reverse;
        }
        div:hover{
            /* 动画暂停 */
            animation-play-state: paused;
        }
        /* 动画执行体 */
        @keyframes dc{
            /* 开始执行动画 */
            from{
                margin-left: 0px;
            }
            /* 动画结束 */
            to{
                margin-left: 1000px;
            }
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>