动画模块

最新推荐文章于 2021-09-07 15:49:33 发布

weixin_42834788

最新推荐文章于 2021-09-07 15:49:33 发布

阅读量254

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/weixin_42834788/article/details/96977450

版权

CSS 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

一、动画模块

1.过渡和动画之间的异同
1.1不同点
过渡必须人为的触发才会执行动画
动画不需要人为的触发就可以执行动画

1.2相同点
过渡和动画都是用来给元素添加动画的
过渡和动画都是系统新增的一些属性
过渡和动画都需要满足三要素才会有动画效果

<style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 100px;
            height: 50px;
            background-color: red;
            /*transition-property: margin-left;*/
            /*transition-duration: 3s;*/

            /*1.告诉系统需要执行哪个动画*/
            animation-name: lnj;
            /*3.告诉系统动画持续的时长*/
            animation-duration: 3s;
        }
        /*2.告诉系统我们需要自己创建一个名称叫做lnj的动画*/
        @keyframes lnj {
            from{
                margin-left: 0;
            }
            to{
                margin-left: 500px;
            }
        }

        /*div:hover{*/
            /*margin-left: 500px;*/
        /*}*/
    </style>
<body>
<div></div>
</body>

二、动画模块-其余属性

<style>
        *{
            margin: 0;
            padding: 0;
        }
        div {
            width: 100px;
            height: 50px;
            background-color: red;
            animation-name: sport;
            animation-duration: 2s;
            /*告诉系统多少秒之后开始执行动画*/
            /*animation-delay: 2s;*/
            /*告诉系统动画执行的速度*/
            animation-timing-function: linear;
            /*告诉系统动画需要执行几次*/
            animation-iteration-count: 3;
            /*告诉系统是否需要执行往返动画
            取值:
            normal, 默认的取值, 执行完一次之后回到起点继续执行下一次
            alternate, 往返动画, 执行完一次之后往回执行下一次
            */
            animation-direction: alternate;
        }
        @keyframes sport {
            from{
                margin-left: 0;
            }
            to{
                margin-left: 500px;
            }
        }
        div:hover{
            /*
            告诉系统当前动画是否需要暂停
            取值:
            running: 执行动画
            paused: 暂停动画
            */
            animation-play-state: paused;
        }
    </style>
</head>
<body>
<div class="box1"></div>
</body>

其余属性补充

通过我们的观察, 动画是有一定的状态的
            1.等待状态
            2.执行状态
            3.结束状态
            */
            /*
            animation-fill-mode作用:
            指定动画等待状态和结束状态的样式
            取值:
            none: 不做任何改变
            forwards: 让元素结束状态保持动画最后一帧的样式
            backwards: 让元素等待状态的时候显示动画第一帧的样式
            both: 让元素等待状态显示动画第一帧的样式, 让元素结束状态保持动画最后一帧的样式

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1 {
            width: 100px;
            height: 50px;
            background-color: red;
            position: absolute;
            left: 0;
            top: 0;
            animation-name: sport;
            animation-duration: 5s;
        }
        @keyframes sport {
            0%{
                left: 0;
                top: 0;
            }
            25%{
                left: 300px;
                top: 0;
            }
            50%{
                left: 300px;
                top: 300px;
            }
            75%{
                left: 0;
                top: 300px;
            }
            100%{
                left: 0;
                top: 0;
            }
        }

        .box2{
            width: 200px;
            height: 200px;
            background-color: blue;
            margin: 100px auto;
            animation-name: myRotate;
            animation-duration: 5s;
            animation-delay: 2s;
            animation-fill-mode: both;
        }
        @keyframes myRotate {
            0%{
                transform: rotate(10deg);
            }
            50%{
                transform: rotate(50deg);
            }
            100%{
                transform: rotate(70deg);
            }
        }
    </style>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>

三、动画模块-连写

1.动画模块连写格式
animation:动画名称动画时长动画运动速度延迟时间执行次数往返动画;

2.动画模块连写格式的简写
animation:动画名称动画时长;

<style>
        *{
            margin: 0;
            padding: 0;
        }
        div {
            width: 100px;
            height: 50px;
            background-color: red;
            /*animation: move 3s linear 2s 1 normal;*/
            animation: move 3s;
        }
        @keyframes move {
            from{
                margin-left: 0;
            }
            to{
                margin-left: 500px;
            }
        }
    </style>
<body>
<div></div>
</body>

weixin_42834788

关注

0
点赞
踩
0

收藏

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

一、动画模块1.过渡和动画之间的异同1.1不同点过渡必须人为的触发才会执行动画动画不需要人为的触发就可以执行动画1.2相同点过渡和动画都是用来给元素添加动画的过渡和动画都是系统新增的一些属性过渡和动画都需要满足三要素才会有动画效果<style> *{ margin: 0; padding: 0;...
复制链接

扫一扫

专栏目录