首页 > 文章 > web前端 > css3实现动画的好处有哪些

css3实现动画的好处有哪些

青灯夜游原创: 2022-01-13 16:04:421831浏览

css3实现动画的好处：1、浏览器可以对动画进行优化（元素不可见时不动画，减少对FPS的影响）；2、实现代码比较简单；3、可以利用硬件加速；4、不占用主线程。

css3实现动画的好处有哪些

本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。

css3动画的属性总的来说只有transform(变形)，transition(过渡)，和animation(动画)这三种。

transition:1s(过渡的动画效果)：从一个人具体的值到另一个过渡的值

transform:rotate(300deg) x,y 旋转 transform:rotageX(300deg) transform:rotageY(300deg)

transform:scale(0.5,2) 缩放x轴，y轴 >1放大 <1缩小

transform:translateX(100px)平移x轴 transform:translateY(100px) 平移y轴

transform:translate(100px 100px) 平移x,y轴

transition:rotate(300deg) scale(0.5,2) 一边缩放，一边旋转

transition:transform 1s 指定对transform 起效果

transition:margin 1s 指定对margin 起效果接改变大小和位置，显示改变的结构，没有过渡和形变时间

animation重点是在时间轴和关键帧,是在于创建帧，让不同帧在不同的时间节点发生不同变化，基于animation和@keyframe 的动画一方面也是为了实现表现与行为的分离

小例子

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>逐帧动画</title>
    <style type="text/css">
        .a{
            width: 1000px;
            height: 400px;
            background: #bbb;
            position: relative;
            margin: 100px auto;
            overflow: hidden;

        }
        .b{
            font-size: 50px;
            width: 400px;
            height: 150px;
            position: absolute;
            top:-150px;
            left: 50px;
            text-align: center;
            background: #aaa;
            line-height: 150px;
            animation:s 2s infinite;
        }   
        .c{
            font-size: 50px;
            width: 400px;
            height: 150px;
            position: absolute;
            bottom:-150px;
            right: 50px;
            background: #ccc;
            line-height: 150px;
            animation:ss 2s infinite;
        }
        @keyframes ss{
            0%{
                transform:translateY(0px);
                background: #888;
            }
            50%{
                transform:translateY(-90px);
                background: #7dd;
            }
            50%{
                transform:translateY(-150px);
                background: #3aa;
            }
        }
        @keyframes s{
            0%{
                transform:translateY(0px);
                background: #888;
            }
            50%{
                transform:translateY(90px);
                background: #7dd;
            }
            50%{
                transform:translateY(150px);
                background: #3aa;
            }
        }
    </style>
</head>
<body>
    <header>
        <div>
            <div>啦啦啦啦啦啦啦啦</div>
            <div>啦啦啦啦啦啦啦啦</div>
        </div>
    </header>
</body>
</html>

使用css3实现动画的好处

1、浏览器可以对动画进行优化（元素不可见时不动画，减少对FPS的影响）

2、实现代码比较简单

3、可以利用硬件加速

4、不占用主线程

缺点：

1、兼容性不好。

2、在动画控制上不够灵活，运行过程较弱，无法附加绑定回调函数，不能在特定的位置上添加回调函数或是绑定回放事件，无进度报告。

（学习视频分享：css视频教程）

以上是css3实现动画的好处有哪些的详细内容。更多信息请关注PHP中文网其他相关文章！

html5 css css3 回调函数线程主线程事件 margin transform transition animation

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：css3过渡采用什么属性下一篇：css3媒体查询的语法关键字是什么

查看更多