Tranform + Transitions + Animation

wapeyang 发布于2019-08-29 15:12 / 2800人阅读

摘要：属性是定义元素距试图的距离，设置以后，其子元素会获得透视效果，需要注意的是该值只对转换有效，这也是很容易理解的。此外，还可以通过的属性值的方式设置，二者是有一定区别的，你可以认为，前者是把整个看成一个舞台，后者是每一个都是一个舞台。

作者：心叶
时间：2018-04-27 11:45

Tranform 转换 一些常用的属性：

transform: none | transform-functions;【通过设置该属性的值，我们可以对元素使用转换，具体的属性值在下面会专门介绍。】

transform-origin: x-axis y-axis z-axis;【设置元素转换的中心点，最直观的例子旋转图片，改变图片选择依赖的旋转中心。】

transform-style: flat | preserve-3d;【定义里面转换的元素是在2D平面呈现还是在3D空间呈现，讲的直白些，就是这个元素里面的空间维度是二维还是三维。】

perspective: number | none;【属性是定义3D元素距试图的距离，设置以后，其子元素会获得透视效果，需要注意的是该值只对3D转换有效，这也是很容易理解的。此外，还可以通过Transform的属性值的方式设置，二者是有一定区别的，你可以认为，前者是把整个看成一个舞台，后者是每一个都是一个舞台。】

perspective-origin: x-axis y-axis;【必须和perspective一起使用，只对3D转换元素有效，简单的理解就是你的眼睛看的焦点。】

backface-visibility:hidden | visible;【这个很简单，设置当元素背对着屏幕时候，是否是可见的。】

上面介绍的属性transform: none | transform-functions;其中有很多方法可以使用，具体的请查看文件API，这里没有列举出来的意义，其中perspective(n)方法是为3D转换元素定义透视视图，需要稍微留意一下，其中一些方法比较特殊，以后会多带带去介绍。

Transitions 过渡

transition: property duration timing-function delay;

请始终设置 transition-duration 属性，否则时长为 0，就不会产生过渡效果。上面是统一设置，也可以分别设置各个属性。

一些常用的属性：

1.transition-property：规定设置过渡效果的 CSS 属性的名称；

2.transition-duration：规定完成过渡效果需要多少秒或毫秒；

3.transition-timing-function：规定速度效果的速度曲线；

4.transition-delay：定义过渡效果何时开始。

Animation 动画

animation: name duration timing-function delay iteration-count direction;

请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。上面是统一设置，也可以分别设置各个属性。

一些常用的属性：

1.animation-name：规定需要绑定到选择器的 keyframe 名称；

2.animation-duration：规定完成动画所花费的时间，以秒或毫秒计；

3.animation-timing-function：规定动画的速度曲线；

4.animation-delay：规定在动画开始之前的延迟；

5.animation-iteration-count：规定动画应该播放的次数；

6.animation-direction：规定是否应该轮流反向播放动画；

7.animation-fill-mode (可以设置为none | forwards | backwards | both)：规定动画在播放之前或之后，其动画效果是否可见；

8.animation-play-state（可以设置为paused|running）：规定动画正在运行还是暂停，可以在 JavaScript 中使用该属性，这样就能在播放过程中暂停动画；

9.@keyframes animName{from {} to {}}：定义动画名称为animName的动画关键帧。

云服务器 GPU云服务器 Tranform Transitions Animation core-animation

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113170.html

CSS3-transition

摘要：规定应用过渡的属性的名称。规定过渡效果的时间曲线。可能的值是至之间的数值。负值是允许的，这样是元素逆时针旋转。 CSS3之transition实现下划线在这里先看看我们的demo showImg(https://segmentfault.com/img/remote/1460000014676200); 认识transition 这是CSS3中新增的一个样式，可以实现动画的过度。通常...

acrazing 2019-08-29 15:15 评论0 收藏0
【小程序可用】CSS3 animation 实现的跑马灯

摘要：先放个效果如果能访问最好主要原理微信小程序现在实际上还是用的，里面搞动画效率最高的莫过于使用的了。由于微信小程序中无法获取到对应元素的宽度，这个时间只能写死或者根据的长度估算出一个值。最近有个项目里面用到跑马灯，网上搜了下，虽然有人贴出来过一些实现，但是实际上都存在一些个问题。哎，再造个轮子吧。先放个效果：showImg(https://segmentfault.com/img/...

tianlai 2019-08-20 16:50 评论0 收藏0
说说动画卡顿的解决方案

摘要：动画卡顿解决方案前端时间用实现页面中首页动画过渡，很简单的一个效果，首页加载一个客服头像，先放大，停留后再缩小至顶部。参考文章深入浏览器理解和的性能问题解决动画卡顿的办法 CSS3 动画卡顿解决方案前端时间用animation实现H5页面中首页动画过渡，很简单的一个效果，首页加载一个客服头像，先放大，停留700ms后再缩小至顶部。代码如下 ...

AlphaWatch 2019-08-29 11:09 评论0 收藏0