HTML入门学习笔记--CSS动画模块(11)

100-动画模块

1.过渡和动画之间的异同

1.1不同点

过渡必须人为的触发才会执行动画
动画不需要人为的触发就可以执行动画

1.2相同点

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

步骤

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

101-动画模块-其它属性上

       /*告诉系统多少秒之后开始执行动画*/
        /*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;

创建动画第二种形式

    .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;
        }
    }

103-动画模块-连写

1.动画模块连写格式

animation:动画名称 动画时长 动画运动速度 延迟时间 执行次数 往返动画;

2.动画模块连写格式的简写

animation:动画名称 动画时长;