一,CSS3 过渡语法: transition: 过渡属性 过渡时间 延迟时间 过渡方式;1. 过渡属性 (transition-property)
取值:all 所有发生变化的 css 属性都添加过渡
eg: transition: all 1s;
ident 指定要过渡的 css 属性列表
eg: transition:border-radius 1s,background 2s;
none 没有属性发生过渡
注:我们可以省略滑过状态或其他状态的过渡属性,但是不能省略初始状态的 transition 属性
2. 过渡时间 (transition-duration)
取值:0 不过渡
time 设置一个正数,单位为 s
eg: transition: all 1s;
3. 延迟时间 (transition-delay)
取值:
0 不延迟,过渡动画正常执行
正数 按照设置的时间延迟执行过渡动画
负数 设置时间前的动画将会被截断
4. 过渡方式 (transition-function)
取值:
ease 缓解效果,默认值
linear 匀速运动
ease-in 加速运动
ease-out 减速运动
ease-in-out 慢 - 快 - 慢
二,css3 动画语法: animation: 动画名称 动画执行时间 动画延迟执行时间 动画播放次数 动画播放后的状态;
动画是由一帧一帧的关键帧组成的,在设置 animation 之前要先定义动画关键帧:
语法:
@keyframes 动画名称 {
0%{
属性: 属性值;
}
50%{
属性: 属性值;}
...
100%{
属性: 属性值;}
}
@keyframes 动画名称 {from{
属性: 属性值;
}
...
to{
属性: 属性值;}
}
1. 动画名称 (animation-name)eg: animation:ball 1s;
注:动画名称要与 @keyframes 中的动画名称一致
2. 动画执行一次所需的时间 (animation-duration)
取值:
time: 正数,单位为秒 (s) 或者毫秒(ms),默认为 0,不执行动画
3. 动画延迟执行的时间 (animation-delay)
取值:
0: 默认值,不延迟
正数: 按照设置的时间延迟执行动画
负数: 设置时间前的动画将会被截断
4. 设置动画的播放次数 (animation-iteration-count)
取值:
number 可以设置为正整数
infinite 无限循环播放
5. 设置对象动画的状态 (animation-play-state)
取值:
running 默认值,运动
paused 动画暂停
6. 设置动画的播放方式 (animation-timing-function)
取值:
ease
linear 匀速运动
step-start 马上转跳到动画的结束状态或马上转跳到下一帧,中间没有过渡
ease-in
ease-out
ease-in-out
step-end 保持动画开始时的状态,直到动画执行结束,转跳到动画结束状态
steps(n,start|end)
n 代表动画分几步完成
7. 设置对象动画的运动方向 (animation-direction)
取值:
normal 默认值,正常方向运动
reverse 与 normal 方向相反运动
alternate 奇数次正方向,偶数次反方向
alternate-reverse 奇数次反方向,偶数次正方向
8. 设置对象动画时间之外的状态 (animation-fill-mode)
取值:
none 默认值,不设置对象动画之外的状态
forwards 保持动画结束时的状态
backwards 保持动画开始时的状态
both 遵循 forwards 和 backwards 两个规则
扩展:隐藏变形元素的背面 backface-visibility:hidden;
来源: http://www.bubuko.com/infodetail-2455704.html