版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/github_36091081/article/details/80013495
css3动画相关属性的总结
概述
在最近的项目中，好多都要用到微交互，而这些微交互与css3的动画属性密不可分，例如下面的的微交互：
CSS3动画相关属性有：transition,transform,animation，下面对这些属性和属性值做一个总结。
transition过渡属性
（1）概述
W3C 的解释：CSS Transitions allows property changes in CSS values to occur smoothly over a specified duration.
即：在改变元素css属性值时，transition可以让这个改变在自己指定时间里平滑的进行。
（2）哪些css属性改变时可以应用transiton，达到平滑过渡的效果呢？
不是所有的css属性都能应用transition,常见的border、background、位置属性margin 都是可以用transiton属性的
（3）transition的书写方法
a. transition-property
指定要应用transiton的属性值，可以是多个,例如：
-webkit-transition-property: width height background-color font-size left
b. transition-duration
指定持续时间
c. transition-timing-function
指定一个函数来定义如何计算属性的中间值。
1) 贝塞尔曲线函数--最常用的贝塞尔曲线函数 给出了关键字，方便调用 如： linear、ease…
- linear 匀速 cubic-bezier(0.0, 0.0, 1.0, 1.0)
- ease 慢-快-慢
- ease-in 慢-快
- ease-in-out 慢-快-慢
- ease-out 快-慢
2) steps函数
- step-start -> steps(1,start) 每个帧变化一次 开始的帧忽略 立即跳到最后状态
- step-end -> steps(1,end) 每个帧变化一次 最后一帧忽略
你可以从这个网址 选择需要的缓动函数
http://easings.net/zh-cn
d. transition-delay
定义transiton作用之前的等待时间
e. 短写方式
div
{
transition
:
<property> <duration> <timing-function> <delay>
;
}
transition
:
all
1
s ease-out
;
（4）与Javascript相关的处理
js检测 transition的开始、结束
el
.
addEventListener
(
"transitionend"
,
updateTransition
,
true
);
监测 transition的结束
el
.
addEventListener
(
"transitionrun"
,
signalStart
,
true
);
监测 transition的开始（在delay延迟 之前就触发了）
el
.
addEventListener
(
"transitionstart"
,
signalStart
,
true
);
监测 transition的开始 （在delay之后触发）
（5）截止目前的兼容性
animation动画属性
（1）
CSS animations 相比 脚本动画的三个优势：
使用简单、动画效果平滑、更高效
（2）animation的书写方法
1) aniamtion-delay
动画延迟多长时间执行
2）animation-direction
normal -> 动画正常执行
reverse -> 动画 以相反的路径执行
alternate -> 动画来回播放
alternate-reverse -> 上述两个属性的结合
3）animation-duration
动画持续时间
4）animation-iteration-count
动画迭代重复次数
5）animation-name
动画的名字 @keyframes配置的是该动画具体的表现形式
6）animation-play-state
runing 指定动画执行
paused 指定动画停止
7）animation-timing-function、
同 transition的
transition-timing-function
ease、ease-in、ease-out、ease-in-out、liner、step-start、step-end...
8）animation-fill-mode
none -> 不应用该属性
forwards -> 动画执行到最后frame的时候，保持住最后动画frame状态，eg：最后frame中定义的是font-size:100px;那么最后动画就会保持在 font-size:100px的状态
backwards -> 动画目标首先应用第一个frame里的值，在animation-delay过程中也保持这个值
both -> forwards 和 backwards 的结合
（3）用keyframes定义动画序列
配置了动画执行时间后 利用keyframes配置动画的样子
from 代表 0% 开始动画样式 to 代表 100% 动画结束的样子 中间可以自己配置额外的keyframes ，写法如下：
@keyframes slidein
{
from
{
margin-left
:
100%
;
width
:
300%
;
}
to
{
margin-left
:
0%
;
width
:
100%
;
}
}
栗子
上述的动画结合了CSS3的animation和transform，实现代码也很简洁：
参考