css3-动画

最新推荐文章于 2024-11-19 00:15:00 发布

微笑大笑i

最新推荐文章于 2024-11-19 00:15:00 发布

阅读量540

点赞数

分类专栏： CSS3 文章标签： css3 动画

本文链接：https://blog.csdn.net/u014404513/article/details/51376710

版权

CSS3 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="animate.css">
    <title>动画</title>
    <style type="text/css">
        /*关键帧  keyframes*/
        /*第一步：定义动画，用@keyframes 定义一个动画效果，后边紧跟动画的效果名字。通过名字来调用这个动画。*/
        @keyframes myAnimation {
            /*通过关键字或百分比来设定关键帧的时间。 from  to  50% 100%*/
            /*在{}中设置关键帧状态的相关属性，多个属性之间使用“；”分隔*/
            0% {
                transform: scale(1,1);

            }
            100% {

                transform: scale(3,3);

            }
    /*      100% {
                width: 100px;
                height: 100px;
                transform: scale(1,1);
            }*/

        }
        /*关键帧动画为了防止部分用户无法使用。需要添加前缀-webkit*/
        @-webkit-keyframes myAnimation {
            0% {
                transform: scale(1,1);

            }
            100% {

                transform: scale(3,3);

            }
        /*  100% {
                width: 100px;
                height: 100px;
                transform: scale(1,1);
            }*/
        }
        /*第二步：调用关键帧动画*/
        div {
            width: 220px;
            height: 220px;
            background:url(xin.png) no-repeat;
            background-size: 100%;
            margin: 500px auto;

            /*调用  选中关键帧动画名称（必选）*/
            animation-name: myAnimation ;
            -webkit-animation: myAnimation;
            /*设置动画执行时间（必选）*/
            animation-duration: 5s;
            -webkit-animation-duration: 5s;
            /*设置动画执行的时间函数（运动速率变化曲线）*/
            animation-timing-function: ease-in;
            -webkit-animation-timing-function: ease-in;
            /*设置动画延迟的时间*/
            animation-delay: 1s;
            -webkit-animation-delay: 1s;
            /*设置动画执行次数 ：具体数字表示让动画执行指定次数，infinite无限次*/
            animation-iteration-count: infinite;
            -webkit-animation-iteration-count: infinite;
            /*设置动画执行方向：向前 normal(从0到100)、来回执行alternate（从0-100，后100-0*/
            animation-direction: alternate;
            -webkit-animation-direction: alternate;
            /*设置动画执行结束后，保留最后一帧的样式*/
            animation-fill-mode: forwards;
            -webkit-animation-fill-mode:forwards;
            /*关键帧动画设置的复合属性*/
            -webkit-animation: myAnimation 2s ease-out 1s infinite alternate forwards;
            -o-animation: myAnimation 2s ease-out 1s infinite alternate forwards;
            animation: myAnimation 2s ease-out 1s infinite alternate forwards;
        }



    </style>
</head>
<body>
    <div></div>  
</body>
</html>