css3实现动画的好处有哪些-前端问答-PHP中文网

首页

web前端

前端问答

css3实现动画的好处有哪些

青灯夜游

Jan 13, 2022 pm 04:04 PM

css3 动画

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中文网其他相关文章！

本站声明

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

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7729

Java教程

1643

CakePHP 教程

1397

Laravel 教程

1290

PHP教程

1233

显示更多

Related knowledge

如何加速Windows 11中的动画效果：2种方法解析 Apr 24, 2023 pm 04:55 PM

当微软推出Windows11时，它带来了许多变化。其中一项更改是增加了用户界面动画的数量。一些用户想要改变事物的出现方式，他们必须想办法去做。拥有动画让用户感觉更好、更友好。动画使用视觉效果使计算机看起来更具吸引力和响应能力。其中一些包括几秒钟或几分钟后的滑动菜单。计算机上有许多动画会影响PC性能、减慢速度并影响您的工作。在这种情况下，您必须关闭动画。本文将介绍用户可以提高其在PC上的动画速度的几种方法。您可以使用注册表编辑器或您运行的自定义文件来应用更改。如何提高Windows11动画的

动画不工作在PowerPoint中[修复] Feb 19, 2024 am 11:12 AM

您是否正在尝试制作演示文稿，但无法添加动画？如果动画在你的WindowsPC上的PowerPoint中不起作用，那么这篇文章将会帮助你。这是一个常见的问题，许多人都在抱怨。例如，在Microsoft团队中演示或在屏幕录制期间，动画可能会停止工作。在本指南中，我们将探索各种故障排除技术，以帮助您修复在Windows上的PowerPoint中无法运行的动画。为什么我的PowerPoint动画不起作用？我们注意到可能导致Windows上PowerPoint中的动画无法工作问题的一些可能原因如下：由于个

CSS动画：如何实现元素的闪光效果 Nov 21, 2023 am 10:56 AM

CSS动画：如何实现元素的闪光效果，需要具体代码示例在网页设计中，动画效果有时可以为页面带来很好的用户体验。而闪光效果是一种常见的动画效果，它可以使元素更加引人注目。下面将介绍如何使用CSS实现元素的闪光效果。一、闪光的基本实现首先，我们需要使用CSS的animation属性来实现闪光效果。animation属性的值需要指定动画名称、动画执行时间、动画延迟时

ppt动画如何设置先进入再退出 Mar 20, 2024 am 09:30 AM

我们在日常的办公中经常会使用到ppt，那么你是否对ppt里边的每个操作功能都很了解呢？例如：ppt中怎么设置动画效果、怎么设置切换效果、每个动画的效果时长是多少？每个幻灯片能不能自动播放、ppt动画先进入再退出等等，那么今天这期我就先跟大家分享ppt动画先进入再退出的具体操作步骤，就在下方，小伙伴们快来看一看吧！1.首先，我们在电脑中打开ppt，单击文本框外侧选中文本框，（如下图红色圈出部分所示）。2.然后，单击菜单栏中的【动画】，选中【擦除】的效果，（如图红色圈出部分所示）。3.接下来，单击【

跳票 2 年，国产 3D 动画电影《二郎神之深海蛟龙》定档 7 月 13 日 Jan 26, 2024 am 09:42 AM

本站1月26日消息，国产3D动画电影《二郎神之深海蛟龙》发布一组最新剧照，正式宣布将于7月13日上映。据了解，《二郎神之深海蛟龙》是由迷狐星（北京）动漫有限公司、霍尔果斯众合千澄影业有限公司、浙江横店影业有限公司、浙江共赢影业有限公司、成都天火科技有限公司、华文映像（北京）影业有限公司出品，王君执导的动画电影，原定2022年7月22日在中国大陆上映。本站剧情简介：封神之战后，姜子牙携“封神榜”分封诸神，而后封神榜被天庭密封于九州秘境深海之下。事实上，除了分封神位，封神榜中还封缄着众多强大的妖邪元

如何使用Vue实现打字机动画特效 Sep 19, 2023 am 09:33 AM

如何使用Vue实现打字机动画特效打字机动画是一种常见且引人注目的特效，常用于网站的标题、标语等文字展示上。在Vue中，我们可以通过使用Vue自定义指令来实现打字机动画效果。本文将详细介绍如何使用Vue来实现这一特效，并提供具体的代码示例。步骤1：创建Vue项目首先，我们需要创建一个Vue项目。可以使用VueCLI来快速创建一个新的Vue项目，或者手动在HT

Netflix 黏土动画电影《小鸡快跑 2》终极预告公布，12 月 15 日上线 Nov 20, 2023 pm 01:21 PM

Netflix的黏土动画电影《小鸡快跑2》的最终预告已经公布，该影片预计将于12月15日上线本站注意到，《小鸡快跑2》预告片展示了小鸡洛基和金杰为了寻找女儿莫莉开展行动。莫莉被FunLand农场的一辆卡车带走，洛基和金杰冒着危险找回女儿。该片由萨姆・菲尔执导，并由桑迪韦・牛顿、扎克瑞・莱维、贝拉・拉姆齐、伊梅尔达・斯汤顿和大卫・布拉德利主演。据了解，《小鸡快跑2》是继《小鸡快跑》之后时隔20多年推出的续集。第一部作品于2001年1月2日在中国上映，讲述了一群小鸡们在养鸡厂面临被做成鸡肉馅饼的命运

如何在 Windows 11 中禁用动画 Apr 16, 2023 pm 11:34 PM

MicrosoftWindows11中包含多项新特性和功能。用户界面已更新，公司还引入了一些新效果。默认情况下，动画效果应用于控件和其他对象。我应该禁用这些动画吗？尽管Windows11具有视觉上吸引人的动画和淡入淡出效果，但它们可能会导致您的计算机对某些用户来说感觉迟钝，因为它们会为某些任务增加一点延迟。关闭动画以获得更灵敏的用户体验很简单。在我们看到对操作系统进行了哪些其他更改后，我们将引导您了解在Windows11中打开或关闭动画效果的方法。我们还有一篇关于如何在Windows

See all articles

css3实现动画的好处有哪些

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题