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 延时 次数 执行方向 填充模式; */