css3 实现动画

CSS3，我们可以创建动画，它可以取代许多网页动画图像，例如下面这个小球动画

使用css3关键帧动画可以轻松实现

请看下面代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>关键帧动画</title>
</head>
<style type="text/css">

@keyframes move {
    10%{
        transform: translate(50px,50px)
    }
    30%{
        transform: translate(150px,150px) scale(1.5);
    }
    50%{
        transform: translate(250px,150px) scale(1);
    }
    70%{
        transform: translate(350px,250px) scale(2);
    }
    100%{
        transform: translate(0px,0px) scale(1);
    }
}

@-webkit-keyframes move {
    10%{
        -webkit-transform: translate(50px,50px)
    }
    30%{
        -webkit-transform: translate(150px,150px) scale(1.5)
    }
    50%{
        -webkit-transform: translate(250px,150px) scale(1)
    }
    70%{
        -webkit-transform: translate(350px,250px) scale(2)
    }
    100%{
        -webkit-transform: translate(0px,0px) scale(1)
    }
}


.box{
    width: 30px;
    height: 30px;
    background-color: pink;
    border-radius: 50%;
    
    /* 规定 @keyframes 动画的名称 */
    animation-name:move;
    -webkit-animation-name:move;
    -o-animation-name:move;
    -ms-animation-name:move;
    -moz-animation-name:move;
    /* 规定动画完成一个周期所花费的秒 默认是 0 */
    animation-duration:1s;
    -webkit-animation-duration:1s;
    -o-animation-duration:1s;
    -ms-animation-duration:1s;
    -moz-animation-duration:1s;
    /* 规定动画的速度曲线。默认是 "ease" */
    animation-timing-function: linear; 
    -webkit-animation-timing-function: linear;
    -o-animation-timing-function: linear;
    -ms-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    /* 规定动画何时开始。默认是 0 */
    animation-delay: 0;
    -webkit-animation-delay: 0;
    -o-animation-delay: 0;
    -ms-animation-delay: 0;
    -moz-animation-delay: 0;
    /* 规定动画被播放的次数。默认是 1 */
    animation-iteration-count: infinite; 
    -webkit-animation-iteration-count: infinite;
    -o-animation-iteration-count: infinite;
    -ms-animation-iteration-count: infinite; 
    -moz-animation-iteration-count: infinite;
}


</style>
<body>
    <div class="box"></div>
</body>
</html>

动画类型不仅仅局限于 translate（平移）还可以是 scale（缩放）rotate（旋转）等

猜你喜欢