CSS3动画相关属性的总结
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 1s 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,实现代码也很简洁:
参考