web动画效果实现

animation属性

css样式

 *{
            margin: 0px;
            padding: 0px;
        }
        .box1{
                width: 1520px;
                height: 690px;
                background-color:black;
                position: relative;
                overflow: hidden;
            } 
        .box2,.box3{
            width: 240px;
            height: 550px;          
            margin-top: 100px;
            position: absolute;
        }
        .box2 {         
            /* background-color: chartreuse; */
            
            /* 对当前元素生效的关键帧的名字 */
            animation-name: test;
            /* 动画执行时间 */
            animation-duration: 3s;
            /* 动画延时 */
            animation-delay: 0s;
            /* 动画执行次数 1次，2次， infinite无限次 */
            animation-iteration-count: infinite;
            /* 往返执行 */
             animation-direction: alternate;
             animation-fill-mode: forwards; 
             float: left;         
        }
       .box3{
            animation-name: test;
            animation-duration: 3s;
            animation-delay: 3s;
            animation-iteration-count: infinite;
            animation-direction: alternate;
            /* float: left; */
       }
        .box1:hover .box2{
            /* 鼠标移入暂停 */
            animation-play-state: paused;
        }
        @keyframes test{
            0%{
                margin-left: 0px;
            }
            100%{
                margin-left: 1300px;
            }
        }
        img{
            position: absolute;
        }

html样式

<div class="box1">
        <div class="box2">
            <div><img src="./图图1.jpg"></div>
        </div>
        <div class="box3">
            <img src="./图图2.jpg">
        </div>
    </div>

这里主要注意的是**@keyframes后面的关键帧名称要与animation-name**保持一致，其他的和昨天发布的过渡效果基本一样。

后追加的

 /* animation-direction：动画执行方向
                    可选值：
                        normal 默认值 from-to
                        reverse   to-from
                        alternate   from-to重复执行动画时反向执行
                        alternate-reverse  to-from 重复执行动画时反向执行
            */

 /* animation-fill-mode动画填充模式
                    可选值：
                        none默认值，动画结束时回到原来位置
                        forwards动画结束时会停到结束的位置
                        backwards动画延时等待时，元素会处于开始位置
                        both结合了forwards和backwards
             */

 /*简写属性  */
              /* animation: 名字 时间 timing-function 延时 次数 执行方向 填充模式; */