一、transition过渡动画
语法: transition: 过渡属性 过渡时间 过渡延迟时间 过渡方式;
1.transition-property(过渡属性)
取值:
none 默认值,没有属性发生过渡
all 所有发生变化的css属性都添加过渡
eg: transition:all 1s;
ident 指定发生过渡的css属性列表
eg: transition:transform 3s,background 2s,border-radius 1s;
2.transition-duration(过渡时间)
取值:
0 默认值,不发生过渡,直接看到结果
time 按照设置的时间执行过渡动画,单位为s或者ms
3.transition-delay(过渡动画延迟执行时间)
取值:
0 默认值,不延迟
正值 按照设定的时间延迟执行过渡动画
负值 设置时间前的动画将会被截断
4.transition-timing-function(过渡方式)
取值:
ease 默认值,缓解效果
linear 线性效果(匀速运动)
ease-in 渐显效果(加速运动)
ease-out 渐隐效果(减速运动)
ease-in-out 渐显渐隐效果(慢-快-慢)
二、animation动画
语法:animation:动画名称 动画执行时间 动画延迟执行时间 动画播放次数 动画的播放状态 动画时间之外的状态 动画运动方向 动画执行方式;
♥ 说明:
在添加animation动画之前首先要定义动画关键帧,语法如下
@keyframes 动画名称{
0%{
属性:属性值;
…
}
20%{
属性:属性值;
…
}
…
100%{
属性:属性值;
}
}
或:
@keyframes 动画名称{
from{
…
}
…
to{
…
}
}
注:@keyframes兼容写法:
@-webkit-keyframes 动画名称{…}
1.animation-name(动画名称)
eg: animation:box_ani 1s;
注:animation中的动画名称要和@keyframes中定义的动画名称一致
2.animation-duration(动画执行一次所需时间)
取值:
0 默认值,动画不执行
time 按照设定的时间执行动画,单位为s或者ms
3.animation-delay(动画延迟执行时间)
取值:
0 不延迟
正值 按照设置的时间延迟执行动画
负值 设置时间前的动画将会被截断
4.animation-iteration-count(动画播放次数)
取值:
0 不执行动画
正整数 指定播放次数
infinite 无限循环播放
5.animation-play-state(动画播放状态)
取值:
running 默认值,运动状态
paused 动画暂停
eg: .box{animation:box_ani 5s infinite;}
.box:hover{animation:box_ani 5s infinite paused;}
6.animation-timing-function(animation动画执行方式)
取值:
ease|linear|ease-in|ease-out|ease-in-out
step-start 马上转跳到动画结束状态
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两个规则
三、★transition和animation的区别
1.transition需要触发条件,页面加载完成后不会自动执行
animation不需要触发条件,页面加载完成后自动执行
2.transition只有开始和结束两个状态,不能设置中间状态
animation可以像flash一样,设置中间的关键帧
3.transition触发一次执行一次,再次执行需要再次触发
animation可以指定执行的次数或者无限循环播放
扩展:倒影
语法:-webkit-box-reflect:left|right|above(上)|below(下) 偏移量 渐变;
扩展:背景在文本区域可见
语法:-webkit-background-clip:text;
注:设置为text时,color要设置为transparent透明