前端动画的总结animation transition transform

最新推荐文章于 2024-05-06 19:28:55 发布

hqin_520

最新推荐文章于 2024-05-06 19:28:55 发布

阅读量340

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/hqin_520/article/details/100205020

版权

5 篇文章 0 订阅

订阅专栏

最近这段时间一直想写一篇关于前端动画的文章，一方面是之前面试经常问到css3新特性的问题，另一方面也是想把知识梳理一遍。

前端写动画效果无非就是2种，一种就是用css写，另一种就是用js写
1、css3写动画
2、javascript写动画
3、几种动画之间的比较
4、扩展介绍一些使用网站

（1）animation动画（IE9+）animation是结合@keyframes一起使用

属性值	注释	value
animation-name	key-frame名称	自定义(@keyframes)
animation-duration	规定动画完成一个周期所花费的秒或毫秒	自定义
animation-delay	延迟，规定动画何时开始	自定义
animation-iteration-count	播放次数	自定义(无限’infinite’)
animation-direction	规定动画是否在下一周期逆向地播放	normal：正常方向， alternate：正常与反向交替
animation-play-state	规定动画状态	运行running 或暂停 paused
animation-timing-function	速度曲线	详情参考下方
animation-fill-mode	规定对象动画时间之外的状态	详情参考下方

animation-timing-function 速度曲线
linear：动画从头到尾的速度是相同的。
ease：默认。动画以低速开始，然后加快，在结束前变慢。
ease-in：由慢到快
ease-out：由快到慢
ease-in-out：由慢到快再到慢
cubic-bezier(, , , )：特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内
steps(num，start or end)函数 =》为了满足逐帧动画的实现,num是分几次执行，第二个参数表示动画发生变化的时间点steps(1，start) = = step-start，steps(1，end)== step-end
animation-fill-mode 规定对象动画时间之外的状态
none：默认值。不设置对象动画之外的状态
forwards：设置对象状态为动画结束时的状态
backwards：设置对象状态为动画开始时的状态
both：设置对象状态为动画结束或开始的状态
六个属性可以简写

eg: 加一个animation动画名字是running_tv，过渡时间是2S，无限播放，逐帧；
在这里插入图片描述

（2）transition过渡（IE10+）

属性值	注释	value
transition-property	指定属性的name，效果	none(没有属性),all(所有属性),property(自定义)
transition-duration	过渡时间	秒/毫秒/自定义
transition-timing-function	指定transition效果的转速曲线	linear(匀)，ease(慢快慢)，ease-in(慢开始)，ease-out(慢结束), ease-in-out(慢快慢), cubic-bezier(n,n,n,n)
transition-delay	定义transition效果开始的时候	秒/毫秒/自定义

（3）transform 变形（IE9+）
在这里插入图片描述
更详细的transform属性请点击http://www.w3school.com.cn/cssref/pr_transform.asp

1.setTimeOut/setInterval （不推荐）

2.requestAnimationFrame（兼容性ie10以上）

关注