使用css3实现动画有哪些好处

这篇文章主要介绍使用css3实现动画有哪些好处，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

商南网站建设公司创新互联公司,商南网站设计制作，有大型网站制作公司丰富经验。已为商南1000+提供企业网站建设服务。企业网站搭建\成都外贸网站制作要多少钱，请找那个售后服务好的商南做网站的公司定做！

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

本教程操作环境：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 的动画一方面也是为了实现表现与行为的分离

小例子

    
    
    
        .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;
            }
        }
    


    

        

            
啦啦啦啦啦啦啦啦
            
啦啦啦啦啦啦啦啦
        
    

使用css3实现动画的好处

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

2、实现代码比较简单

3、可以利用硬件加速

4、不占用主线程

缺点：

1、兼容性不好。

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

以上是“使用css3实现动画有哪些好处”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！