css帧动画全

最新推荐文章于 2024-05-13 14:34:46 发布

qiansixi

最新推荐文章于 2024-05-13 14:34:46 发布

阅读量274

点赞数

分类专栏： css 文章标签： css3

本文链接：https://blog.csdn.net/qiansixi/article/details/103835917

版权

css 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!DOCTYPE html> <html lang="zh-CN"> <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="author" content="俞书楠">
    <title></title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: red;
            position: absolute;
            top: 100px;
            left: 100px;

            /* 设置动画名 */
            /* animation-name: move; */
            /* 动画持续时间 */
            /* animation-duration: 1s; */
            /* 速度类型 */
            /* animation-timing-function: linear;   */
            /* 设置动画延迟时间，如果延迟时间为负值，并没有让动画提前开始，改变了动画开始的状态 */
            /* animation-delay: -2.8s; */
            /* 动画执行的次数，默认是1次，infinite：无限循环 */
            /* animation-iteration-count: 1; */
            /* normal：正常方向
            reverse：反方向运行
            alternate：动画先正常运行再反方向运行，并持续交替运行
            alternate-reverse：动画先反运行再正方向运行，并持续交替运行 */
            /* animation-direction: alternate; */
            /* 保持动画结束时的状态 */
            /* animation-fill-mode: forwards; */
            /* 暂停动画 */
            /* animation-play-state: paused; */
            /* animation: 动画的综合写法; */
            animation: xz 1s linear forwards;
        }
        /* from ... to  等同于0% ... 100% */
        @keyframes xz{
            0%{transform: rotate(0);}
            10%{transform: rotate(90deg);}
            80%{transform: rotate(180deg);}
            100%{transform: rotate(360deg);}
        }
        /* @keyframes 动画名 {} 创建帧动画，帧动画是通过时间的控制把元素样式的改变呈现出动画的效果 */
        @keyframes move{
            /* 动画开始的状态：样式 */
            from{
                left: 100px;
            }
            /* 动画结束的状态：样式 */
            /* 动画的开始的样式和结束的样式要保持一致，否则动画不起效 */
            to{
                left: calc(100% - 100px - 200px);
            }
        }
        /* animation 关键帧动画与transition 过渡动画作用相似，都是通过时间来改变元素的样式实现动画
        区别：1.过渡动画需要一个触发的事件，帧动画不需要任何触发的事件；
             2.过渡动画只有一组：只能控制开始状态和结束状态，关键帧动画可以设置动画每一帧的状态，适合复杂的动画效果    
         */
    </style> </head> <body>
    <div></div> </body> </html>

qiansixi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css帧动画全

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="widt...
复制链接

扫一扫

专栏目录