动画效果与CSS关键帧技术-优快云博客

本文链接：https://blog.youkuaiyun.com/u014404513/article/details/51376710

本文详细介绍了如何使用CSS关键帧技术实现动画效果，包括关键帧定义、调用及参数设置，通过实例展示了动画从缩放变化的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>