CSS3-贝塞尔曲线

来源：互联网发布：qq炫舞mac版编辑：程序博客网时间：2024/05/29 18:43

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>贝塞尔曲线</title>    <style type="text/css">    /*定义关键帧动画*/    @keyframes hello {        0% {width: 100px;height: 100px;}        100% {/*width: 500px;height: 500px;*/transform: translateX(500px) translateY(500px);}    }    @-webkit-keyframes hello {        0% {width: 100px;height: 100px;}        100% {/*width: 500px;height: 500px;*/ transform: translateX(500px) translateY(500px);}    }    div {        width: 100px;        height: 100px;        background-color: red;        /*调用动画*/        animation-name: hello;        -webkit-animation-name: hello;        animation-duration: 1.5s;        -webkit-animation-duration: 1.5s;        animation-timing-function: cubic-bezier(0,.15,.65,1.32);        -webkit-animation-timing-function: cubic-bezier(0,.15,.65,1.32);        animation-fill-mode: forwards;        /*animation-iteration-count: infinite;*/        /*animation-direction: alternate;*/    }    </style></head><body>    <div ></div></body></html>

0 0