/* 从左侧渐入 */ div { background-color:rgb(138,188,209); width:600px; height:100px; margin:10px; } .fade { opacity:0; transform:translateX(-600px); } .left-in { /* 定义动画 */ animation-duration:1000ms; /* 动画时间 */ animation-name:left-in; /* 关键帧名字 */ } /* 定义关键帧 */ @keyframes left-in { 0% { opacity:0; transform:translateX(-600px); } 100% { opacity:1; transform:translateX(0px); } }.right-in { /* 定义动画 */ animation-duration:1000ms; /* 动画时间 */ animation-name:right-in; /* 关键帧名字 */ } /* 定义关键帧 */ @keyframes right-in { 0% { opacity:0; transform:translateX(600px); } 100% { opacity:1; transform:translateX(0px); } }
更新时间:2022-07-10 21:34:12