css动画效果

来源：互联网发布：中小型企业网络建设编辑：程序博客网时间：2024/05/21 14:54

@charset "utf-8";body{margin:100px;}div{width:200px;height: 200px;background-color: white;border: 2px solid green;animation-name: myani;animation-duration: 1s;animation-timing-function: ease-in;/*animation-delay: 1s;*//*animation-iteration-count: infinite;*//*animation-iteration-count: 4;*//*animation-direction: alternate;*//*animation-play-state: paused;*//*animation-fill-mode: forwards;*//*animation-fill-mode: backwards;*//*animation-fill-mode: both;*//*最常用简写形式*//*时间 缓动效果 次数 缓动交替方向（延时 结束后位置（不再返回（forwards），返回原来（backwards），自判断(both)））*/  animation:myani 1s ease 2 alternate 1s both;}@keyframes myani{/*百分比更加灵活*//*+*/    0%，100%{   background-color: white;margin-left: 0px;     }    50%{    background-color: black;margin-left: 100px;       }    from{background-color: white;margin-left: 0px;    }    to{background-color: black;margin-left: 100px;       }}

0 0