animatioan自定义动画

当在 @keyframes 创建动画，把它绑定到一个选择器，否则动画不会有任何效果。

指定至少这两个CSS3的动画属性绑定向一个选择器：规定动画的名称、规定动画的时长。

您必须定义动画的名称和动画的持续时间。如果省略的持续时间，动画将无法运行，因为默认值是0。

动画是使元素从一种样式逐渐变化为另一种样式的效果。

您可以改变任意多的样式任意多的次数。

请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。

0% 是动画的开始，100% 是动画的完成。

为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。

以上来自菜鸟教程

<style>
        @keyframes my{
            from{
                background-color: blue;
                top: 0px;
                left: 0px;
            }
            to{
                background-color: brown;
                left: 200px;
                top: 200px;
            }
        }
        /* 
        以下需要在执行者的style中添加
        animation-name: ----动画名称；
        animation-duration：5s；----执行时间
        animation-delay：2s；----动画执行延迟
        animation-timing-function：linear 匀速；ease 溶解效果；ease-out 淡出效果；ease-in 淡入效果；ease-in-out 淡入淡出效果  ----动画执行的效果
        animation-play-state：running 开始；paused 暂停  ----动画执行状态
        animation-iteration-count：2；----动画执行次数
        animation-direction：alternate：----是否循环交替反向播放动画；添加动画播放完毕以后，退回来执行一次，只在动画执行次数为无限次数
        - normal 动画正常播放
        - reverse 动画反向播放
        - alternate  动画在奇数次(1、3、5..)正向播放；在偶数次(2、4、6..)反向播放
        - alternate-reverse  动画在奇数次(1、3、5..)反向播放；在偶数次(2、4、6..)正向播放
        animation-fill-mode：；----规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式；定义动画播放开始前和结束后执行关键帧里面的画面
        - none 默认值；动画在动画执行之前和之后不会应用任何样式到目标元素
        - forwards  在动画结束后（由 animation-iteration-count 决定），动画将应用该属性值；表示在动画完成后继续使用最后一个关键帧里面的样式
        - backwards 	动画将应用在 animation-delay 定义期间启动动画的第一次迭代的关键帧中定义的属性值。这些都是 from 关键帧中的值（当 animation-direction 为 "normal" 或 "alternate" 时）或 to 关键帧中的值（当 animation-direction 为 "reverse" 或 "alternate-reverse" 时 ；表示在动画开始之前使用初始关键帧里面定义的样式
        - both 同时应用forwards和backwards的效果
        */
        *{
            padding: 0;
            margin: 0;
        }
        .img{
            position: relative;
            width: 100px;
            height: 100px;
            border: 1px solid red;
            animation-name: my;
            animation-duration: 5s;
            /* animation: my 5s; */
            animation-delay: 2s;
            animation-timing-function: ease-in-out;
            animation-iteration-count:infinite;
            animation-direction:alternate;
            animation-fill-mode: forwards;
        }
    </style>