css3-动画steps等属性

最新推荐文章于 2023-08-10 20:14:15 发布

约德尔蒙

最新推荐文章于 2023-08-10 20:14:15 发布

阅读量738

点赞数

分类专栏： CSS3

本文链接：https://blog.csdn.net/gyq04551/article/details/53263809

版权

CSS3 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<!--------------------------------------动画属性-------------------------------------->

         <!--调用*/-->
         <!--infinite:无限次*-->
         <!--animation: 动画名称 持续时间  执行次数  是否反向  运动曲线 延迟执行-->
         <!--animation: move      1s     alternate    linear 3 ;-->
         <!--animation: gun 4s;-->

            <!--/* 定义动画*/-->
            <!--@keyframes move {
                from{
                transform: translateX(0px) rotate(0deg) ;
                }
                to{
                transform: translateX(500px) rotate(555deg) ;
                }
            }-->

            <!--/* animation属性详解*/
            /* 动画名称*/
                animation-name: move;
            /* 一次动画持续时间  前两属性是必须，且顺序固定*/
                animation-duration: 3s;
            /* 动画执行次数  无数次：infinite*/
                animation-iteration-count: 1;
            /* 动画的方向： normal 正常 ， alternate： 反向*/
                animation-direction: alternate;
            /* 动画延迟执行*/
            /*animation-delay: 1s;*/

            /* 设置动画结束盒子盒子的状态
                forwards：保持动画结束后的状态
                backwards：保持动画开始前的状态
                animation-fill-mode:forwards;

            /* 运动曲线  linear   ease-in-out  steps()*/
            /*animation-timing-function:ease-in;*/-->

<!----------------------------------步长steps------------------------------------------>
            <!-- step多长时间走了多少步 根据目标值设定-->
            <!--animation:rot 60s steps(60) infinite;-->
</body>
</html>

约德尔蒙

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3-动画steps等属性

<!--@keyframes move { from{ transform: translateX(0px) rotate(0deg) ; } to{ transform: translateX(500px) rotate(555deg)
复制链接

扫一扫

专栏目录