CSS3 animation的各个属性
2016-11-21 14:33
274 查看
“@keyframes”关键帧:自定义一些动画名称,规定什么时间做什么动作。即“@keyframes”后面跟着动画名称加上一对花括号“{...}”,花括号中是不同时间段样式。
例如
@keyframes changecolor {
0%{
background : red;
}
100%{
background : yellow;
}
}
animation 属性是一个简写属性,用于设置八个动画属性:
1. animation-name keyframes名称
2. animation-duration 指定完成动画所花费的时间,以秒或毫秒计
3. animation-timing-function 指定动画的速度曲线
4. animation-delay 指定在动画开始之间的延迟
5. animation-iteration-count 指定动画应该播放的次数
6. animation-direction 指定是否应该轮流反向播放动画
7. animation-fill-mode 指定当动画不播放时(当动画完成时或动画有一个延迟未开始播放时),要应用 到的样式
8. animation-play-state 指定动画是否正在运行或已暂停
animation-timing-function 指定动画的速度曲线
1.linear 匀速
2.ease 默认,动画以低速开始,然后加快,在结束前变慢。
3.ease-in 缓慢开始(加速)
4.ease-out 缓慢结束(减速)
5.ease-in-out 缓慢开始,缓慢结束(先加速后减速)
animation-delay
动画开始之间的延迟
1.单位是秒或毫秒
2.可以是负值,-2秒表示动画立马开始,但跳过2秒进入动画,即前两秒的动画不执行,直接跳过前两秒进入动画。
animation-iteration-count
指定动画应该播放的次数
默认1次,可以设置2次,3次.......infinite表示无限
c4d9
animation-direction
是否应该轮流反向播放动画
animation-fill-mode
指定当动画不播放时(当动画完成时或动画有一个延迟未开始播放时),要应用到的样式
animation-play-state
指定动画是否正在运行或已暂停
paused
指定暂停动画
running
指定正在运行的动画
(使用animation实现视频播放效果的时候)
例如
@keyframes changecolor {
0%{
background : red;
}
100%{
background : yellow;
}
}
animation 属性是一个简写属性,用于设置八个动画属性:
1. animation-name keyframes名称
2. animation-duration 指定完成动画所花费的时间,以秒或毫秒计
3. animation-timing-function 指定动画的速度曲线
4. animation-delay 指定在动画开始之间的延迟
5. animation-iteration-count 指定动画应该播放的次数
6. animation-direction 指定是否应该轮流反向播放动画
7. animation-fill-mode 指定当动画不播放时(当动画完成时或动画有一个延迟未开始播放时),要应用 到的样式
8. animation-play-state 指定动画是否正在运行或已暂停
animation-timing-function 指定动画的速度曲线
1.linear 匀速
2.ease 默认,动画以低速开始,然后加快,在结束前变慢。
3.ease-in 缓慢开始(加速)
4.ease-out 缓慢结束(减速)
5.ease-in-out 缓慢开始,缓慢结束(先加速后减速)
animation-delay
动画开始之间的延迟
1.单位是秒或毫秒
2.可以是负值,-2秒表示动画立马开始,但跳过2秒进入动画,即前两秒的动画不执行,直接跳过前两秒进入动画。
animation-iteration-count
指定动画应该播放的次数
默认1次,可以设置2次,3次.......infinite表示无限
c4d9
animation-direction
是否应该轮流反向播放动画
值 | 说明 |
---|---|
normal | 默认值。动画按正常播放。 |
reverse | 动画反向播放。 |
alternate | 动画在奇数次(1、3、5…)正向播放,在偶数次(2、4、6…)反向播放。 |
alternate-reverse | 动画在奇数次(1、3、5…)反向播放,在偶数次(2、4、6…)正向播放。 |
initial | 设置该属性为它的默认值。 |
inherit | 从父元素继承该属性。 |
指定当动画不播放时(当动画完成时或动画有一个延迟未开始播放时),要应用到的样式
属性值 | 效果 |
none | 默认值,表示动画将按预期进行和结束,在动画完成其最后一帧时,动画会反转到初始帧处 |
forwards | 表示动画在结束后继续应用最后的关键帧的位置 |
backwards | 会在向元素应用动画样式时迅速应用动画的初始帧 |
both | 元素动画同时具有forwards和backwards效果 |
指定动画是否正在运行或已暂停
paused
指定暂停动画
running
指定正在运行的动画
(使用animation实现视频播放效果的时候)
相关文章推荐
- CSS3 动画 Transitions, Transforms和Animation属性
- 利用CSS3中animation属性实现雪花飘落功能
- CSS3动画animation相关属性与关键帧规则keyframes
- CSS3中动画属性transform、transition 和 animation
- css3 animation属性
- css3动画animation属性大全
- CSS3动画之animation属性学习笔记
- 经常被忽略的几个CSS3属性之强大应用(一、timing-function: steps() 二、animation-direction 三、timing-function: cubic-bezier())
- CSS3 Transform、Transition和Animation属性总结
- 纯CSS3属性animation实现的打字效果
- CSS3 animation 属性
- css3常用属性animation-play-state的使用技巧
- CSS3动画Animation的八大属性
- CSS3 Animation属性详解
- CSS3的新属性animation
- css3动画-animation属性
- CSS3与动画有关的属性transition、animation、transform对比
- css3 animation动画对应属性解释
- animation属性——css3动画效果
- CSS3 动画属性 animation 的基本用法