css3动画使用

Posted 2023-04-23

参考技术A animation实现动画由俩个部分组成，通过类似flash动画的关键帧来申明一个动画，在animation属性中调用关键帧声明的动画实现一个更为复杂的动画效果

关键帧 例如：

调用关键帧：

语法 animation:animation-name animation-duration animation-timing-function  animation-delay animation-iteration-count animation-direction

animation-name 由 @keyframes 创建的动画名称

animation-duration过渡时间

animation-timing-function过渡方式

animation-delay延迟时间

animation-iteration-count 动画的播放次数 通常值为1次 特殊值infinite为无限播放

animation-direction动画的播放方向，alternate为偶数次向前播放，normal动画每次都是循环向前播放

练习如下：

该图形的变化从左上角到右上角来回跳动的一个过程

linear  规定以相同速度开始至结束的过渡效果

ease  规定慢速开始，然后变快，然后慢速结束的过渡效果（默认值）

ease-in 规定以慢速开始的过渡效果

ease-out  规定以慢速结束的过渡效果

ease-in-out 规定以慢速开始和结束的过渡效果

 perspective:500px;透视 也可以理解为视距，可以理解为 你的眼睛距离物体的距离  距离物体越近 物体就越大，距离物体越远 物体就越小

transform: rotateZ(30deg) rotateZ是绕着z轴旋转 正值是顺时针旋转 负值是逆时针旋转

transform: rotateY(30deg) rotateY是绕着y轴旋转 正值是向里面旋转 负值是向外面旋转

transform: rotateX(30deg)rotateX是绕着x轴旋转 正值是向里面旋转 负值是向外面旋转

transform: rotate(30deg)参数a取正值时元素相对原来中心顺时针旋转

 transform: translate3d(0, 0, 200px);效果如下:

 translate3d(0,0,200px) 表示z轴向前移动二楼200px（近大远小的原理）

 translate3d 里面分别表示x轴距离 y轴距离 和z轴距离

 要想实现3d效果必须要在父元素上加上一个属性perspective

如果想让子元素有3d的效果 必须要给父元素设置transform-style，默认值是flat， 想变成3d效果要把值设置成preserve-3d

也可以 设置旋转后的div的上下位置，在.b:hover里面加上transform-origin：top/bottom/left/right

角度 2 动画与 css 动画 - 何时使用啥？

【中文标题】角度 2 动画与 css 动画 - 何时使用啥？

【英文标题】：angular 2 animation vs css animation - when to use what?角度 2 动画与 css 动画 - 何时使用什么？

【发布时间】：2017-04-18 08:54:04

【问题描述】：

我目前正在试用 angular2 的动画，我想知道它们比标准 css 动画/过渡带来了哪些具体优势。

例如典型的材质设计卡片和带有盒子阴影的悬停效果。大多数 css 框架使用 :hover 和 css-transitions。使用 Angular 2 动画有什么特别的优势吗？

我在某处读到某些 css 动画属性不会调用 GPU 那么多，因此存在一些延迟和滞后。 angular2 动画呢？

【问题讨论】：

好吧，我对 Angular 了解不多，但我认为它们只是利用了 CSS 动画。 In fact their docs say：“Angular 的动画系统让您构建的动画运行时具有与纯 CSS 动画相同的原生性能。”。他们还指定使用web animations，其中possible。当您在 Google 上搜索“angular 2 动画”时，这是第一次点击

我相信angular2动画在编译时只是创建了css动画。优点是能够更轻松地在组件级别添加和控制动画。

感谢您的快速响应，所以基本上我从 angular 2 动画中得到的是使动画更可控的方法（如 anmat() 和 style()）（？）

是的，主要就是这样。通过拥有这样的通用 API，您可以使一些常用动画更易于访问，并且可以在浏览器不支持某个功能或以不同方式实现它时提供优雅的回退。但我认为这实际上是大多数库和框架的目标，例如 Angular、jQuery 和许多其他的。

【参考方案1】：

答案实际上在文档中：

https://angular.io/guide/animations

Angular 的动画系统可以让你构建运行的动画 与纯 CSS 动画中的原生性能相同。你可以 还将您的动画逻辑与您的其余部分紧密集成 应用代码，便于控制。

它还消除了跟踪动画长度的需要，以便交错并避免浏览器过载或链接动画。

一般来说，如果你有一个简单的小东西，CSS 可能更容易。但是如果你一直在你的应用中做动画，那么你会从 Angular Animations 中获得强大的功能而几乎没有缺点。

【参考方案2】：

问题其实更多的是 javascript 动画 vs css 动画（因为 angular2 的动画是基于 javascript-animation 的）。

答案是当你可以 - 使用 CSS 动画。

现代浏览器使用different thread 进行 CSS 动画，因此 javascript-thread 不受 CSS 动画的影响。

您可以使用HTML5 Animation Speed Test 在您的浏览器中检查不同框架（基于 javscript）VS CSS 动画的性能。

一般：

浏览器能够优化渲染流程。总之，我们应该尽可能尝试使用 CSS 过渡/动画来创建动画。如果您的动画非常复杂，您可能不得不依赖基于 JavaScript 的动画。

如果您想具体了解 Angular2 动画 - 只需检查浏览器中的元素并检查动画是否存在基于 CSS（transition/animationFrame 或 javascript）（您将能够看到 style 中的值动画期间的属性变化）。

【讨论】：

这很好，但是虽然 Angular 是 JavaScript，但我认为它仍然使用 CSS 来制作动画。这里没有专家，但我在之前的评论中提到的链接似乎对此很清楚。

@GolezTrol，检查从 1 分钟前到我的回答的更新 :) 它解释了如何检查 angular2 的动画是基于 css 还是 js。

@Dekel，恕我直言，因为这个答案是第一个出现在谷歌搜索中并且投票数很高的答案，我觉得有必要回复。 Angular 使用web animations api 来触发其动画，因此它不会通过 javascript 更改样式属性，因此非常高效。