调用动画以及动画的基本属性

最新推荐文章于 2024-05-07 05:22:04 发布

Rich=

最新推荐文章于 2024-05-07 05:22:04 发布

阅读量239

点赞数 1

文章标签：动画 android css3

本文链接：https://blog.csdn.net/Rich26/article/details/125920975

版权

制作动画步骤

1、定义动画@keyframes move {}

2、调用动画 animation-name: move;

3、动画持续时间 animation-duration: 2s;

 <style>
        /* 我们想一打开，盒子就从左边移动到右边 */
        /* 第一步定义动画 */
        /* keyfraes关键帧 */
        @keyframes move {
            /* 开始状态 */
            0% {
                transform: translatex(0px);
            }
            25% {
                transform: translatex(1200px);
            }
            50% {
                transform: translate(1200px,500px);
            }
            75% {
                transform: translateY(500px);
            }
            /* 结束状态 */
            100% {
                transform: translateX(0px);
            }
        }
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* 调用动画 */
            animation-name: move;
            /* 动画持续时间 */
            animation-duration: 2s;
        }
    </style>
</head>
<body>
    <div></div>
</body>

动画的常用属性

/* 动画名称 */
/* animation-name: move; */
/* 持续时间 */
/* animation-duration: 2s; */
/* 规定动画的速度曲线运动曲线默认是ease */
/* animation-timing-function:ease; */
/* 何时开始 */
/* animation-delay: 1s; */
/* 重复次数 iteration 重复的 count次数 infinite 无限
（写1就是一次 2就是两次） */
/* animation-iteration-count:infinite; */
/* 是否反向播放默认是normal 如果想要反方向就写alternate 默认是normal */
/* animation-direction: alternate; */
/* 结束动画的位置默认是backwards回到起始状态*/
/* animation-fill-mode: forwards; */
动画简写
/* animation: name duration timing-function delay iteration-count direction fill-mode; */