-webkit-animation

来源：互联网发布：淘宝买电玩人马皮肤编辑：程序博客网时间：2024/05/29 11:43
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title>    <style>        @-webkit-keyframes 'wobble' {         0% {            margin-left: 100px;            background: green;         }         40% {            margin-left: 250px;            background: orange;         }         60% {            margin-left: 350px;            background: blue;         }         100% {            margin-left: 1000px;            background: red;         }      }      .demo1 {         width: 50px;         height: 50px;         margin-left: 100px;         background: blue;         -webkit-animation-name:'wobble';/*动画属性名，也就是我们前面keyframes定义的动画名*/         -webkit-animation-duration: 2s;/*动画持续时间*/         -webkit-animation-timing-function: ease-in-out; /*动画频率，和transition-timing-function是一样的*/         -webkit-animation-delay: 2s;/*动画延迟时间*/         -webkit-animation-iteration-count: 3;/*定义循环资料，infinite为无限次*/         -webkit-animation-direction: alternate;/*定义动画方式*/      }    </style></head><body>    <div class="demo1">    </div></body></html>
阅读全文
0 0