HTML连载72-动画效果及其他属性

一、动画效果

1.过渡与动画相类似，都需要三要素，那么他们的区别在哪里呢？

​答：过渡必须是人为的触发才会执行动画，动画不需要人为的触发就可以自动执行​动画。

2.​相同点：

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

3.动画的三要素

（1）告诉系统需要执行哪个动画​；

 

animation-name:动画名称;

 

 

（2）告诉系统我们需要自己创建一个自定义名称的动画

 

@keyframs  动画名称{

    from{

    }

    to{

    }

}

 

（3）动画持续的时长

 

animation:时间；/*这里的时间可以使用秒做单位*/
 

    <style>

        *{

            padding:0;

            margin:0;

        }

        div{

            width:100px;

            height: 50px;

            background-color: red;

           

            animation-name:lnj;

            animation-duration: 1s;

        }

        @keyframes lnj {

            from{

                margin-left:0;

            }

            to{

                margin-left:500px;

            }

        }

.........省略代码........

<div></div>

二、动画模块其他属性

 

    <style>

        *{

            padding:0;

            margin:0;

        }

        div{

            width: 100px;

            height: 50px;

            background-color: red;

            animation-name:sport;

            animation-duration: 1s;

            animation-delay:1s;/*动画执行前的延迟时间*/

            animation-timing-function:linear;/*动画持续的速度函数类型*/

            animation-iteration-count:3;/*动画执行的次数*/

            animation-direction:alternate;/*动画执行循环往复，循环往复一次是算两次动画效果的，如果使用normal，那么就是重复动画而已，默认是此值*/

            animtion-play-state:running;/*默认是running,也就是执行动画*/

        }

        @keyframes sport {

            from{

                margin-left:0px;

            }

            to{

                margin-left:500px;

            }

        }

        div:hover{

            /*告诉系统当前动画是否需要暂停*/

            animation-play-state:paused;

        }

.........省略代码.......

<div></div>

三、动画效果其他属性下

通过我们的观察，动画是有一定的状态的

（1）      ​等待状态；（2）​执行状态；（3）结束状态

 

animation-fill-mode:none;

 

 

属性值有四种

n​one:不做任何的改变；

forwards:让元素结束状态保持动画的最后一帧的样式

backwards:让元素等待状态的时候显示动画的第一帧的样式

both:​两个属性值的效果都显示。

 

    <style>

        *{

            padding:0;

            margin:0;

        }

        .box1{

            width: 100px;

            height: 50px;

            background-color: red;

            animation-name:sport;

            animation-duration:2s;

        }

        @keyframes sport {/*这里的百分比代表占用的时间*/

            0%{

                margin-left:0px;

                margin-top:0px;

            }

            10%{

                margin-left: 300px;

                margin-top:0px;

            }

            20%{

                margin-left:300px;

                margin-top:300px;

            }

            30%{

                margin-left:0px;

                margin-top:300px;

            }

            100%{

                margin-left:0px;

                margin-top:0px;

            }

        }

​

        .box2{

            width: 100px;

            height: 50px;

            background-color: red;

            margin:100px auto;

            animation-name:sport2;

            animation-duration:2s;

            animation-fill-mode:backwards;

            animation-delay:2s;

        }

        @keyframes sport2 {

            0%{

                tranform:rotate(10deg);

            }

            25%{

                transform:rotate(45deg);

            }

            50%{

                transform:rotate(79deg);

            }

            100%{

                transform:rotate(160deg);

            }

        }

</style>

</head>

<body>

<div class="box1"></div>

<div class="box2"></div>

四、源码：

D175_CartoonModule.html

D176_OtherAttrubuteOfAnimationModule.html

D176_OtherAttributeOfAnimationModule2.html

地址:

https://github.com/ruigege66/HTML_learning/blob/master/D175_CartoonModule.html

https://github.com/ruigege66/HTML_learning/blob/master/D176_OtherAttrubuteOfAnimationModule.html

https://github.com/ruigege66/HTML_learning/blob/master/D176_OtherAttributeOfAnimationModule2.html

2.CSDN：https://blog.csdn.net/weixin_44630050

3.博客园：https://www.cnblogs.com/ruigege0000/

4.欢迎关注微信公众号：傅里叶变换，个人账号，仅用于技术交流，后台回复“礼包”获取Java大数据学习视频礼包

 

 

posted on 2020-03-04 00:19  心悦君兮君不知-睿  阅读(436)  评论(0)    收藏  举报